Simple HTML5 snowflakes in canvas

Today, I thought about HTML5 and the canvas element again. Escape is a bit “on ice” at the moment, because some other ideas bothered me too much and so I decided to test other things. A few months ago, I already did some image manipulation and screen scrolling with a canvas, but now I wanted to know about pixel manipulation and what would be better for that, than a snowflake simulation. Okay, it’s not really a simulation, but a nice example for pixel manipulation in a canvas element.

I suppose you already know about HTML5 and Javascript coding, otherwise you should ask Google first, because I will not give any introduction into these topics here.

Okay, let’s see the result first, then the code.

(if you can’t see the image above, try reload the page)

Now the code:

< !DOCTYPE html> 
<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Canvas test</title>
  <style>
    #main {
      display: none;
      background: url('http://www3.pic-upload.de/03.06.10/8creyvf5xzcw.jpg') #000;
    }
  </style>
 
  <script>
    /** 
     * The snowflake class
     * This class contains all flakes and does all the
     * drawing and moving of the flakes.     
     */
    function Snowflakes(context, count) {      
 
      // Initialize the image data
      var w = h = 2;
      if( context.createImageData ) {
        this.imgd = context.createImageData(w, h);
      } else if( context.getImageData ) {
        this.imgd = context.getImageData(0, 0, w, h);
      } else {
        this.imgd = {'width' : w, 'height' : h, 'data' : new Array(w*h*4)};
      }
 
      // Create pixel data
      var pix = this.imgd.data;      
      for( var i=0, n = pix.length; i < n; i+=4) {      
        pix[i] = 255;
        pix[i+1] = 255;
        pix[i+2] = 255;
        pix[i+3] = 127;
      }
 
      // Create flake objects
      this.flakes = new Array(count);
      for( var i=0; i<count; i++ ) {
        var x = Math.floor(Math.random()*641);
        var y = Math.floor(Math.random()*481);
        var sp = 0.1+(Math.random()*10);
        this.flakes[i] = {'x' : x, 'y' : y, 'speed' : sp};
      }
 
      // Move the flakes
      this.Move = function() {
        for( var i=0; i<this.flakes.length; i++) {
          this.flakes[i].y += this.flakes[i].speed;
          if( this.flakes[i].y >= 480 ) {
            this.flakes[i].y = 0;
            this.flakes[i].x = Math.floor(Math.random()*641);
          }
        }
      }
 
      // Draw function
      this.Draw = function() {
        for( var i=0; i<this .flakes.length; i++) {
          context.putImageData(this.imgd, this.flakes[i].x, this.flakes[i].y);
        }
      }
    };
  </script>  
</this></script></head><body>
  <canvas id="main" width="640" height="480"></canvas>
  <script>
    var canvas = document.getElementById('main');
    canvas.style.display = 'block';
    var context = canvas.getContext('2d');       
    var sf = new Snowflakes(context, 200);
    function Run() {    
      context.clearRect(0,0, canvas.width, canvas.height);      
      sf.Move();
      sf.Draw();
    }
    setInterval(Run, 60);
  </script>
  <noscript>You need javascript enabled to view this example!</noscript>
</body></html>

This little piece of code should be self explanatory, if not you should spend more some time reading it. 😉

Image taken from: http://www.gipfeltreffen.at/printthread.php?t=46936

Similar Posts: