bg: "#496c9b",

  earth1: "#4d3027",

  earth2: "#455c45",

  air1: "#437dcf",

  air2: "#b6c9f7",

};

​

function setup() {

  createCanvas(1200, 900);

}

​

function draw() {

  background(palette.bg);

  layer(earth);

  layer(air);

​

  // mountains

  layer(() => {

    strokeCap(SQUARE);

​

    translate(2 - SPIRAL_WIDTH * 0.5, height / 2 + SPIRAL_WIDTH);

    translate(width - SPIRAL_WIDTH + 12, -3);

    sspiral(-SPIRAL_WIDTH * 5);

    translate(-SPIRAL_WIDTH, -8);

    sspiral(-SPIRAL_WIDTH * 4);

    translate(-SPIRAL_WIDTH, -8);

    sspiral(-SPIRAL_WIDTH * 3);

    translate(-SPIRAL_WIDTH, -8);

    sspiral(-SPIRAL_WIDTH * 2);

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

​

    rotate(PI);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

    translate(-SPIRAL_WIDTH, -8);

    sspiral();

​

    // mirror on Y axis

    scale(1, -1);

    translate(SPIRAL_WIDTH * 5, SPIRAL_WIDTH - 24);

    sspiral();

    translate(SPIRAL_WIDTH, 8);

    sspiral(SPIRAL_WIDTH * -3);

    translate(SPIRAL_WIDTH, 8);

    sspiral(SPIRAL_WIDTH * -5);

    translate(SPIRAL_WIDTH, 8);

    sspiral(SPIRAL_WIDTH * -7);

    translate(SPIRAL_WIDTH, 8);

    sspiral();

  });

}

​

function earth() {

  strokeCap(SQUARE);

​

  translate(2 - SPIRAL_WIDTH * 0.5, height - 4);

​

  for (let row = 0; row < 5; row++) {

    layer(() => {

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

        sspiral();

        translate(SPIRAL_WIDTH, 0);

      }

    });

    translate(0, -SPIRAL_WIDTH);

    layer(() => {

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

        layer(() => {

          translate(SPIRAL_WIDTH * (i + 0.5), -SPIRAL_WIDTH);

          rotate(-PI);

          sspiral();

        });

      }

    });

​

    translate(0, -SPIRAL_WIDTH);

  }

}

​

function air() {

  strokeCap(ROUND);

  for (let row = 0; row < 12; row++) {

    layer(() => {

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

        let color;

        if (

          (row === 3 && i >= 2 && i <= 4) ||

          (row === 4 && i >= 1 && i <= 3) ||

          (row === 5 && i >= 3 && i <= 3) ||

          (row === 6 && i >= 10 && i <= 12) ||

          (row === 7 && i >= 10 && i <= 11) ||

          (row === 8 && i >= 9 && i <= 10) ||

          (row === 8 && i >= 21 && i <= 22) ||

          (row === 9 && i >= 20 && i <= 24) ||

          (row === 10 && i >= 19 && i <= 23)

        ) {

          color = palette.air2;

        }

​

        layer(() => {

          translate(SPIRAL_WIDTH / 2, height / 2 + SPIRAL_WIDTH / 2);

          rotate(((PI * 5) / 6) * (i + row));

          cspiral(color);

        });

        translate(SPIRAL_WIDTH, 0);

      }

    });

    translate(0, -SPIRAL_WIDTH);

  }

}

​

function layer(cb) {

  push();

  cb();

  pop();

}

layer.skip = () => {

  /** no op */

};

​

const SPIRAL_WIDTH = 40;

​

function sspiral(tail = -SPIRAL_WIDTH) {

  push();

​

  layer(() => {

    scale(0.95);

    translate(6, -6);

    strokeWeight(4);

    stroke(palette.earth2);

    spiral2(-SPIRAL_WIDTH * -0.2);

  });

​

  strokeWeight(5);

  stroke(palette.earth1);

  spiral(tail);

​

  pop();

}

​

function spiral(tail = -SPIRAL_WIDTH) {

  push();

  noFill();

  beginShape();

  vertex(tail, 0);

  vertex(SPIRAL_WIDTH, 0);

  vertex(SPIRAL_WIDTH, -SPIRAL_WIDTH);

  vertex(SPIRAL_WIDTH * 0.2, -SPIRAL_WIDTH);

  vertex(SPIRAL_WIDTH * 0.2, -SPIRAL_WIDTH * 0.2);

  vertex(SPIRAL_WIDTH * 0.8, -SPIRAL_WIDTH * 0.2);

  vertex(SPIRAL_WIDTH * 0.8, -SPIRAL_WIDTH * 0.8);

  vertex(SPIRAL_WIDTH * 0.4, -SPIRAL_WIDTH * 0.8);

  vertex(SPIRAL_WIDTH * 0.4, -SPIRAL_WIDTH * 0.4);

  vertex(SPIRAL_WIDTH * 0.6, -SPIRAL_WIDTH * 0.4);

  vertex(SPIRAL_WIDTH * 0.6, -SPIRAL_WIDTH * 0.65);

  endShape();

  pop();

}

​

function spiral2(tail = -SPIRAL_WIDTH, cb) {

  w = SPIRAL_WIDTH * 0.88333;

  push();

  noFill();

  // stroke(palette.earth1);

  // strokeWeight(4);

  beginShape();

  vertex(w * 0.6, -w * 0.7);

  vertex(w * 0.6, -w * 0.4);

  vertex(w * 0.4, -w * 0.4);

  vertex(w * 0.4, -w * 0.8);

  vertex(w * 0.8, -w * 0.8);

  vertex(w * 0.8, -w * 0.2);

  vertex(w * 0.2, -w * 0.2);

  vertex(w * 0.2, -w);

  vertex(w, -w);

  vertex(w, 0);

  vertex(tail, 0);

  if (cb) {

    // optionally extend line before ending shape

    layer(cb);

  }

  endShape();

  pop();

}

​

function cspiral(color = palette.air1) {

  push();

​

  layer(() => {

    scale(0.95);

    translate(3, -3);

    strokeWeight(2);

    stroke(palette.earth2);

    circleSpiral();

  });

​

  strokeWeight(4);

  stroke(color);

  circleSpiral();

​

  pop();

}

​

function circleSpiral(w = SPIRAL_WIDTH) {

  noFill();

  arc(0, 0, w * 0.2, w * 0.2, PI, 0);

  arc(0 - w * 0.1, 0, w * 0.4, w * 0.4, 0, PI);

  arc(0, 0, w * 0.6, w * 0.6, PI, 0);

  arc(0 - w * 0.1, 0, w * 0.8, w * 0.8, 0, PI);

  arc(0, 0, w, w, PI, 0);

}

​