Make stars more pretty

Star.js

@@ -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();
 		

Starlight-Renderer.js

@@ -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)