Isometric city

// 05.01.25

//

// Made for Genuary 2025

// #genuary #genuary5

// Isometric Art (No vanishing points).

//

// https://www.instagram.com/lucjastozek/

​

const palette = [

  '#D64933',

  '#FA8334',

  '#EA9010',

  '#2D854A',

  '#14591D',

  '#3587A4',

  '#23B5D3',

  '#70587C',

  '#573280',

  '#832232',

  '#DA4167',

  '#E87461'

];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

  noLoop();

}

​

function drawBlock(x, y, a, b, h, colour) {

  const ax = a * cos(30);

  const ay = a * sin(30);

  const bx = b * cos(-30);

  const by = b * sin(-30);

​

  let bottomFrontLeft, bottomFrontRight, bottomBackLeft, bottomBackRight;

​

  if (b < 0) {

    bottomFrontLeft = createVector(x + bx,

      y + by)

    bottomFrontRight = createVector(

      x + ax + bx,

      y + ay + by

    );

    bottomBackLeft = createVector(

      x,

      y

    )

    bottomBackRight = createVector(

      x + ax,

      y + ay

    )

  } else if (a < 0) {

    bottomFrontLeft = createVector(

      x + ax,

      y + ay

    );

    bottomFrontRight = createVector(

      x,

      y

    );

    bottomBackLeft = createVector(

      x + ax + bx,

      y + ay + by

    );

    bottomBackRight = createVector(

      x + bx,

      y + by

    );

  } else {

    bottomFrontLeft = createVector(

      x,

      y

    );

    bottomFrontRight = createVector(

      x + ax,

      y + ay

    );

    bottomBackLeft = createVector(

      x + bx,

      y + by

    );

    bottomBackRight = createVector(

      x + ax + bx,

      y + ay + by

    );

  }

​

  const topFrontLeft = createVector(

    bottomFrontLeft.x,

    bottomFrontLeft.y - h

  )

​

  const topFrontRight = createVector(

    bottomFrontRight.x,

    bottomFrontRight.y - h

  )

​

  const topBackRight = createVector(

    bottomBackRight.x,

    bottomBackRight.y - h

  )

​

  const topBackLeft = createVector(

    bottomBackLeft.x,

    bottomBackLeft.y - h

  )

​

  // top face

  fill(lerpColor(color(colour), color("#050505"), 0));

  quad(

    topFrontLeft.x, topFrontLeft.y,

    topFrontRight.x, topFrontRight.y,

    topBackRight.x, topBackRight.y,

    topBackLeft.x, topBackLeft.y

  );

​

  // left face

  fill(lerpColor(color(colour), color("#050505"), 0.25));

  quad(

    topFrontLeft.x, topFrontLeft.y,

    topFrontRight.x, topFrontRight.y,

    bottomFrontRight.x, bottomFrontRight.y,

    bottomFrontLeft.x, bottomFrontLeft.y,

  );

​

  // right face

  fill(lerpColor(color(colour), color("#050505"), 0.5));

  quad(

    topFrontRight.x, topFrontRight.y,

    bottomFrontRight.x, bottomFrontRight.y,

    bottomBackRight.x, bottomBackRight.y,

    topBackRight.x, topBackRight.y

  );

​

  return {

    top: [topBackLeft, topBackRight, topFrontRight, topFrontLeft],

    bottom: [bottomBackLeft, bottomBackRight, bottomFrontRight, bottomFrontLeft],

  };

}

​

function drawDoor(bottom, a, b, h) {

  const v1 = bottom[1].copy();

  const v2 = bottom[2].copy();

  const v3 = bottom[3].copy();

  const colour = "#3587A4cc";

  const windowH = h * 0.2;

  const doorH = h * 0.4;

  if (random() < 0.5) {

    const doorPos = v3.lerp(v2, 0.4);

    drawBlock(doorPos.x, doorPos.y, a * 0.2, 0.1, doorH, "#05050577")

    stroke("#050505cc")

    let windowPos = v2.lerp(v1, 0.4);

    let windowY = windowPos.y - h * 0.3;

    drawBlock(windowPos.x, windowY, 0.1, a * 0.2, windowH, colour)

    windowY = windowPos.y - h * 0.6;

    drawBlock(windowPos.x, windowY, 0.1, a * 0.2, windowH, colour)

    noStroke();

  } else {

    const doorPos = v2.copy().lerp(v1, 0.4);

    drawBlock(doorPos.x, doorPos.y, 0.1, b * 0.2 * 1.2, doorH, "#05050577")

    stroke("#050505cc")

    let windowPos = v3.lerp(v2, 0.4);

    let windowY = windowPos.y - h * 0.3;

    drawBlock(windowPos.x, windowY, a * 0.2, 0.1, windowH, colour)

    windowY = windowPos.y - h * 0.6;

    drawBlock(windowPos.x, windowY, a * 0.2, 0.1, windowH, colour)

    noStroke();

​

  }

}

