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)
{
// 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);
}