ADSORPTION OF SUSPENDED PARTICLES THROUGH BIPLASTIC AND ACTIVATED CHARCOAL
EXHIBITION
ADSORPTION OF SUSPENDED PARTICLES THROUGH BIPLASTIC AND ACTIVATED CHARCOAL
restology
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 EXHIBITION
5 restology INTRODUCTION
01- Pumping out pollutants.
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 EXHIBITION
restology
FIRST STAGE: PROBLEM
04- Exhibition.
06- Exhibition.
05- Three translucent bioplastic partitions arranged one behind the other.
07- Bioplastic panel.
11
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 EXHIBITION
07- Social Media Data.
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 );
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
camera.position.y = 10; camera.position.z = 400; scene = new THREE.Scene(); renderer = new THREE. WebGLRenderer(); renderer. setPixelRatio( window. devicePixelRatio ); renderer.setSize(window.innerWidth, <script type=”text/javascript”> document.onkeydown = function(){ if(window.event && window.event.
keyCode == 65) {window.location.href = “UNO.html” }} </script>
13
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 EXHIBITION
19 restology NAVIGATION CONTROLLERS
10- Exhibition render.
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/
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 );
20
restology EXHIBITION
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;
restology NAVIGATION CONTROLLERS
} 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
<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.
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(
22 restology EXHIBITION
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 restology NAVIGATION CONTROLLERS
