Finale

Welcome to my favorite or best experiments! 4 weeks learning Three.js, Processing, Quartz Composer and Unity made me realize that my knowledge in programming and animating is still at below average level. But, I am looking forward to learn more about these software in the future!


Three.js : The Roundust

3jsplygrnd

It made out of this shape:
Object3_Gui

For me, this is my favorite Three.js experiment output because it is very amusing. Underestimating the motion, I realized that the animation and the trails left by the knot geometry really shown an unique texture and mesh. Here is the code.

<!DOCTYPE html><html>
<head>
<meta charset=”utf-8″>
<style>
body {
background-color: #121f22;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>http://threejsplaygnd.brangerbriz.net/js/three.min.js
http://threejsplaygnd.brangerbriz.net/js/Detector.jsif ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, scene, renderer;
var geometry, material, mesh;

function setup() {

var W = window.innerWidth, H = window.innerHeight;
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.autoClearColor = false;
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
camera.position.z = 500;

scene = new THREE.Scene();

// paste your code from the geometryGUI here

geometry = new THREE.TorusKnotGeometry(50.61, 7.47, 35, 49, 6.46, 4.49, 7.68);
material = new THREE.MeshNormalMaterial({shading: THREE.SmoothShading});
mesh = new THREE.Mesh(geometry, material);
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.94;
scene.add( mesh );
}

function draw() {

requestAnimationFrame( draw );

mesh.rotation.x = Date.now() * 0.0005;
mesh.rotation.y = Date.now() * 0.0002;
mesh.rotation.z = Date.now() * 0.001;

renderer.render( scene, camera );

}

setup();
draw();

</body>
</html>

Click the image:

Roundust

 


Processing : The Chaoscene

processing

Chaoscene started with the random lines created from right stage and ended at bottom stage. Then, ellipses are created randomly within certain area. I made it that way to separated these two shape so that it is easier to see their animation. I added a black rectangle and rectangle rings using beginShape() and vertex function.

void setup(){

//Runs once
size(640,500);
background(0);

}

void draw(){
//Runs repeatedly

float y = random(-100,100);
stroke(random(0,20),random(0,200),random(0,100));
strokeWeight(random(0,10));
line(random(width+100),random(0,height),random(width),random(width+100));

fill(250);
strokeWeight(random(0,100));
ellipse(random(320+y),random(250+y), 100,100);

noStroke();
fill(0,0,0);
rect(320-50,250-50, 100,100);

beginShape();
vertex(100,140);
vertex(140,140);
vertex(140,360);
vertex(500,360);
vertex(500,400);
vertex(100,400);
endShape();

beginShape();
vertex(500,400);
vertex(540,400);
vertex(540,100);
vertex(100,100);
vertex(100,140);
vertex(500,140);
endShape();
}

Here is the output:

 


Quartz Composer : The Cubass

quartz

This is my 1st experiment on Quartz Composer. I did some animation that react with sound in the background; where the audio become thicker when the sound get louder. And it is kinda cool that you can change the attribute of the shape using many type of input like sound, mouse and keyboard.

Within Replicate In Space:

 


Unity : The Twoflies

unity

Twoflies is quite unique. From the sample given, I changed the shape and the color of the trail. The trail renderer play a big roll in this animation as it leave a long trail on their path and it’s quite amusing to see the pattern that they formed.

This slideshow requires JavaScript.


End of Exhibition.

You are free to check out my other experiment if you want to.
Cheers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s