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

View file

@ -2,6 +2,7 @@
import random from './Random'; // Bounded random number generation import random from './Random'; // Bounded random number generation
import Vector from './Vector'; // 2D vector class import Vector from './Vector'; // 2D vector class
import Range from './Range'; // Range representation
// Subclasses // Subclasses
import Star from './Star'; import Star from './Star';
@ -14,6 +15,8 @@ class StarlightRenderer
// The colour of the sky in the background. // The colour of the sky in the background.
this.skyColour = "hsla(248, 100%, 23%, 1)"; this.skyColour = "hsla(248, 100%, 23%, 1)";
this.starSize = new Range(2, 10);
// ~~~ // ~~~
this.canvas = canvas; this.canvas = canvas;
@ -27,14 +30,24 @@ class StarlightRenderer
this.stars = []; this.stars = [];
for(let i = 0; i < 100; i++) for(let i = 0; i < 100; i++)
{ {
this.stars.push(new Star( let nextStar = new Star(
this.canvas, this.canvas,
new Vector( new Vector(
random(0, this.canvas.width), random(0, this.canvas.width),
random(0, this.canvas.height) 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 // Stars
for(let star of this.stars) for(let star of this.stars)
star.update(this.currentDt); star.update(this.currentDt);
this.lastFrame = this.currentFrame;
} }
render(canvas, context) render(canvas, context)