tenement backyard

let palette = [

  '#D64933',

  '#FA8334',

  '#EA9010',

  '#2D854A',

  '#14591D',

  '#3587A4',

  '#23B5D3',

  '#70587C',

  '#573280',

  '#832232',

  '#DA4167',

  '#E87461',

];

let tenementsColour, side;

​

function setup() {

  side = min(windowWidth, windowHeight)

  createCanvas(windowWidth, windowHeight);

  noStroke();

  noLoop();

  tenementsColour = color(random(palette));

}

​

​

function drawWindows(x, y, h, centerPoint, part) {

  fill("#050505");

  let winH = h / 6;

  let gap = h / 10;

​

  let bl = createVector(x + width / 16, y);

  let br = createVector(x + width / 4 - width / 16, y);

​

  if (part === "vertical") {

    bl = createVector(x, y + height / 16);

    br = createVector(x, y + height / 4 - height / 16);

  }

​

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

    const tl = p5.Vector.lerp(bl, centerPoint, winH);

    const tr = p5.Vector.lerp(br, centerPoint, winH);

​

    beginShape();

​

    vertex(bl.x, bl.y);

    vertex(tl.x, tl.y);

    vertex(tr.x, tr.y);

    vertex(br.x, br.y);

​

    endShape();

​

    bl = p5.Vector.lerp(bl, centerPoint, winH + gap);

    br = p5.Vector.lerp(br, centerPoint, winH + gap);

  }

​

​

  gap += winH * 0.2;

  winH *= 0.8;

​

  let wbl = createVector(x + width / 14, y);

  let wbr = createVector(x + width / 4 - width / 14, y);

​

  if (part === "vertical") {

    wbl = createVector(x, y + height / 14);

    wbr = createVector(x, y + height / 4 - height / 14);

  }

​

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

    fill(lerpColor(tenementsColour, color("#fffbe6"), random()));

    const tl = p5.Vector.lerp(wbl, centerPoint, winH);

    const tr = p5.Vector.lerp(wbr, centerPoint, winH);

​

    beginShape();

​

    vertex(wbl.x, wbl.y);

    vertex(tl.x, tl.y);

    vertex(tr.x, tr.y);

    vertex(wbr.x, wbr.y);

​

    endShape();

​

    wbl = p5.Vector.lerp(wbl, centerPoint, winH + gap);

    wbr = p5.Vector.lerp(wbr, centerPoint, winH + gap);

  }

}

​

function drawBuilding(part, centerPoint, pos) {

  if (part === "horizontal") {

    for (let x = 0; x < width; x += width / 4) {

      fill(lerpColor(tenementsColour, color("#272727"), random(0.5)));

      const h = random(0.5, 0.7);

​

      const bl = pos === "top" ? createVector(x, 0) : createVector(x, height);

      const br = pos === "top" ? createVector(x + width / 4, 0) : createVector(x + width / 4, height);

      const tl = p5.Vector.lerp(bl, centerPoint, h);

      const tr = p5.Vector.lerp(br, centerPoint, h);

​

      beginShape();

​

      vertex(bl.x, bl.y);

      vertex(tl.x, tl.y);

      vertex(tr.x, tr.y);

      vertex(br.x, br.y);

​

      endShape();

​

      drawWindows(bl.x, bl.y, h, centerPoint, part);

​

    }

  } else {

    for (let y = 0; y < height; y += height / 4) {

      fill(lerpColor(tenementsColour, color("#272727"), random(0.5)));

      const h = random(0.5, 0.7);

​

      const bl = pos === "left" ? createVector(0, y) : createVector(width, y);

      const br = pos === "left" ? createVector(0, y + height / 4) : createVector(width, y + height / 4);

      const tl = p5.Vector.lerp(bl, centerPoint, h);

      const tr = p5.Vector.lerp(br, centerPoint, h);

​

      beginShape();

​

      vertex(bl.x, bl.y);

      vertex(tl.x, tl.y);

      vertex(tr.x, tr.y);

      vertex(br.x, br.y);

​

      endShape();

​

      drawWindows(bl.x, bl.y, h, centerPoint, part);

​

    }

  }

}

​

function drawMoon(moonD, centerPoint) {

  const c1 = color("#fff8d6");

  const c2 = color("#fffbe6");

​

  drawingContext.shadowColor = "#fffbe6F0";

  drawingContext.shadowBlur = 100;

​

  for (let d = moonD; d > 0; d -= 10) {

    const val = map(d, 0, moonD, 0, 1);

​

    if (d < moonD) {

      drawingContext.shadowBlur = 0;

    }

​

    fill(lerpColor(c1, c2, val));

​

    circle(centerPoint.x, centerPoint.y, d);

  }

​

}

​

function drawStars() {

  const c1 = color("#fff8d6");

  const c2 = color("#fffbe6");

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

    const c = lerpColor(c1, c2, random())

    drawingContext.shadowColor = "#fffbe6F0";

    drawingContext.shadowBlur = 50;

    fill(c);

    circle(random(width), random(height), side * 0.014);

    drawingContext.shadowBlur = 0;

  }

}

​

function draw() {

  background("#050505");

  const centerPoint = createVector(width / 2, height / 2);

  drawStars();

  drawMoon(side * 0.27, centerPoint)

​

  drawBuilding("horizontal", centerPoint, "top");

  drawBuilding("horizontal", centerPoint, "bottom");

  drawBuilding("vertical", centerPoint, "left");

  drawBuilding("vertical", centerPoint, "right");

​

  describe("View of a tenement backyard at night with moon being the vanishing point");

}

​

function mouseClicked() {

  setup();

  draw();

}