Generate Sky Dome Texture v2

by Ben Gillbanks

CSS

body {
	margin: 0;
	background: #111;
}

canvas {
	width: 512px;
	height: 256px;
	image-rendering: pixelated;
}

JavaScript

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

document.body.appendChild(canvas);

const options = {
  width: 256,
  height: 128,

  preset: 'space',

  sun: {
    x: 0.4,
    height: 0.25,
  },

  seed: Math.random() * 100000,
};

const presets = {
  storm: {
    palette: {
      skyTop: '#1f2a35',
      skyMid: '#465462',
      horizon: '#8c8f8d',
      groundNear: '#1d292a',
      groundFar: '#4f5c61',
    },

    sun: {
      size: 0.08,
      glowSize: 0.18,
      brightness: 1.4,
      stretch: 1.1,
    },

    clouds: {
      style: 'puffy',
      count: 48,
      colour: '#cfd8df',
      shadow: '#5a6774',
      alpha: 0.38,
      minY: 0.08,
      maxY: 0.42,
    },

    land: {
      horizon: '#38464c',
      bottom: '#1e2824',
      patch: '#18241d',
      patchCount: 130,
      patchAlpha: 0.18,

      layers: [
        { height: 2, yOffset: 1, offset: 2.2, colour: '#5c6b73', alpha: 0.18 },
        { height: 4, yOffset: 3, offset: 4.8, colour: '#39484c', alpha: 0.45 },
        { height: 6, yOffset: 5, offset: 7.4, colour: '#1f292c', alpha: 0.7 },
      ],
    },

    grain: 0.04,
  },

  sunset: {
    palette: {
      skyTop: '#3f315f',
      skyMid: '#d18374',
      horizon: '#ffe1aa',
      groundNear: '#4b342d',
      groundFar: '#9c6b58',
    },

    sun: {
      size: 0.16,
      glowSize: 0.55,
      brightness: 4.2,
      stretch: 2,
    },

    clouds: {
      style: 'mixed',
      count: 22,
      colour: '#fff1dc',
      shadow: '#b58b72',
      alpha: 0.28,
      minY: 0.18,
      maxY: 0.5,
    },

    land: {
      horizon: '#8d6452',
      bottom: '#49392f',
      patch: '#2d1f1b',
      patchCount: 80,
      patchAlpha: 0.12,

      layers: [
        { height: 2, yOffset: 1, offset: 2.1, colour: '#d89a72', alpha: 0.15 },
        { height: 4, yOffset: 2, offset: 4.4, colour: '#8d6452', alpha: 0.35 },
...