Browse Source

Add overlay

master
Starbeamrainbowlabs 2 years ago
parent
commit
aa22a8aa56
1 changed files with 33 additions and 2 deletions
  1. 33
    2
      Starlight-Renderer.js

+ 33
- 2
Starlight-Renderer.js View File

@@ -13,7 +13,8 @@ class StarlightRenderer
13 13
 	constructor(canvas)
14 14
 	{
15 15
 		// The colour of the sky in the background.
16
-		this.skyColour = "hsla(248, 100%, 23%, 1)";
16
+		this.skyColour1 = "hsla(248, 100%, 23%, 1)";
17
+		this.skyColour2 = "hsla(248, 100%, 5%, 1)";
17 18
 		
18 19
 		this.starCount = 1000;
19 20
 		this.starSize = new Range(2, 10);
@@ -61,6 +62,31 @@ class StarlightRenderer
61 62
 		}
62 63
 	}
63 64
 	
65
+	generateGradients(canvas, context)
66
+	{
67
+		this.generateBackgroundGradient(canvas, context);
68
+		this.generateOverlayGradient(canvas, context);
69
+	}
70
+	
71
+	generateBackgroundGradient(canvas, context)
72
+	{
73
+		this.backgroundGradient = context.createRadialGradient(
74
+			canvas.width / 2, canvas.height, canvas.height / 5,
75
+			canvas.width / 2, canvas.height, canvas.height * 1.2
76
+		);
77
+		this.backgroundGradient.addColorStop(0, this.skyColour1);
78
+		this.backgroundGradient.addColorStop(1, this.skyColour2);
79
+	}
80
+	generateOverlayGradient(canvas, context)
81
+	{
82
+		this.overlayGradient = context.createRadialGradient(
83
+			canvas.width / 2, canvas.height, canvas.height / 5,
84
+			canvas.width / 2, canvas.height, canvas.height * 1.2
85
+		);
86
+		this.overlayGradient.addColorStop(0, "hsla(248, 100%, 2%, 0.6)");
87
+		this.overlayGradient.addColorStop(1, "hsla(248, 100%, 2%, 0.01)");
88
+	}
89
+	
64 90
 	nextFrame()
65 91
 	{
66 92
 		this.update();
@@ -85,12 +111,16 @@ class StarlightRenderer
85 111
 	render(canvas, context)
86 112
 	{
87 113
 		// Background
88
-		context.fillStyle = this.skyColour;
114
+		context.fillStyle = this.backgroundGradient;
89 115
 		context.fillRect(0, 0, this.canvas.width, this.canvas.height);
90 116
 		
91 117
 		// Stars
92 118
 		for(let star of this.stars)
93 119
 			star.render(context);
120
+		
121
+		// Overlay
122
+		context.fillStyle = this.overlayGradient;
123
+		context.fillRect(0, 0, this.canvas.width, this.canvas.height);
94 124
 	}
95 125
 	
96 126
 	/**
@@ -100,6 +130,7 @@ class StarlightRenderer
100 130
 		this.canvas.width = window.innerWidth;
101 131
 		this.canvas.height = window.innerHeight;
102 132
 		
133
+		this.generateGradients(this.canvas, this.context);
103 134
 		//this.render(this.context);
104 135
 	}
105 136
 	

Loading…
Cancel
Save