Project Two WIP

Concept

My concept for this project is inspired by the moment I found out that my raffle tickets weren’t drawn for the Air Mag. I later found out that a pair of the air mags were sold for more than $100,000 in Hong Kong, which kept me thinking how “hype” is really a big part of our economy and pushing our minds into doing ridiculous actions. For this project I am going to create a website that will turn each sneaker the user searches for into a disease spreading map, based on how many tweets, the more hype the sneaker is the more chaotic the map will be.

Inspiration

2016 self-lacing Nike Air Mag

nike-air-mag-power-lacing-2016

screen-shot-2016-10-24-at-1-21-35-pm

Process

Setting up AWS Ubuntu server

screen-shot-2016-10-23-at-7-12-12-pm

 

Twitter.getSearch() request test. Print out in object format on screen via the express module

screen-shot-2016-10-24-at-1-42-14-am

The Twitter JSON data often excess 100MB, which is a big file difficult to handle without a database, I have been writing a server side python script that will divide the JSON file into few smaller files and feed them to the client side upon request.

Visualization Process

Visualizing the sneaker drop origin (eg Nike office account) as a bacteria.

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas{
width:100%;
height: 100%;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/ImprovedNoise.js"></script>
<script>
var mesh,material,
noise = new ImprovedNoise(),
viewAngle = 75,
aspectRatio = window.innerWidth/window.innerHeight,
near = 0.1,
far =5000,
camera = new THREE.PerspectiveCamera(viewAngle, aspectRatio, near, far),
scene = new THREE.Scene(),
renderer = new THREE.WebGLRenderer();
//window.addEventListener('load',init);
function updateBlob(geometry){
var time = 0.001 *Date.now();
var vertex , distance;
for(var j =0; j < geometry.vertices.length; j++){
vertex = geometry.vertices[j];
distance = 30 + 3*noise.noise(
0.1*vertex.x + 1.3 *time,
0.1 *vertex.y +0.9 *time,
0.1*vertex.z+10.1*time
);
vertex.normalize().multiplyScalar(distance);
}
geometry.computeVertexNormals();
geometry.computeFaceNormals();
geometry.verticesNeedUpdate = true;
geometry.normalsNeedUpdate = true;
}
function init(){
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize',onWindowResize,false);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
material = new THREE.MeshNormalMaterial({
shading: THREE.FlatShading,
//map: new THREE.TextureLoader().load("./asset/00028.png")
wireframe: true
});
var geometry = new THREE.CubeGeometry(10,10,10,30,30,30);
mesh = new THREE.Mesh(geometry, material);
camera.position.z = 100;
scene.add(mesh);
scene.add(camera);
animatedRender();
}
function animatedRender(){
requestAnimationFrame(animatedRender);
updateBlob(mesh.geometry);
//mesh.rotation.y += 0.02;
renderer.render(scene,camera);
}
function onDocumentMouseMove(event){
//mouseX = (event.clientX – window.innerWidth/2);
mouseX = mesh.rotation.y += 0.009;
//console.log(mouseX);
}
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
init();
//render();
</script>
</body>
</html>

view raw
index.html
hosted with ❤ by GitHub

Visualizing hypebeasts being affected by the sneaker hype bacteria.

code

var container;
var camera, scene, renderer, particle;
var mouseX = 0, mouseY = 0;
var speed = 100000;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 1000;
scene = new THREE.Scene();
var material = new THREE.SpriteMaterial( {
map: new THREE.CanvasTexture( generateSprite() ),
blending: THREE.AdditiveBlending
} );
for ( var i = 0; i < 1000; i++ ) {
particle = new THREE.Sprite( material );
initParticle( particle, i * 20 );
scene.add( particle );
}
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0x000000 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//container.appendChild( div );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function generateSprite() {
var canvas = document.createElement( 'canvas' );
canvas.width = 16;
canvas.height = 16;
var context = canvas.getContext( '2d' );
//sphere gradient
var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
gradient.addColorStop( 0, 'rgba(255,255,0,1)' );
gradient.addColorStop( 0.2, 'rgba(255,0,0,1)' );
gradient.addColorStop( 0.4, 'rgba(64,0,0,1)' );
gradient.addColorStop( 0.8, 'rgba(0,0,0,1)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
return canvas;
}
function initParticle( particle, delay ) {
var particle = this instanceof THREE.Sprite ? this : particle;
var delay = delay !== undefined ? delay : 0;
//console.log(delay); //debug
particle.position.set( 0, 0, 0 );
particle.scale.x = particle.scale.y = Math.random() * 32 + 16;
new TWEEN.Tween( particle )
.delay( delay )
.to( {}, speed/2.5 )
.onComplete( initParticle )
.start();
new TWEEN.Tween( particle.position )
.delay( delay )
.to( { x: Math.random() * 4000 2000, y: Math.random() * 1000 500, z: Math.random() * 4000 2000 }, speed ) //speed
.start();
new TWEEN.Tween( particle.scale )
.delay( delay )
.to( { x: 0.01, y: 0.01 }, speed*20 ) //speed
.start();
}
//
function onDocumentMouseMove( event ) {
mouseX = event.clientX windowHalfX;
mouseY = event.clientY windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX windowHalfX;
mouseY = event.touches[ 0 ].pageY windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX windowHalfX;
mouseY = event.touches[ 0 ].pageY windowHalfY;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
TWEEN.update();
camera.position.x += ( mouseX camera.position.x ) * 0.05;
camera.position.y += ( mouseY camera.position.y ) * 0.05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}

view raw
script.js
hosted with ❤ by GitHub

Leave a reply

Skip to toolbar