Restology Exhibition

ADSORPTION OF SUSPENDED PARTICLES THROUGH BIPLASTIC AND ACTIVATED CHARCOAL EXHIBITION

restology ADSORPTION OF SUSPENDED PARTICLES THROUGH BIPLASTIC AND ACTIVATED CHARCOAL

restology EXHIBITION

INTRODUCTION The term ‘eco-friendly’ has been heard with increasing frequency over the last decade, leading to the rise of responsible alternatives that allow taking small steps to combat contamination.

However, no one takes into account the fact that most of the daily actions generate pollution as a consequence. Facing this problem, and as it was previously presented in this research, the focus is to design new applications of bioplastic to reduce air pollution.

As the research went forward, it became noticeable that the other side of the problem is as much as important as how to combat pollution: the ignorance of it. The sudden realization that the spectator needs to be aware of this issue and accept the alternatives and solutions provided to aspire to change their habits.

What is like to be aware and how does a person becomes aware of an issue? The Cambridge Dictionary defines Awareness as “the knowledge or perception of a situation or fact.” Therefore, awareness is acquired through the senses.

With this premises and exhibition was developed to sensitize the spectators and ecological enthusiasts.

The exhibition is divided into three stages: a conceptual and interactive representation of the natural process of looking for a solution; a starting point from the moment of becoming aware of a problem, in this case, pollution 1(Peng, Zhang. Pumping out pollutants).

During the second stage of the exhibition, there’s a room dedicated to reflection; where an interactive visual media is presented to explore the relationship between the user and pollution.

The third stage is the solution itself, where the results of the research and the proposed solution are presented to the user.

4

restology INTRODUCTION

01- Pumping out pollutants.

5

restology EXHIBITION

AREA PLAN

6

restology AREA PLAN

7

STAGES

8

9

restology EXHIBITION

FIRST STAGE: PROBLEM In Praise of Air, 2014. “[…] Let air be a major god, its being and touch, its breast-milk always tilted to the lips. Both dragonfly and Boeing dangle in its see-through nothingness…

Among the jumbled bric-a-brac I keep a padlocked treasure-chest of empty space, and on days when thoughts are fuddled with smog or civilization crosses the street with a white handkerchief over its mouth and cars blow kisses to our lips from theirs I turn the key, throw back the lid, breathe deep.

My first word, everyone’s first word, was air..”

– Simon Armitage In a day where the air is highly polluted and with atmospheric contingency, the sky covers in a grey blanket of smog obstructing the view of the horizon. Interpreting it into the installation, it is represented by three translucent bioplastic partitions arranged one behind the other, welcoming the spectators.

10

restology FIRST STAGE: PROBLEM

04- Exhibition.

05- Three translucent bioplastic partitions arranged one behind the other.

06- Exhibition.

07- Bioplastic panel.

11

restology EXHIBITION

07- Social Media Data.

SECOND STAGE: DATA/INFORMATION The second phase of the exhibition is intended for the spectator to understand how daily actions affect the environment—if there is no synergy, nothing happens.

Taking into account that the Restology formula conducts electricity, a proximity sensor was built, allowing the users to interact and visualize relevant information, while being able to explore it in more detailed, making data accessible 3(Dyrcz, Hanna. 2016).

Restology bioplastic is connected to a series of microcontrollers that with the Internet and the magnetic field generated by the bioplastic will allow the access to pollution-related databases, which are then used by computer tools to reveal visual media using javascript library THREE.js 4(“Three.js.” threejs.org 2017).

12

restology SECOND STAGE: DATA/INFORMATION

08- Visualization of particles in the Exhibition.

