-
-
Save ifiokjr/c32cc50cb1c774b7899389f376ed1dcf to your computer and use it in GitHub Desktop.
Twinkling star field using canvas/js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * | |
| * @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); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment