Skip to content

Instantly share code, notes, and snippets.

@Xanmia

Xanmia/index.html

Created July 25, 2013 13:35
Show Gist options
  • Save Xanmia/6079695 to your computer and use it in GitHub Desktop.
Save Xanmia/6079695 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Xanmia. 2d Easy Star Field - Animated rotating star field using the canvas element only. Random locations, opacity and speed of stars. As well as a shooting star from time to time.
Raw
index.html
<canvas id="field"></canvas>
Raw
script.js
var totalObjects = 1500;
var maxVelocity = 2;
var starSize = 1;
var twinkleFreq = 50000;
var shootingStarFreq = 500;
var shootingStarVelocity = 100;
var shootingStarSize = 1;
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
setInterval(callback, 75);
};
})();
var canvas = document.getElementById('field');
canvas.width = document.width || 1024;
canvas.height = document.height || 768;
var ctx = canvas.getContext("2d");
var stars = [];
var shootingStars = [];
this.init();
setInterval(update, 30);
requestAnimFrame(draw);
function init() {
for(i=0;i<totalObjects;i++){
stars.push(new Star());
}
}
function draw() {
requestAnimFrame(draw);
ctx.clearRect(0,0,canvas.width,canvas.height);
for(f=0;f<stars.length;f++)
{
stars[f].Update();
stars[f].Draw();
}
for(f=0;f<shootingStars.length;f++)
{
shootingStars[f].Update();
shootingStars[f].Draw();
}
}
function update()
{
if(Math.round((Math.random()*shootingStarFreq))==1){
shootingStars.push(new ShootingStar());
}
for(f=0;f<shootingStars.length;f++)
{
if (shootingStars[f].X < -1000)
{
shootingStars.splice(f,1);
}
}
}
function Star(){
this.X = Math.random()*canvas.width;
this.Y = Math.random()*canvas.height;
this.Velocity = (Math.random()*maxVelocity);
this.Opacity = (((Math.random()*10)+1)*0.1);
this.Update = function() {
this.X -= this.Velocity;
if(this.X<0){ ///reset
this.X = canvas.width+1;
}
};
this.Draw = function() {
ctx.fillStyle = "rgba(255,255,255," + this.Opacity + ")";
if(Math.round((Math.random()*twinkleFreq))==1){
ctx.fillRect(this.X,this.Y,starSize+2,starSize+2);
}
else{
ctx.fillRect(this.X,this.Y,starSize,starSize);
}
};
}
function ShootingStar() {
this.X = 2000;
this.Y = Math.random()*canvas.height;
this.Length = 1000;
this.Update = function(){
this.X -= shootingStarVelocity;
};
this.Draw = function() {
for (var i = 0; i < this.Length; i++){
opacity = (0.8 - (0.001 * i));
ctx.fillStyle = "rgba(255,255,255," + opacity + ")";
ctx.fillRect(this.X+i,this.Y,shootingStarSize,shootingStarSize);
}
};
}
Raw
style.css
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas{
position: absolute;
min-width: 400px;
min-height: 400px;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment