sbrl/Scene-Starlight
sbrl/Scene-Starlight
1
0
Fork 0
Code Issues Pull requests Activity

Add overlay

Browse source
This commit is contained in:
Starbeamrainbowlabs 2017-01-02 17:43:21 +00:00
parent 8d1e3db704
commit aa22a8aa56
1 changed files with 33 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
Starlight-Renderer.js
View file

@ -13,7 +13,8 @@ class StarlightRenderer
constructor(canvas) constructor(canvas)
{ {
// The colour of the sky in the background. // 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.starCount = 1000;
this.starSize = new Range(2, 10); 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() nextFrame()
{ {
this.update(); this.update();
@ -85,12 +111,16 @@ class StarlightRenderer
render(canvas, context) render(canvas, context)
{ {
// Background // Background
context.fillStyle = this.skyColour; context.fillStyle = this.backgroundGradient;
context.fillRect(0, 0, this.canvas.width, this.canvas.height); context.fillRect(0, 0, this.canvas.width, this.canvas.height);
// Stars // Stars
for(let star of this.stars) for(let star of this.stars)
star.render(context); 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.width = window.innerWidth;
this.canvas.height = window.innerHeight; this.canvas.height = window.innerHeight;
this.generateGradients(this.canvas, this.context);
//this.render(this.context); //this.render(this.context);
} }