<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
(function () {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 517;
canvas.height = 291;
var points = [];
function Point(gx, gy, x, y) {
this.x = x;
this.y = y;
this.gx = gx;
this.gy = gy+1;
this.t = 0;
this.latT = 0;
this.longAmp = ((this.gy*.2) * 2);
this.latAmp = (this.gy*this.gy)*3 * .01;
this.update = function () {
this.t += 0.15;
this.x -= Math.cos(this.t) * this.latAmp;
this.y += Math.sin(this.t) * this.longAmp;
}
}
for (var x = 0; x < 30; x++) {
points[x] = [];
for (var y = 0; y < 15; y++) {
points[x][y] = new Point(x * .5, y*(y*.05), 30 + (30 - x) * 15, 50 + (15 - y) * 15);
// lol ok this is really a hack.. its so bad but getting too close to the deadline!
for (var i = 0; i < x % 30; i++) {
points[x][y].update();
points[x][y].update();
}
}
}
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var x = 0; x < 30; x++) {
for (var y = 0; y < 15; y++) {
if (x == 15 && (y == 14 || y == 9)) {
ctx.fillStyle = "blue";
} else {
ctx.fillStyle = "black";
}
var point = points[x][y];
point.update();
ctx.beginPath();
ctx.arc(point.x, point.y, 4, 0, Math.PI * 2);
ctx.fill();
}
}
requestAnimationFrame(render);
}
render();
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. |