Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<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

Dismiss x
public
Bin info
anonymouspro
0viewers