Make stars more pretty

This commit is contained in:
Starbeamrainbowlabs 2017-01-02 15:56:52 +00:00
parent b5b0de4fba
commit 0c2fd8d9e6
2 changed files with 40 additions and 10 deletions

29
Star.js
View file

@ -10,14 +10,15 @@ class Star
this.position = inPosition;
this.rotation = 0;
this.rotationStep = 0;
this.alpha = 1;
this.pointCount = 5;
this.size = inSize;
this.innerRingSize = this.size * 0.5;
this.innerRingRatio = 0.5;
this.colour = "white";
this.recalculatePoints();
}
/**
@ -31,6 +32,11 @@ class Star
return (Math.PI * 2) / (this.pointCount * 2);
}
get innerRingSize()
{
return this.innerRingRatio * this.size;
}
recalculatePoints()
{
this.points = [];
@ -38,22 +44,30 @@ class Star
{
let currentSize = i % 2 == 0 ? this.size : this.innerRingSize;
this.points.push(new Vector(
currentSize * Math.cos(Math.PI * 2 * (n / (Math.PI * 2)) + this.rotation - Math.PI / 2),
currentSize * Math.sin(Math.PI * 2 * (n / (Math.PI * 2)) + this.rotation - Math.PI / 2)
currentSize * Math.cos(Math.PI * 2 * (n / (Math.PI * 2)) - Math.PI / 2),
currentSize * Math.sin(Math.PI * 2 * (n / (Math.PI * 2)) - Math.PI / 2)
));
}
}
update(dt)
{
this.rotation += this.rotationStep * dt;
// if(this.rotation > Math.PI * 2)
// this.rotation -= Math.PI * 2;
// if(this.rotation < 0)
// this.rotation += Math.PI * 2;
}
render(context)
{
if(!(this.points instanceof Array))
this.recalculatePoints();
context.save();
context.translate(this.position.x, this.position.y);
// TODO: Debug this
context.rotate(this.rotation);
context.beginPath();
context.moveTo(this.points[0].x, this.points[0].y);
for (let point of this.points) {
@ -61,6 +75,7 @@ class Star
}
context.closePath();
context.globalAlpha = this.alpha;
context.fillStyle = this.colour;
context.fill();

View file

@ -2,6 +2,7 @@
import random from './Random'; // Bounded random number generation
import Vector from './Vector'; // 2D vector class
import Range from './Range'; // Range representation
// Subclasses
import Star from './Star';
@ -14,6 +15,8 @@ class StarlightRenderer
// The colour of the sky in the background.
this.skyColour = "hsla(248, 100%, 23%, 1)";
this.starSize = new Range(2, 10);
// ~~~
this.canvas = canvas;
@ -27,14 +30,24 @@ class StarlightRenderer
this.stars = [];
for(let i = 0; i < 100; i++)
{
this.stars.push(new Star(
let nextStar = new Star(
this.canvas,
new Vector(
random(0, this.canvas.width),
random(0, this.canvas.height)
),
random(2, 10)
));
random(this.starSize.min, this.starSize.max)
);
nextStar.pointCount = random(4, 8);
// Make larger stars tend towards having longer points
nextStar.innerRingRatio = random(0.2, 0.8, true);
nextStar.innerRingRatio = (nextStar.innerRingRatio + nextStar.innerRingRatio*(1 - (nextStar.size / this.starSize.max))) / 2;
nextStar.rotation = random(0, Math.PI*2, true);
nextStar.rotationStep = random(0.0001, 0.001, true);
if(random(0, 2) == 0)
nextStar.rotationStep *= -1;
nextStar.alpha = random(0.2, 0.9, true);
this.stars.push(nextStar);
}
}
@ -55,6 +68,8 @@ class StarlightRenderer
// Stars
for(let star of this.stars)
star.update(this.currentDt);
this.lastFrame = this.currentFrame;
}
render(canvas, context)