Advertisement
here2share

$ JS_color_noise.html

Nov 19th, 2022 (edited)
887
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <body>
  3. <canvas id='c'></canvas>
  4.  
  5. <script>
  6. var canvas = document.getElementById('c');
  7. var ctx = canvas.getContext('2d');
  8.  
  9. var w = canvas.width = 1260;
  10. var h = canvas.height = 580;
  11. var t1 = new Date().getTime();
  12. var frame_count = 0;
  13. ctx.font = 'normal 400 24px/2 Unknown Font, sans-serif';
  14. var img = ctx.createImageData(w, h);
  15.  
  16. var index_init = 0;
  17. for (var x = 0; x < w; x++) {
  18.     for (var y = 0; y < h; y++) {
  19.         img.data[index_init + 3] = 255; // alpha
  20.         index_init += 4;
  21.     }
  22. }
  23.  
  24. function animate() {
  25.     var index = 0;
  26.     for (var x = 0; x < w; x++) {
  27.         for (var y = 0; y < h; y++) {
  28.             img.data[index    ] = Math.floor(Math.random()*255);
  29.             img.data[index + 1] = Math.floor(Math.random()*255);
  30.             img.data[index + 2] = Math.floor(Math.random()*255);
  31.             // alpha channel is constant
  32.             index += 4;
  33.         }
  34.     }
  35.  
  36.     ctx.putImageData(img, 0, 0);
  37.  
  38.     frame_count++;
  39.     if (frame_count % 50 == 0) {
  40.         var fps = frame_count / (new Date().getTime() - t1) * 1000;
  41.         window.status = fps.toFixed(2) + " fps";
  42.     }
  43.  
  44.     setTimeout(animate, 0);
  45. }
  46.  
  47. animate();
  48. </script>
  49. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement