Skip to content

Instantly share code, notes, and snippets.

/script.js

Created January 20, 2017 06:18
Show Gist options
  • Save anonymous/71392a1083b851691b1fb3043e461f3f to your computer and use it in GitHub Desktop.
Save anonymous/71392a1083b851691b1fb3043e461f3f to your computer and use it in GitHub Desktop.
Download ZIP
Swirling Stars
Raw
script.js
window.onload = function(){
// Creating the Canvas
var canvas = document.createElement("canvas"),
c = canvas.getContext("2d"),
particles = {},
particleIndex = 0,
particleNum = 0.1;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.id = "motion";
document.body.appendChild(canvas);
// Finished Creating Canvas
// Setting color which is just one big square
c.fillStyle = "black";
c.fillRect(0,0,canvas.width,canvas.height);
// Finished Color
var y_fourth = Math.floor(canvas.height / 4);
var y_second_fourth = Math.floor(y_fourth * 2);
function Particle(){
var random_x = Math.floor(Math.random() * (0)) + 1;
var random_y = Math.floor(Math.random() * y_second_fourth + y_fourth) + 1;
this.x = random_x;
this.y = random_y;
this.vx = Math.random() * 5 - 2;
this.vy = Math.random() * 2 - 1;
this.gravity = 0;
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.size = Math.random() * 6 - 2;
this.color = "hsla(0,0%,"+parseInt(Math.random()*100, 0)+"%,1)";
this.color2 = "hsla(360,100%,"+parseInt(Math.random()*100, 0)+"%,1)";
this.color3 = "hsla(210,100%,"+parseInt(Math.random()*100, 0)+"%,1)";
this.color_selector = Math.random() * 150 - 1;
}
Particle.prototype.draw = function(){
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
if(this.x > canvas.width || this.y > canvas.height){
delete particles[this.id];
}
if(this.color_selector < 30 && this.color_selector > 10){
c.fillStyle = this.color2;
} else if(this.color_selector < 10) {
c.fillStyle = this.color3;
} else {
c.fillStyle = this.color;
}
c.fillRect(this.x, this.y, this.size, this.size);
};
setInterval(function(){
c.fillStyle = "black";
c.fillRect(0,0,canvas.width,canvas.height);
for (var i = 0; i < particleNum; i++){
new Particle();
}
for(var i in particles){
particles[i].draw();
}
}, 30);
};
Raw
style.css
body {
margin: 0;
padding: 0;
background-color: #000;
}
Raw
swirling-stars.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment