const CLOUD_PROB = 0.4;

const S_RANGE = 5;

const B_RANGE = 5;

const SKY_COLOR = [56, 45, 90];

const CLOUD_COLOR = [55, 5, 90];

​

let GRID_WIDTH = 50;

let GRID_HEIGHT = 50;

let grid = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  GRID_WIDTH = int(windowWidth / 8);

  GRID_HEIGHT = int(windowHeight / 8);

  frameRate(10);

  for (let i = 0; i < GRID_WIDTH; i++) {

    let row = [];

    for (let j = 0; j < GRID_HEIGHT; j++) {

      row.push(0);

    }

    grid.push(row);

  }

}

​

function draw() {

  moveClouds();

  spawnClouds();

  background(220);

  push();

  noStroke();

  colorMode(HSB, 100);

  let g_width = width / GRID_WIDTH;

  let g_height = height / GRID_HEIGHT;

  for (let i = 0; i < GRID_WIDTH; i++) {

    for (let j = 0; j < GRID_HEIGHT; j++) {

      let t = grid[i][j];

      if (t == 1) {

        fill(

          CLOUD_COLOR[0], 

          CLOUD_COLOR[1], 

          CLOUD_COLOR[2] + (2 * noise(j, i) - 1) * B_RANGE

        );

      } else {

        fill(

          SKY_COLOR[0], 

          SKY_COLOR[1] + (2 * noise(i, j) - 1) * S_RANGE, 

          SKY_COLOR[2] + (2 * noise(i, j) - 1) * B_RANGE

        );

      }

      rect(i * g_width, j * g_height, g_width, g_height);

    }

  }

  pop();

}

​

function spawnClouds() {

  for (let i = 0; i < GRID_HEIGHT; i++) {

    if (grid[GRID_WIDTH - 2][i] == 1 || (i > 0 && grid[GRID_WIDTH - 2][i - 1] == 1) || (i < GRID_HEIGHT - 1 && grid[GRID_WIDTH - 2][i + 1] == 1)) {

      if (random() <= CLOUD_PROB)

        grid[GRID_WIDTH - 1][i] = 1;

    } else {

      if (random() <= AIR_PROB)

        grid[GRID_WIDTH -1][i] = 1;

    }

  }

}

​

function moveClouds() {

  for (let i = 0; i < GRID_WIDTH; i++) {

    for (let j = 0; j < GRID_HEIGHT; j++) {

      if (i == 0) {

        grid[i][j] = 0;

      }else {

        grid[i - 1][j] = grid[i][j];

        grid[i][j] = 0;

      }

    }

  }

}