<html>
<head>
<title>DYPP dots curve by @p01</title>
<style>
body
{
color: #fff;
background-color: #036;
}
input, canvas {
display: block;
width: 640px;
border: 0;
color: #fff;
background-color: transparent;
}
</style>
<head>
<body>
<input type="text" id="meter"></input>
<canvas id="c" width="640" height="400"></canvas>
<script>
onload = function() {
//
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// color overlay
ctx.fillStyle='#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for(var i=64;i--;)
{
ctx.fillStyle='hsla('+(Math.random()*360)+',50%,60%,.1)';
ctx.fillRect(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*canvas.width, Math.random()*canvas.height);
}
// lfb
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var imageDataLfb = imageData.data;
var framesLeft = 500;
// dots
var count = 50000 * 10 * 6;
var sinBits = 17;
var sinLength = 1 << sinBits;
var sinLengthMask = sinLength-1;
var index = 0;
var ys = new Uint32Array(count);
var xs = new Uint32Array(sinLength);
// ys
var piRatioish = Math.PI*2/count*7
for(var i = 0; i<count;i++) {
var j = i * piRatioish;
ys[i] = 640*4*Math.round(200+109*Math.cos(j*1.542-Math.cos(j*1.9337+1.2*Math.cos(j*2.7197)))+50*Math.sin(j*3.489*Math.cos(j*1.337)))+
4*Math.round(60+60*Math.cos(j*1.7+Math.cos(j*3.1)));
}
// xs
var piRatio = Math.PI*2/sinLength
for(var i = 0; i<sinLength;i++)
xs[i] = 3+4*Math.round(240+239*Math.sin(i*piRatio-Math.cos(i*piRatio*2)*1.1*Math.sin((i*piRatio))))+640*4*Math.round(20+20*Math.cos(i*piRatio*3));
// title
var title = (count+' DYPP dots curve').replace(/000/g,'K').replace(/KKK/g,'B').replace(/KK/g,'M');
document.title = title;
// render
var before = Date.now();
function render(timestamp)
{
index += (0 | sinLength * 0.0012499) || 1;
index &= sinLengthMask;
// clear
for(var i = imageDataLfb.length >> 2, j = 3; i--; j+=4) {
imageDataLfb[ j ] = 0;
}
//
var indexFoo = index;
for(var i = count; i--; ) {
imageDataLfb[ys[i] + xs[indexFoo]] += 15;
indexFoo += 11;
indexFoo &= sinLengthMask;
}
// blit
ctx.putImageData(imageData,0,0);
meter.value = title + ' at ' + Math.round(1000/(timestamp-before)) + 'fps';
before = timestamp;
if(framesLeft--) {
nextFrame(render,16)
}
}
var nextFrame = window.requestAnimationFrame || window.setTimeout;
nextFrame(render);
}
</script>
</body>
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. |