Browse Source

Add twinkle & more controls

master
Starbeamrainbowlabs 2 years ago
parent
commit
b581b03c6f
2 changed files with 21 additions and 7 deletions
  1. 12
    7
      Star.js
  2. 9
    0
      Starlight-Renderer.js

+ 12
- 7
Star.js View File

@@ -12,6 +12,7 @@ class Star
12 12
 		this.position = inPosition; // The position
13 13
 		this.rotation = 0; // The rotation
14 14
 		this.rotationStep = 0; // The amount (in rads / sec) the star turns by
15
+		this.scale = 1;
15 16
 		this.alpha = 1; // The opacity
16 17
 		
17 18
 		this.pointCount = 5; // The number of points
@@ -20,9 +21,9 @@ class Star
20 21
 		this.size = this.startSize; // The current radius
21 22
 		this.innerRingRatio = 0.5; // The radius of the inner ring (for the inner points)
22 23
 		
23
-		this.twinkleSize = this.size * 2; // The size multiplier when twinkling
24
+		this.twinkleSize = 2; // The size multiplier when twinkling
24 25
 		this.twinkling = false; // Whether we're twinkling
25
-		this.twinkleDuration = 2; // The duration of a twinkle (in seconds)
26
+		this.twinkleDuration = 1; // The duration of a twinkle (in seconds)
26 27
 		this.twinkleTimer = 0; // The current point along the twinkle we are at now
27 28
 		
28 29
 		this.colour = "white"; // The colour of the star
@@ -67,19 +68,22 @@ class Star
67 68
 			this.rotation += Math.PI * 2;
68 69
 		
69 70
 		// Randomly begin a twinkle
70
-		/*if(!this.twinkling && Math.floor(random(0, 50)*dt) == 0)
71
+		if(!this.twinkling && dt != 0 && Math.floor(random(0, 50000)*dt) == 0)
71 72
 			this.twinkling = true;
72 73
 		
73 74
 		if(this.twinkling)
74 75
 		{
75 76
 			// Calculate the new size quadratically
76
-			let sizeMultiplier = 1 + (1 - Math.pow(2*(this.twinkleTimer / this.twinkleDuration) - 1, 2));
77
-			this.size = this.startSize * sizeMultiplier;
77
+			let sizeMultiplier = (1 - Math.pow(2*(this.twinkleTimer / this.twinkleDuration) - 1, 2));
78
+			sizeMultiplier *= this.twinkleSize;
79
+			// Go from 0 - size to 1 - (size + 1) (because a size of 0 makes things disappear)
80
+			sizeMultiplier += 1;
81
+			this.scale = sizeMultiplier;
78 82
 			
79 83
 			this.twinkleTimer += dt;
80
-			if(this.twinkleTimer == this.twinkleDuration)
84
+			if(this.twinkleTimer >= this.twinkleDuration)
81 85
 				this.twinkling = false, this.twinkleTimer = 0;
82
-		}*/
86
+		}
83 87
 	}
84 88
 	
85 89
 	render(context)
@@ -90,6 +94,7 @@ class Star
90 94
 		context.save();
91 95
 		context.translate(this.position.x, this.position.y);
92 96
 		context.rotate(this.rotation);
97
+		context.scale(this.scale, this.scale);
93 98
 		
94 99
 		context.beginPath();
95 100
 		context.moveTo(this.points[0].x, this.points[0].y);

+ 9
- 0
Starlight-Renderer.js View File

@@ -16,6 +16,8 @@ class StarlightRenderer
16 16
 		this.skyColour = "hsla(248, 100%, 23%, 1)";
17 17
 		
18 18
 		this.starSize = new Range(2, 10);
19
+		this.twinkleDuration = new Range(0.5, 1.5);
20
+		this.twinkleSize = new Range(1.2, 2);
19 21
 		
20 22
 		// ~~~
21 23
 		
@@ -39,14 +41,21 @@ class StarlightRenderer
39 41
 				random(this.starSize.min, this.starSize.max)
40 42
 			);
41 43
 			nextStar.pointCount = random(4, 8);
44
+			
42 45
 			// Make larger stars tend towards having longer points
43 46
 			nextStar.innerRingRatio = random(0.2, 0.8, true);
44 47
 			nextStar.innerRingRatio = (nextStar.innerRingRatio + nextStar.innerRingRatio*(1 - (nextStar.size / this.starSize.max))) / 2;
48
+			
45 49
 			nextStar.rotation = random(0, Math.PI*2, true);
46 50
 			nextStar.rotationStep = random(0.1, 1, true);
47 51
 			if(random(0, 2) == 0)
48 52
 				nextStar.rotationStep *= -1;
53
+			
49 54
 			nextStar.alpha = random(0.2, 0.9, true);
55
+			
56
+			nextStar.twinkleDuration = random(this.twinkleDuration.min, this.twinkleDuration.max, true);
57
+			nextStar.twinkleSize = random(this.twinkleSize.min, this.twinkleSize.max, true);
58
+			
50 59
 			this.stars.push(nextStar);
51 60
 		}
52 61
 	}

Loading…
Cancel
Save