Multiple skies

sky.js

@@ -1,5 +1,7 @@
 import {createCanvas, drawRect, clipCanvas, plot} from './gfx.js';
-import {randomInt} from './math.js';
+import {randomInt, gradient} from './math.js';
+import {SKY_COLORS} from './constants.js';
+import {sample} from './utils.js';
 
 export function createSky(width, height) {
   const ctx = createCanvas(width, height);
@@ -9,11 +11,13 @@ export function createSky(width, height) {
 
 export function generateSky(ctx) {
   const {width, height} = ctx.canvas;
-  const [r, g, b] = [70*0.6, 130*0.6, 180*0.6];
+  const {from, to} = sample(SKY_COLORS);
 
   for (let y=0; y<height; y++) {
-    const darken = 1 - (1/height*y);
-    const [dr, dg, db] = [r*darken, g*darken, b*darken];
-    drawRect(ctx, 0, y, width, 1, `rgb(${dr},${dg},${db})`);
+    const f = y / height;
+    const r = gradient(from[0], to[0], f);
+    const g = gradient(from[1], to[1], f);
+    const b = gradient(from[2], to[2], f);
+    drawRect(ctx, 0, y, width, 1, `rgb(${r},${g},${b})`);
   }
 }