Home › Code Snippets

HTML5 canvas plasma demo

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

I was going through some old QuickBasic stuff, and decided to see if modern browsers could render a old-school plasma demo in JavaScript, as quickly as QB ones could be run in DOS. Using this code, I found out that no, those old QB plasma demos are still faster. (To be fair, though, they used VGA mode 13, which meant 256 paletted colours; this is 24-bit colour here.)

AttachmentSize
plasma.canvas.html2.05 KB
  • Bookmark and Share