3D Starfield

3D Starfield made with HTML5 canvas object and javascript. Everything is calculated in real time.

Javascript file: fx_stars.js

function Stars3D(out_ctx, width, height, num_stars, star_width, max_depth) {
    
    this.sw = star_width;
    this.width = width;
    this.height = height;
    this.num_stars = num_stars;
    this.stars = new Array(num_stars);
    this.out_ctx = out_ctx;
    this.dif = 128.0;
    this.cx = this.width >> 1;
    this.cy = this.height >> 1;
    this.MAX_DEPTH = max_depth;
    
    this.init = function() {
         
         for ( var i = 0; i < this.stars.length; i++ ) {
              
              this.stars[i] = new this.starData();
              
              this.stars[i].x = this.randomRange(-25, 25);
              this.stars[i].y = this.randomRange(-25, 25);
              this.stars[i].z = this.randomRange(1, this.MAX_DEPTH),
              this.stars[i].type = Math.floor(Math.random() * 5);
              this.stars[i].speed = Math.floor(Math.random() * 5);
         }
    }
    
    this.starData = function() {
         this.x = 0;
         this.y = 0;
         this.z = 0;
         this.color = '#fff';
         this.type = 1;
         this.speed = 1;
         this.stars;
    }
    
    this.updateStar = function(i) {
         this.stars[i].x = this.randomRange(-25, 25);
         this.stars[i].y = this.randomRange(-25, 25);
         this.stars[i].z = this.randomRange(1, this.MAX_DEPTH),
         this.stars[i].type = Math.floor(Math.random() * 5);
         this.stars[i].speed = Math.floor(Math.random() * 5);
    }
    
    this.randomRange = function(minVal, maxVal) {
         return Math.floor(Math.random() * (maxVal - minVal - 1)) + minVal;
    }
    
    this.draw = function() {
         
         for (i = 0; i < this.stars.length; i++) {
              
              switch(this.stars[i].type) {
                   case 0:
                        var color = '#fff';
                   break;
                   
                   case 1:
                        var color = '#aaa';
                   break;
                   
                   case 2:
                        var color = '#999';
                   break;
                   
                   case 3:
                        var color = '#777';
                   break;
                   
                   case 4:
                        var color = '#555';
                   break;
                   
                   case 5:
                        var color = '#444';
                   break;
              }
              
              this.stars[i].z -= 0.4;
              if (this.stars[i].z <= 0) {
                   this.updateStar(i);
              }
              
              var k  = this.dif / this.stars[i].z;
              var px = this.stars[i].x * k + this.cx;
              var py = this.stars[i].y * k + this.cy;
              
              if ( px >= 0 && px <= this.width && py >= 0 && py <= this.height ) {
                   this.out_ctx.fillStyle = color;
                   this.out_ctx.fillRect(px, py, this.sw, this.sw);
              }
         }
    }
    
    // Initialize object
    this.init();
}

fp.TAGS