n/vue-shovel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

smooth sky color transition

Browse source
This commit is contained in:
koehr 2018-05-17 00:51:50 +02:00
parent e7cd369b63
commit faa605e836
1 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/solar-quartet.js
View file

@ -49,16 +49,19 @@ export default function drawFrame (canvas, ctx, width, height, grCanvas, grCtx,
// Paint the sky // Paint the sky
const skyGradient = ctx.createLinearGradient(0, 0, 0, height) const skyGradient = ctx.createLinearGradient(0, 0, 0, height)
if (sunY > -25) { // night const skyHue = 360 + sunY
skyGradient.addColorStop(0, '#001') // slight blue hue const skySaturation = 100 + sunY
skyGradient.addColorStop(.7, '#004') // but mainly black const skyLightness = Math.min(sunY * -1 - 10, 55)
} else if (sunY < -70) { // day const skyHSLTop = `hsl(220, 70%, ${skyLightness}%)`
skyGradient.addColorStop(0, '#79F') // blue with a light gradient const skyHSLBottom = `hsl(${skyHue}, ${skySaturation}%, ${skyLightness}%)`
skyGradient.addColorStop(.7, '#33A') // into more blue skyGradient.addColorStop(0, skyHSLTop)
} else { // dawn / sunset skyGradient.addColorStop(.7, skyHSLBottom)
/*
skyGradient.addColorStop(0, '#2a3e55') // Blueish at the top. skyGradient.addColorStop(0, '#2a3e55') // Blueish at the top.
skyGradient.addColorStop(.7, '#8d4835') // Reddish at the bottom. skyGradient.addColorStop(.7, '#8d4835') // Reddish at the bottom.
} }
*/
ctx.fillStyle = skyGradient ctx.fillStyle = skyGradient
ctx.fillRect(0, 0, width, height) ctx.fillRect(0, 0, width, height)
@ -73,8 +76,8 @@ export default function drawFrame (canvas, ctx, width, height, grCanvas, grCtx,
// Draw 4 layers of mountains. // Draw 4 layers of mountains.
for(let i = 0; i < 4; i++) { for(let i = 0; i < 4; i++) {
// Set the main canvas fillStyle to a shade of brown with variable lightness // Set the main canvas fillStyle to a shade of green-brown with variable lightness
// (darker at the front) // depending on sunY and depth
if (sunY > -25) { // night if (sunY > -25) { // night
ctx.fillStyle = `hsl(5, 23%, ${4-i}%)` ctx.fillStyle = `hsl(5, 23%, ${4-i}%)`
} else if (sunY < -70) { // day (TODO) } else if (sunY < -70) { // day (TODO)