|
|
@@ -13,7 +13,8 @@ class StarlightRenderer |
|
|
|
constructor(canvas) |
|
|
|
{ |
|
|
|
// The colour of the sky in the background. |
|
|
|
this.skyColour = "hsla(248, 100%, 23%, 1)"; |
|
|
|
this.skyColour1 = "hsla(248, 100%, 23%, 1)"; |
|
|
|
this.skyColour2 = "hsla(248, 100%, 5%, 1)"; |
|
|
|
|
|
|
|
this.starCount = 1000; |
|
|
|
this.starSize = new Range(2, 10); |
|
|
@@ -61,6 +62,31 @@ class StarlightRenderer |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
generateGradients(canvas, context) |
|
|
|
{ |
|
|
|
this.generateBackgroundGradient(canvas, context); |
|
|
|
this.generateOverlayGradient(canvas, context); |
|
|
|
} |
|
|
|
|
|
|
|
generateBackgroundGradient(canvas, context) |
|
|
|
{ |
|
|
|
this.backgroundGradient = context.createRadialGradient( |
|
|
|
canvas.width / 2, canvas.height, canvas.height / 5, |
|
|
|
canvas.width / 2, canvas.height, canvas.height * 1.2 |
|
|
|
); |
|
|
|
this.backgroundGradient.addColorStop(0, this.skyColour1); |
|
|
|
this.backgroundGradient.addColorStop(1, this.skyColour2); |
|
|
|
} |
|
|
|
generateOverlayGradient(canvas, context) |
|
|
|
{ |
|
|
|
this.overlayGradient = context.createRadialGradient( |
|
|
|
canvas.width / 2, canvas.height, canvas.height / 5, |
|
|
|
canvas.width / 2, canvas.height, canvas.height * 1.2 |
|
|
|
); |
|
|
|
this.overlayGradient.addColorStop(0, "hsla(248, 100%, 2%, 0.6)"); |
|
|
|
this.overlayGradient.addColorStop(1, "hsla(248, 100%, 2%, 0.01)"); |
|
|
|
} |
|
|
|
|
|
|
|
nextFrame() |
|
|
|
{ |
|
|
|
this.update(); |
|
|
@@ -85,12 +111,16 @@ class StarlightRenderer |
|
|
|
render(canvas, context) |
|
|
|
{ |
|
|
|
// Background |
|
|
|
context.fillStyle = this.skyColour; |
|
|
|
context.fillStyle = this.backgroundGradient; |
|
|
|
context.fillRect(0, 0, this.canvas.width, this.canvas.height); |
|
|
|
|
|
|
|
// Stars |
|
|
|
for(let star of this.stars) |
|
|
|
star.render(context); |
|
|
|
|
|
|
|
// Overlay |
|
|
|
context.fillStyle = this.overlayGradient; |
|
|
|
context.fillRect(0, 0, this.canvas.width, this.canvas.height); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
@@ -100,6 +130,7 @@ class StarlightRenderer |
|
|
|
this.canvas.width = window.innerWidth; |
|
|
|
this.canvas.height = window.innerHeight; |
|
|
|
|
|
|
|
this.generateGradients(this.canvas, this.context); |
|
|
|
//this.render(this.context); |
|
|
|
} |
|
|
|
|