Add twinkle & more controls

Star.js

@@ -12,6 +12,7 @@ class Star
 		this.position = inPosition; // The position
 		this.rotation = 0; // The rotation
 		this.rotationStep = 0; // The amount (in rads / sec) the star turns by
+		this.scale = 1;
 		this.alpha = 1; // The opacity
 		
 		this.pointCount = 5; // The number of points
@@ -20,9 +21,9 @@ class Star
 		this.size = this.startSize; // The current radius
 		this.innerRingRatio = 0.5; // The radius of the inner ring (for the inner points)
 		
-		this.twinkleSize = this.size * 2; // The size multiplier when twinkling
+		this.twinkleSize = 2; // The size multiplier when twinkling
 		this.twinkling = false; // Whether we're twinkling
-		this.twinkleDuration = 2; // The duration of a twinkle (in seconds)
+		this.twinkleDuration = 1; // The duration of a twinkle (in seconds)
 		this.twinkleTimer = 0; // The current point along the twinkle we are at now
 		
 		this.colour = "white"; // The colour of the star
@@ -67,19 +68,22 @@ class Star
 			this.rotation += Math.PI * 2;
 		
 		// Randomly begin a twinkle
-		/*if(!this.twinkling && Math.floor(random(0, 50)*dt) == 0)
+		if(!this.twinkling && dt != 0 && Math.floor(random(0, 50000)*dt) == 0)
 			this.twinkling = true;
 		
 		if(this.twinkling)
 		{
 			// Calculate the new size quadratically
-			let sizeMultiplier = 1 + (1 - Math.pow(2*(this.twinkleTimer / this.twinkleDuration) - 1, 2));
-			this.size = this.startSize * sizeMultiplier;
+			let sizeMultiplier = (1 - Math.pow(2*(this.twinkleTimer / this.twinkleDuration) - 1, 2));
+			sizeMultiplier *= this.twinkleSize;
+			// Go from 0 - size to 1 - (size + 1) (because a size of 0 makes things disappear)
+			sizeMultiplier += 1;
+			this.scale = sizeMultiplier;
 			
 			this.twinkleTimer += dt;
-			if(this.twinkleTimer == this.twinkleDuration)
+			if(this.twinkleTimer >= this.twinkleDuration)
 				this.twinkling = false, this.twinkleTimer = 0;
-		}*/
+		}
 	}
 	
 	render(context)
@@ -90,6 +94,7 @@ class Star
 		context.save();
 		context.translate(this.position.x, this.position.y);
 		context.rotate(this.rotation);
+		context.scale(this.scale, this.scale);
 		
 		context.beginPath();
 		context.moveTo(this.points[0].x, this.points[0].y);

Starlight-Renderer.js

@@ -16,6 +16,8 @@ class StarlightRenderer
 		this.skyColour = "hsla(248, 100%, 23%, 1)";
 		
 		this.starSize = new Range(2, 10);
+		this.twinkleDuration = new Range(0.5, 1.5);
+		this.twinkleSize = new Range(1.2, 2);
 		
 		// ~~~
 		
@@ -39,14 +41,21 @@ class StarlightRenderer
 				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.1, 1, true);
 			if(random(0, 2) == 0)
 				nextStar.rotationStep *= -1;
+			
 			nextStar.alpha = random(0.2, 0.9, true);
+			
+			nextStar.twinkleDuration = random(this.twinkleDuration.min, this.twinkleDuration.max, true);
+			nextStar.twinkleSize = random(this.twinkleSize.min, this.twinkleSize.max, true);
+			
 			this.stars.push(nextStar);
 		}
 	}