​

function drawWindows(bottom, a, b, h) {

  stroke("#050505cc");

  const v1 = bottom[1].copy();

  const v2 = bottom[2].copy();

  const v3 = bottom[3].copy();

  const colour = "#3587A4cc";

  const windowH = h * 0.2;

  let windowPos = v3.lerp(v2, 0.1);

  let windowY = windowPos.y - h * 0.3;

  drawBlock(windowPos.x, windowY, a * 0.2, 0.1, windowH, colour)

  windowY = windowPos.y - h * 0.6;

  drawBlock(windowPos.x, windowY, a * 0.2, 0.1, windowH, colour)

​

​

  windowPos = v3.lerp(v2, 0.7);

  windowY = windowPos.y - h * 0.3;

  drawBlock(windowPos.x, windowY, a * 0.2, 0.1, windowH, colour)

  windowY = windowPos.y - h * 0.6;

  drawBlock(windowPos.x, windowY, a * 0.2, 0.1, windowH, colour)

​

  windowPos = v2.lerp(v1, 0.1);

  windowY = windowPos.y - h * 0.3;

  drawBlock(windowPos.x, windowY, 0.1, a * 0.2, windowH, colour)

  windowY = windowPos.y - h * 0.6;

  drawBlock(windowPos.x, windowY, 0.1, a * 0.2, windowH, colour)

​

​

  windowPos = v2.lerp(v1, 0.7);

  windowY = windowPos.y - h * 0.3;

  drawBlock(windowPos.x, windowY, 0.1, a * 0.2, windowH, colour)

  windowY = windowPos.y - h * 0.6;

  drawBlock(windowPos.x, windowY, 0.1, a * 0.2, windowH, colour)

  noStroke();

}

​

function draw() {

  background("#fffbe6");

  let a = min(width, height) * 0.1;

  let b = a;

  let i = 0;

  let j = 0;

  let hMin = min(width, height) * 0.05;

  let hMax = min(width, height) * 0.1;

​

  for (let y = -100; y <= height + b; y += a * sin(30) * 2) {

    for (let x = -100; x <= width + a; x += a * cos(30) * 2) {

      if ((i + j) % 2 === 0) {

        const h = random(hMin, hMax);

        const {

          top,

          bottom

        } = drawBlock(x, y, a, b * 1.2, h, random(palette) + "cc");

​

        drawWindows(bottom, a, b, h);

        drawDoor(bottom, a, b, h);

      } else {

        drawBlock(x + a * cos(30) * 0.25, y + a * sin(30) * 0.25, a * 0.5, b * 2, 2, "#272727");

        drawBlock(x + a * cos(30) * 0.4, y + a * sin(30) * 0.4, a * 0.05, b * 0.5, 0.01, "#fffbe6");

        drawBlock(x + a * cos(30) * 1.4, y + a * sin(30) * -0.6, a * 0.07, b * 0.5, 0.01, "#fffbe6");

​

        drawBlock(x + a * cos(30) * 0.5, y + a * sin(30) * -0.25, a * 2, b * 0.5, 2, "#272727");

        drawBlock(x + a * cos(30) * 1.24, y + a * sin(30) * -0.1, a * 0.5, b * 0.05, 0.01, "#fffbe6");

        drawBlock(x + a * cos(30) * 2.24, y + a * sin(30) * 0.9, a * 0.5, b * 0.05, 0.01, "#fffbe6");

      }

​

      i++;

    }

    if (i % 2 === 0) {

      i++;

    }

​

    j++;

  }

}

​

function mousePressed() {

  setup();

  draw();

}