<html>
<head>
<script src="http://threejs.org/build/three.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html>
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.setSize(width,height);
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, -10, 10 );
var particles = [];
var particle = function(position)
{
this.A = 0;
this.p = 0;
this.radius = 10;
this.velocity = new THREE.Vector3();
this.mesh = new THREE.Mesh(new THREE.CircleGeometry(this.radius, 32), new THREE.MeshBasicMaterial({color: 0x0000ff}));
if(position)
this.mesh.position.set(position.x,position.y,0);
scene.add(this.mesh);
particles.push(this);
};
var step = function()
{
var restitution = 0.5;
for(var i=0; i<particles.length; i++)
{
var lowerLimit = -height/2;
var upperLimit = height/2;
var leftLimit = -width/2;
var rightLimit = width/2;
var pi = particles[i];
if(pi.mesh.position.y < lowerLimit)
{
pi.velocity.y = -pi.velocity.y*restitution;
pi.mesh.position.y = lowerLimit;
}
if(pi.mesh.position.y > upperLimit)
{
pi.velocity.y = -pi.velocity.y*restitution;
pi.mesh.position.y = upperLimit;
}
if(pi.mesh.position.x < leftLimit)
{
pi.velocity.x = -pi.velocity.x*restitution;
pi.mesh.position.x = leftLimit;
}
if(pi.mesh.position.x > rightLimit)
{
pi.velocity.x = -pi.velocity.x*restitution;
pi.mesh.position.x = rightLimit;
}
}
for(var i=0; i<particles.length; i++)
{
var pi = particles[i];
for(var j=0; j<i+1; j++)
{
var pj = particles[j];
var pimpj = pi.mesh.position.clone().sub(pj.mesh.position);
var pjmpi = pj.mesh.position.clone().sub(pi.mesh.position);
if(pimpj.length() < 20 && pimpj.length() != 0)
{
pi.velocity = pi.velocity.reflect(pjmpi.clone().normalize()).multiplyScalar(restitution);
pj.velocity = pj.velocity.reflect(pimpj.clone().normalize()).multiplyScalar(restitution);
var pip = pi.velocity.clone().normalize().multiplyScalar(20-pimpj.length());
var pjp = pj.velocity.clone().normalize().multiplyScalar(20-pimpj.length());
pi.mesh.position.add(pip);
pj.mesh.position.add(pjp);
}
}
}
for(var i=0; i<particles.length; i++)
{
var pi = particles[i];
pi.velocity.add(new THREE.Vector3(0,-0.001,0));
pi.mesh.position.add(pi.velocity);
}
};
var render = function()
{
renderer.render(scene,camera);
};
var spawnParticles = function()
{
var rows = 10, columns = 10, space = 50;
var offsetX = -width/2+500;
var offsetY = -height/2+100;
for(var i=0; i<rows; i++)
{
for(var j=0; j<columns; j++)
{
var p = new particle(new THREE.Vector3(i*space+offsetX,j*space+offsetY,0));
p.velocity.set(Math.random()-0.5*2,Math.random()-0.5*2,0);
}
}
};
spawnParticles();
var loop = setInterval(function() {
render();
step();
},10);
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. |