VISUALIZATION OF PARTICLES unction init() {container = document. createElement( ‘div’ ); document.body.appendChild( container ); camera = new THREE. PerspectiveCamera( 75, window. innerWidth / window.innerHeight, 5, 15000 );

camera.position.y = 10; camera.position.z = 400; scene = new THREE.Scene(); renderer = new THREE. WebGLRenderer(); renderer. setPixelRatio( window. devicePixelRatio ); renderer.setSize(window.innerWidth,

window.innerHeight ); container.appendChild( renderer. domElement ); controls = new THREE.OrbitControls( camera, renderer.domElement ); effectController = {

gravityConstant: 0, density: 8, radius: 375, height: 40, exponent: 0.8, maxMass: 25, velocity: 12.3, velocityExponent: 0.2, randVelocity: 0 }

NAVIGATION CONTROLLERS <script type=”text/javascript”> document.onkeydown = function(){ if(window.event && window.event.

keyCode == 65) {window.location.href = “UNO.html” }} </script>

13

restology EXHIBITION

VISUAL CONTROLLERS

6:00 pm pm10: 215 pm2.5: 63 O3: 56

12:00 pm pm10: 100 pm2.5: 32 O3: 63

3:00 pm pm10: 160 pm2.5: 27 O3: 50

5:00 pm pm10: 90 pm2.5: 52 O3: 42

14

restology VISUAL CONTROLLERS

7:00 pm pm10: 110 pm2.5: 30 O3: 50

5:00 pm pm10: 180 pm2.5: 34 O3: 31

3:00 pm pm10: 125 pm2.5: 41 O3: 64

5:00 pm pm10: 205 pm2.5: 30 O3: 51

15

restology EXHIBITION

NAVIGATION CONTROLLERS

LEFT

RIGHT

IN

OUT

16

restology NAVIGATION CONTROLLERS

09- Manufacturing process.

17

restology EXHIBITION

THIRD STAGE: SOLUTION When arriving at the third stage, the results of the research will be presented, displaying the indoor and outdoor spaces designs, along with the process through which both proposals were developed.

In this area, the spectators will also find a Catalogue of Restology Bioplastic, that has relevant information and the instructions to create bioplastic. The path ends by offering possible alternatives for plastics, thus inspiring spectators to develop environmentally-friendly solutions.

18

restology NAVIGATION CONTROLLERS

10- Exhibition render.

19

restology EXHIBITION

SOURCE CODE <!DOCTYPE html> <html lang=”en”> <head> <title>RESTOLOGY - UNO</title> <meta charset=”utf-8”> <meta name=”viewport” content=”width=device-width, userscalable=no, minimum-scale=1.0, maximum-scale=1.0”> <style> body { background-color: #000000; margin: 0px; overflow: hidden; font-family:Monospace; font-size:13px; text-align:center; text-align:center; cursor: pointer; } a{ color:black; } #info { color: black; position: absolute; top: 10px; width: 100%; } #warning { color: black; } </style> </head> <body> <div id=”info”> <a href=” “ target=”_blank” rel=”noopener”>RESTOLOGY</a> <span id=” “></span> UNO<br/> <span id=”options”></span> <br/> <span id=”warning”></span> </div> <script src=”../build/three.js”></ script> <script src=”js/Detector.js”></script> <script src=”js/libs/stats.min.js”></ script> <script src=”js/libs/dat.gui.min.js”></ script> <script src=”js/controls/OrbitControls. js”></script> <script src=”js/

20

GPUComputationRenderer.js”></ script> <!-- Fragment shader for protoplanet’s position --> <script id=”computeShaderPosition” type=”x-shader/x-fragment”> #define delta ( 1.0 / 60.0 ) void main() { vec2 uv = gl_FragCoord.xy / resolution. xy; vec4 tmpPos = texture2D( texturePosition, uv ); vec3 pos = tmpPos.xyz; vec4 tmpVel = texture2D( textureVelocity, uv ); vec3 vel = tmpVel.xyz; float mass = tmpVel.w; if ( mass == 0.0 ) { vel = vec3( 0.0 ); } pos += vel * delta; gl_FragColor = vec4( pos, 1.0 ); } </script> <!-- Fragment shader for protoplanet’s velocity --> <script id=”computeShaderVelocity” type=”x-shader/x-fragment”> #include <common> #define delta ( 1.0 / 60.0 ) uniform float gravityConstant; uniform float density; const float width = resolution.x; const float height = resolution.y; float radiusFromMass( float mass ) { return pow( ( 3.0 / ( 4.0 * PI ) ) * mass / density, 1.0 / 3.0 ); void main() { vec2 uv = gl_FragCoord.xy / resolution. xy; float idParticle = uv.y * resolution.x + uv.x; vec4 tmpPos = texture2D( texturePosition, uv ); vec3 pos = tmpPos.xyz; vec4 tmpVel = texture2D( textureVelocity, uv ); vec3 vel = tmpVel.xyz; float mass = tmpVel.w; if ( mass > 0.0 ) { float radius = radiusFromMass( mass ); vec3 acceleration = vec3( 0.0 );

restology NAVIGATION CONTROLLERS

for ( float y = 0.0; y < height; y++ ) { for ( float x = 0.0; x < width; x++ ) { vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy; vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz; vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords ); vec3 vel2 = velTemp2.xyz; float mass2 = velTemp2.w; float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x; if ( idParticle == idParticle2 ) { continue; } if ( mass2 == 0.0 ) { continue; } vec3 dPos = pos2 - pos; float distance = length( dPos ); float radius2 = radiusFromMass( mass2 ); if ( distance == 0.0 ) { continue; } if ( distance < radius + radius2 ) { if ( idParticle < idParticle2 ) { vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 ); mass += mass2; radius = radiusFromMass( mass ); } else { mass = 0.0; radius = 0.0; vel = vec3( 0.0 ); break; } } float distanceSq = distance * distance; float gravityField = gravityConstant * mass2 / distanceSq; gravityField = min( gravityField, 1000.0 ); acceleration += gravityField * normalize( dPos ); } if ( mass == 0.0 ) { break; } } vel += delta * acceleration;

} gl_FragColor = vec4( vel, mass ); } </script> <!-- Particles vertex shader --> <script type=”x-shader/x-vertex” id=”particleVertexShader”> #include <common> uniform sampler2D texturePosition; uniform sampler2D textureVelocity; uniform float cameraConstant; uniform float density; varying vec4 vColor; float radiusFromMass( float mass ) { return pow( ( 3.0 / ( 4.0 * PI ) ) * mass / density, 1.0 / 3.0 ); } void main() { vec4 posTemp = texture2D( texturePosition, uv ); vec3 pos = posTemp.xyz; vec4 velTemp = texture2D( textureVelocity, uv ); vec3 vel = velTemp.xyz; float mass = velTemp.w; vColor = vec4( 1.0, mass / 250.0, 0.0, 1.0 ); vec4 mvPosition = modelViewMatrix * vec4( pos, 1.0 ); float radius = radiusFromMass( mass ); if ( mass == 0.0 ) { gl_PointSize = 0.0; } else { gl_PointSize = radius * cameraConstant / ( - mvPosition.z ); } gl_Position = projectionMatrix * mvPosition; } </script> <!-- Particles fragment shader --> <script type=”x-shader/x-fragment” id=”particleFragmentShader”> varying vec4 vColor; void main() { float f = length( gl_PointCoord - vec2( 0.5, 0.5 ) ); if ( f > 0.5 ) { discard; } gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } </script>

