3D Starfield

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

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