HTML5 canvas plasma demo

  1. <title>Canvas Plasma</title>
  2.  
  3. <script type="text/javascript">
  4. var ctx;
  5. var tid = null;
  6.  
  7. function body_Load() {
  8.     var canvas = document.getElementById('plasma');
  9.     if (canvas.getContext) {
  10.         ctx = canvas.getContext('2d');
  11.        
  12.         traceDiv = document.getElementById('trace');
  13.     }
  14.     else {
  15.         alert("Couldn't get the canvas, sorry :(");
  16.     }
  17. }
  18.  
  19. function startButton_Click() {
  20.     if (tid != null)
  21.         clearInterval(tid);
  22.    
  23.     tid = setInterval("drawFrame()", 50);
  24. }
  25.  
  26. function stepButton_Click() {
  27.     drawFrame();
  28. }
  29.  
  30. function stopButton_Click() {
  31.     clearInterval(tid);
  32. }
  33.  
  34. function dist(a, b, c, d) {
  35.     return Math.sqrt((a - c) * (a - c) + (b - d) * (b - d));
  36. }
  37.  
  38. var frameNumber = 0;
  39. function drawFrame(single) {
  40.     var f = 0;
  41.    
  42.     var r = 0;
  43.     var g = 0;
  44.     var b = 0;
  45.    
  46.     for (var x = 0; x < 320; x++) {
  47.        for (var y = 0; y < 240; y++) {
  48.            f = Math.cos(dist(x + frameNumber, y, 128.0, 128.0) / 8.0)
  49.                + Math.sin(dist(x, y, 64.0, 64.0) / 8.0)
  50.                + Math.sin(dist(x, y + frameNumber / 7, 192.0, 64) / 7.0)
  51.                + Math.cos(dist(x, y, 192.0, 100.0) / 8.0);
  52.            f = Math.round(f * 65536);
  53.  
  54.            r = (f & 16711680) / 65536;
  55.            g = (f & 65280) / 256;
  56.            b = (f & 255);
  57.            
  58.            ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
  59.            ctx.fillRect(x,y,1,1);
  60.        }
  61.    }
  62.    
  63.    frameNumber++;
  64. }
  65.  
  66. <style type="text/css">canvas{border:1px solid black;}</style>
  67. </head>
  68.  
  69. <body onload="body_Load();">
  70. <div id="canvas">
  71.     <canvas id="plasma" width="320" height="240"></canvas>
  72.     <div id="controls">
  73.         <input type="button" name="start" id="startButton" value="Start" onclick="startButton_Click()"/>
  74.         <input type="button" name="step" id="stepButton" value="Step" onclick="stepButton_Click()"/>
  75.         <input type="button" name="stop" id="stopButton" value="Stop" onclick="stopButton_Click()"/>
  76.     </div>
  77. </div>
  78. </body>
  79. </html>
AttachmentSize
plasma.canvas.html2.05 KB