ifiokjr/index.html

## index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Starfield</title>
    </head>

    <body>
       <canvas id="star_field" width="1024" height="768" style="background-color: #060713"></canvas>
    </body>

        <script src="main.js"  type="text/javascript"></script>
         <script type="text/javascript">
         //create star field
 //canvas
 //number of stars
 //colours - for real star colours see http://www.vendian.org/mncharity/dir3/starcolor/
 //twinkle rate
 var sf = new StarField(document.getElementById("star_field"), 500, ["#f8f7ff", "#9bb0ff", "#ffcc6f", "#cad7ff"], 50);
    </script>

</html>


## main.js
 /**
  *
  * @param {type} x position
  * @param {type} y position
  * @param {type} r radius
  * @param {type} b brightness
  * @param {type} c colour
  */
 Star = function(x, y, r, b, c) {
   //
   this.x = x;
   this.y = y;
   this.radius = r;
   this.brightness = b;
   this.fillStyle = c;
   //
   this.arcRad = Math.PI * 2;
 };

 /**
  *
  * @param {type} canvas
  * @param {type} numStars
  * @param {type} colours
  * @param {type} twinkleSpeed
  */
 Star.prototype.draw = function(context) {
   //draw the star
   context.beginPath();
   context.globalAlpha = this.brightness;
   context.fillStyle = this.fillStyle;
   context.arc(this.x, this.y, this.radius, 0, this.arcRad, true);
   context.fill();
   context.closePath();
 };

 /**
  *
  * @param {type} canvas
  * @param {type} numStars
  * @param {type} colours
  * @param {type} twinkleSpeed
  */
 StarField = function(canvas, numStars, colours, twinkleSpeed) {
   this.context = canvas.getContext('2d'),
     this.w = canvas.width,
     this.h = canvas.height,
     this.numStars = numStars,
     this.stars = [],
     this.colours = colours,
     this.numColours = colours.length,
     this.count = 0,
     this.alter = twinkleSpeed;
   //
   this.create();
   this.draw();
 };

 /**
  *
  */
 StarField.prototype.create = function() {

   this.context.save();
   //
   for (var i = 0; i < this.numStars; i++) {
     //
     var x = Math.random() * this.w | 0,
       y = Math.random() * this.h | 0,
       r = Math.round((Math.random()) * 100) * 0.01,
       b = this.randomBetween(80, 100) * 0.01,
       c = this.colours[this.randomBetween(0, this.numColours)];
     //
     var s = new Star(x, y, r, b, c);
     this.stars.push(s);
     s.draw(this.context);
   }

   this.context.restore();
 };

 /**
  * Generate a random integer between min and max
  * @param {type} min
  * @param {type} max
  * @returns {Number}
  */
 StarField.prototype.randomBetween = function(min, max) {
     return Math.round((Math.random() * max - min) + min);
   }
   /**
    *
    * @param {type} array
    * @returns shuffled array
    */
 StarField.prototype.shuffle = function(array) {
   var counter = array.length,
     temp, index;

   // While there are elements in the array
   while (counter > 0) {
     // Pick a random index
     index = Math.floor(Math.random() * counter);

     // Decrease counter by 1
     counter--;

     // And swap the last element with it
     temp = array[counter];
     array[counter] = array[index];
     array[index] = temp;
   }

   return array;
 }

 /**
  * raf draw
  */
 StarField.prototype.draw = function() {
   this.alterBrightness();
   this.context.clearRect(0, 0, this.w, this.h);
   //
   for (var i = 0; i < this.numStars; i++) {
     var s = this.stars[i];
     s.draw(this.context);
   }
   //
   window.requestAnimationFrame(this.draw.bind(this));
 };

 /**
  * alter the brighness of selected stars
  */
 StarField.prototype.alterBrightness = function() {
   for (var i = this.count; i < this.alter; i++) {
     var s = this.stars[i];
     s.brightness = this.randomBetween(80, 100) * 0.01;
   }
   //
   this.count += this.alter;
   if (this.count >= this.numStars) {
     this.count = 0;
     this.shuffle(this.stars);
   }
 };
	<!DOCTYPE html>
	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Starfield</title>
	</head>

	<body>
	<canvas id="star_field" width="1024" height="768" style="background-color: #060713"></canvas>
	</body>

	<script src="main.js" type="text/javascript"></script>
	<script type="text/javascript">
	//create star field
	//canvas
	//number of stars
	//colours - for real star colours see http://www.vendian.org/mncharity/dir3/starcolor/
	//twinkle rate
	var sf = new StarField(document.getElementById("star_field"), 500, ["#f8f7ff", "#9bb0ff", "#ffcc6f", "#cad7ff"], 50);
	</script>

	</html>
	/**
	*
	* @param {type} x position
	* @param {type} y position
	* @param {type} r radius
	* @param {type} b brightness
	* @param {type} c colour
	*/
	Star = function(x, y, r, b, c) {
	//
	this.x = x;
	this.y = y;
	this.radius = r;
	this.brightness = b;
	this.fillStyle = c;
	//
	this.arcRad = Math.PI * 2;
	};

	/**
	*
	* @param {type} canvas
	* @param {type} numStars
	* @param {type} colours
	* @param {type} twinkleSpeed
	*/
	Star.prototype.draw = function(context) {
	//draw the star
	context.beginPath();
	context.globalAlpha = this.brightness;
	context.fillStyle = this.fillStyle;
	context.arc(this.x, this.y, this.radius, 0, this.arcRad, true);
	context.fill();
	context.closePath();
	};

	/**
	*
	* @param {type} canvas
	* @param {type} numStars
	* @param {type} colours
	* @param {type} twinkleSpeed
	*/
	StarField = function(canvas, numStars, colours, twinkleSpeed) {
	this.context = canvas.getContext('2d'),
	this.w = canvas.width,
	this.h = canvas.height,
	this.numStars = numStars,
	this.stars = [],
	this.colours = colours,
	this.numColours = colours.length,
	this.count = 0,
	this.alter = twinkleSpeed;
	//
	this.create();
	this.draw();
	};

	/**
	*
	*/
	StarField.prototype.create = function() {

	this.context.save();
	//
	for (var i = 0; i < this.numStars; i++) {
	//
	var x = Math.random() * this.w \| 0,
	y = Math.random() * this.h \| 0,
	r = Math.round((Math.random()) * 100) * 0.01,
	b = this.randomBetween(80, 100) * 0.01,
	c = this.colours[this.randomBetween(0, this.numColours)];
	//
	var s = new Star(x, y, r, b, c);
	this.stars.push(s);
	s.draw(this.context);
	}

	this.context.restore();
	};

	/**
	* Generate a random integer between min and max
	* @param {type} min
	* @param {type} max
	* @returns {Number}
	*/
	StarField.prototype.randomBetween = function(min, max) {
	return Math.round((Math.random() * max - min) + min);
	}
	/**
	*
	* @param {type} array
	* @returns shuffled array
	*/
	StarField.prototype.shuffle = function(array) {
	var counter = array.length,
	temp, index;

	// While there are elements in the array
	while (counter > 0) {
	// Pick a random index
	index = Math.floor(Math.random() * counter);

	// Decrease counter by 1
	counter--;

	// And swap the last element with it
	temp = array[counter];
	array[counter] = array[index];
	array[index] = temp;
	}

	return array;
	}

	/**
	* raf draw
	*/
	StarField.prototype.draw = function() {
	this.alterBrightness();
	this.context.clearRect(0, 0, this.w, this.h);
	//
	for (var i = 0; i < this.numStars; i++) {
	var s = this.stars[i];
	s.draw(this.context);
	}
	//
	window.requestAnimationFrame(this.draw.bind(this));
	};

	/**
	* alter the brighness of selected stars
	*/
	StarField.prototype.alterBrightness = function() {
	for (var i = this.count; i < this.alter; i++) {
	var s = this.stars[i];
	s.brightness = this.randomBetween(80, 100) * 0.01;
	}
	//
	this.count += this.alter;
	if (this.count >= this.numStars) {
	this.count = 0;
	this.shuffle(this.stars);
	}
	};