21

restology EXHIBITION

<script> if ( ! Detector.webgl ) Detector. addGetWebGLMessage(); var isIE = /Trident/i.test( navigator. userAgent ); var isEdge = /Edge/i.test( navigator. userAgent ); var hash = document.location.hash. substr( 1 ); if ( hash ) hash = parseInt( hash, 0 ); var WIDTH = hash || ( isIE || isEdge ) ?

4 : 64; var container, stats; var camera, scene, renderer, geometry, controls; var PARTICLES = WIDTH * WIDTH; document.getElementById( ‘protoplanets’ ).innerText = PARTICLES; function change( n ) { location.hash = n; location.reload(); return false; } var options = ‘’; for ( var i = 1; i < 8; i++ ) { var j = Math.pow( 2, i ); options += ‘<a href=”#” onclick=”return change(‘ + j + ‘)”>’ + ( j * j ) + ‘</a> ‘; } document.getElementById( ‘options’ ).innerHTML = options; if ( isEdge || isIE ) { document.getElementById( ‘warning’ ).innerText = ‘particle counts greater than 16 may not render with ‘ + ( isEdge ? ‘Edge’ : ‘IE11’ ); } var gpuCompute; var velocityVariable; var positionVariable; var positionUniforms; var velocityUniforms; var particleUniforms; var effectController; init(); animate(); function init() { container = document.createElement( ‘div’ ); document.body.appendChild( container ); camera = new THREE.

22

PerspectiveCamera( 75, window. innerWidth / window.innerHeight, 5, 15000 ); camera.position.y = 10; camera.position.z = 400; scene = new THREE.Scene(); renderer = new THREE. WebGLRenderer(); renderer.setPixelRatio( window. devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer. domElement ); controls = new THREE.OrbitControls( camera, renderer.domElement ); effectController = { gravityConstant: 0, density: 8, radius: 375, height: 40, exponent: 0.8, maxMass: 25, velocity: 12.3, velocityExponent: 0.2, randVelocity: 0 }; initComputeRenderer(); stats = new Stats(); window.addEventListener( ‘resize’, onWindowResize, false ); initProtoplanets(); dynamicValuesChanger(); } function initComputeRenderer() { gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer ); var dtPosition = gpuCompute. createTexture(); var dtVelocity = gpuCompute. createTexture(); fillTextures( dtPosition, dtVelocity ); velocityVariable = gpuCompute. addVariable( “textureVelocity”, document.getElementById( ‘computeShaderVelocity’ ).textContent, dtVelocity ); positionVariable = gpuCompute. addVariable( “texturePosition”, document.getElementById( ‘computeShaderPosition’ ).textContent, dtPosition ); gpuCompute.setVariableDependencies(

restology NAVIGATION CONTROLLERS

velocityVariable, [ positionVariable, velocityVariable ] ); gpuCompute.setVariableDependencies( positionVariable, [ positionVariable, velocityVariable ] ); positionUniforms = positionVariable. material.uniforms; velocityUniforms = velocityVariable. material.uniforms; velocityUniforms.gravityConstant = { value: 0.0 }; velocityUniforms.density = { value: 0.0 }; var error = gpuCompute.init(); if ( error !== null ) { console.error( error ); } } function fillTextures( texturePosition, textureVelocity ) { var posArray = texturePosition.image. data; var velArray = textureVelocity.image. data; var radius = effectController.radius; var height = effectController.height; var exponent = effectController. exponent; var maxMass = effectController. maxMass * 1024 / PARTICLES; var maxVel = effectController.velocity; var velExponent = effectController. velocityExponent; var randVel = effectController. randVelocity; for ( var k = 0, kl = posArray.length; k < kl; k += 4 ) { var x, y, z, rr; do { x = ( Math.random() * 2 - 1 ); z = ( Math.random() * 2 - 1 ); rr = x * x + z * z; } while ( rr > 1 ); rr = Math.sqrt( rr ); var rExp = radius * Math.pow( rr, exponent ); var vel = maxVel * Math.pow( rr, velExponent ); var vx = vel * z + ( Math.random() * 2 - 1 ) * randVel; var vy = ( Math.random() * 2 - 1 ) * randVel * 0.05; var vz = - vel * x + ( Math.random() * 2 - 1 ) * randVel;

x *= rExp; z *= rExp; y = ( Math.random() * 2 - 1 ) * height;

var mass = Math.random() * maxMass + 1; posArray[ k + 0 ] = x; posArray[ k + 1 ] = y; posArray[ k + 2 ] = z; posArray[ k + 3 ] = 1; velArray[ k + 0 ] = vx; velArray[ k + 1 ] = vy; velArray[ k + 2 ] = vz; velArray[ k + 3 ] = mass; } } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); particleUniforms.cameraConstant. value = getCameraConstant( camera ); } function getCameraConstant( camera ){ return window.innerHeight / ( Math. tan( THREE.Math.DEG2RAD * 0.5 * camera.fov ) / camera.zoom ); } function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { gpuCompute.compute(); particleUniforms.texturePosition. value = gpuCompute. getCurrentRenderTarget( positionVariable ).texture; particleUniforms.textureVelocity. value = gpuCompute. getCurrentRenderTarget( velocityVariable ).texture; renderer.render( scene, camera ); } </script> </body> </html>

23

BIBLIOGRAPHY

24

25

restology EXHIBITION

REFERENCES TEXT REFERENCES 01. Peng, Zhang. Pumping out pollutants. 2016. Web. 02. Armitage, Simon.

In Praise Of Air. University of Sheffield, 2014. Web. 03. Dyrcz, Hanna. “Social Media.” Network, 2016. Web. 04. Three.js.” threejs.org 2017. Web.

IMAGES 01. Peng, Zhang. Pumping out pollutants. 2016. Web. 02. Area plan 01. Cedim Lab. 2017. Web. 03. Area plan 02. Cedim Lab. 2017. Web. 04-07. Exhibition.

Cedim Lab. 2017., 2014. Web. 08. Social Media. Dyrcz, Hanna. Network, 2016.

Web. 09. Manufacturing process. Cedim Lab. 2017. Web. 10. Exhibition render.

Cedim Lab. 2017. Web.

26

restology TEXT AND IMAGES REFERENCES

27