<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<title>CreativeJS graphics playground</title>
<style>
canvas { border : 1px lightgray solid; }
body { margin :0; }
</style>
</head>
<body>
<script src="http://code.seb.ly/js/creativejs.js"></script>
</body>
</html>
document.addEventListener("mousemove", onMouseMove);
var container, mouseX = 0, mouseY = 0;
var camera, scene, renderer;
var tree;
var material;
var Branch3D = function(len, angleZ, angleY, first) {
this.len = len;
this.angleZ = angleZ;
this.angleY = angleY;
this.counter = 0;
this.material = new THREE.MeshBasicMaterial( { color: 0x000000} );
var geom = this.geom = new THREE.CubeGeometry(1, first?0:len, 1,1,1,1);
THREE.Mesh.call( this, this.geom, this.material );
var verts = geom.vertices;
for(var i=0; i<verts.length; i++) {
var vert = verts[i];
vert.y+=this.len/2;
}
this.rotation.z = angleZ;
this.rotation.y = angleY;
}
Branch3D.prototype = new THREE.Mesh();
Branch3D.prototype.constructor = Branch3D;
Branch3D.prototype.init = function(first) {
if(this.len>40) {
var rot = Math.PI/6;
var child = new Branch3D(this.len*0.8,0,0 );
if(!first)child.position.y+=this.len;
this.add(child);
child.init();
child = new Branch3D(this.len*0.8,0, Math.PI*2/3);
if(!first)child.position.y+=this.len;
this.add(child);
child.init();
child = new Branch3D(this.len*0.8,0, Math.PI*4/3);
if(!first)child.position.y+=this.len;
this.add(child);
child.init();
}
};
Branch3D.prototype.updateRotation = function() {
this.counter+=0.01;
this.rotation.z = this.angleZ + this.counter;
for(var i = 0; i<this.children.length; i++) {
this.children[i].updateRotation();
}
}
function randomRange(min, max) {
return (Math.random() * (max-min)) + min;
}
setInterval(loop, 1000/60);
init();
//loop();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.add(camera);
tree = new Branch3D(100,0,0, true);
tree.init(true);
tree.position.y = -200;
scene.add( tree );
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
//
function loop() {
tree.updateRotation();
camera.position.x += ((mouseX-camera.position.x)*0.2);
camera.position.y += ((-mouseY-camera.position.y)*0.2);
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function onMouseMove(e) {
mouseX = e.clientX - (window.innerWidth/2);
mouseY = e.clientY - (window.innerHeight/2);
}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |