Skip to content

Instantly share code, notes, and snippets.

@ow

ow/Constellations.markdown

Created October 18, 2015 18:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ow/1ee75385f085a40fb335 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ow/1ee75385f085a40fb335 to your computer and use it in GitHub Desktop.
Download ZIP
Constellations
Raw
Constellations.markdown
Raw
script.js
var timer;
(function(){
var $ = (function(elm){
return document.querySelector(elm);
}),
Stars = function(){
var num = (Math.min(window.innerWidth, window.innerHeight) / Math.max(window.innerWidth, window.innerHeight)) * 750, //Math.abs(window.innerWidth - window.innerHeight),
makeStar = function(){
return {
radius: Math.random() * (3 - .5) + .5,
pos: {
x: Math.random() * c.width,
y: Math.random() * c.height
},
moveTo: {
x: Math.random() * c.width,
y: Math.random() * c.height
},
bigger: ~~(Math.random() * 2),
speed: Math.random() * (c.width / c.height / 40)
}
},
stars = [],
draw = function(star){
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(star.pos.x, star.pos.y, star.radius, 0, Math.PI * 2);
ctx.fill();
if(star.bigger){
star.radius += .01;
if(star.radius >= 3) star.bigger = false;
}else{
star.radius -= .01;
if(star.radius <= .3) star.bigger = true;
}
if(
star.moveTo.x >= star.pos.x - 5 &&
star.moveTo.x <= star.pos.x + 5
){
star.moveTo.x = Math.random() * c.width;
}
else if(star.moveTo.x < star.pos.x) star.pos.x -= star.speed;
else if(star.moveTo.x > star.pos.x) star.pos.x += star.speed;
if(
star.moveTo.y >= star.pos.y - 5 &&
star.moveTo.y <= star.pos.y + 5
){
star.moveTo.y = Math.random() * c.height;
}
else if(star.moveTo.y < star.pos.y) star.pos.y -= star.speed;
else if(star.moveTo.y > star.pos.y) star.pos.y += star.speed;
for(var i = 0; i < stars.length; i++){
if(
star != stars[i] &&
Math.sqrt(
(star.pos.x - stars[i].pos.x) * (star.pos.x - stars[i].pos.x) +
(star.pos.y - stars[i].pos.y) * (star.pos.y - stars[i].pos.y)
) < 50
){
ctx.beginPath();
ctx.moveTo(star.pos.x, star.pos.y);
ctx.lineTo(stars[i].pos.x, stars[i].pos.y);
ctx.closePath();
ctx.strokeStyle = "#fff";
ctx.lineWidth = .025;
ctx.stroke();
}
}
}
return {
init: function(){
for(var i = 0; i < num; i++){
stars.push(new makeStar());
}
},
move: function(){
timer = setInterval(function(){
ctx.clearRect(0, 0, c.width, c.height);
background();
for(var i = 0; i < stars.length; i++){
draw(stars[i]);
}
}, 1);
}
}
}
c = $("#sky"),
background = function(){
var grdnt = ctx.createLinearGradient(0, 0, 0, c.height);
grdnt.addColorStop(0, "#000");
grdnt.addColorStop(.5, "#135288");
grdnt.addColorStop(1, "#0C5663");
ctx.fillStyle = grdnt;
ctx.fillRect(0, 0, c.width, c.height);
},
sky = new Stars();
c.width = window.innerWidth;
c.height = window.innerHeight;
var ctx = c.getContext("2d");
sky.init();
background();
sky.move();
window.addEventListener("resize", function(){
c.width = window.innerWidth;
c.height = window.innerHeight;
clearInterval(timer);
timer = "";
sky = "";
ctx.clearRect(0, 0, c.width, c.height);
sky = new Stars();
sky.init();
background();
sky.move();
}, true);
}());
@Yaarik
Copy link
Copy Markdown

Yaarik commented Apr 26, 2019

Thanks for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment