Genuary 5: Isometric Art

let colors = [

  "#D0EFFF", 

  "#E6E6E6", 

  "#3D84A8", 

  "#A8E6CF", 

  "#FFD166", 

  "#FF6B6B", 

  "#F4A261" 

];

​

let mySeed;

​

let offset = 25;

​

function setup() {

  createCanvas(1000, 1000);

  colorMode(HSB, 360, 100, 100);

  rectMode(CENTER);

  fill(100);

  rect(width / 2, height / 2, width);

  mySeed = floor(random(1, 10000000));

  //noLoop();

  ///randomSeed(123456);

}

​

function draw() {

​

  randomSeed(mySeed)

  drawBox(width/2 + offset,height/2 + offset,850,-50);

  let mySize = 200;

​

  noStroke();

​

  for (let xx = mySize; xx <= width - mySize; xx += mySize / 2) {

    for (let yy = mySize; yy <= height - mySize; yy += mySize) {

      push();

      let step = random([40, -40]);

      translate(xx - step / 2, yy - step / 2);

      drawBox(offset,offset, mySize / 1.25, step);

      pop();

    }

  }

​

  for (let xx = mySize; xx <= width - mySize; xx += mySize) {

    for (let yy = mySize; yy <= height - mySize; yy += mySize) {

      push();

      let step = -20;

      translate(xx - step / 2, yy - step / 2);

      drawBox(offset,offset, mySize / 4, step);

      pop();

    }

  }

​

​

}

​

function drawBox(x, y, mySize, step) {

​

  stroke(0);

​

  // tapa abajo

​

  fill(generateColor())

  beginShape();

  vertex(x - mySize / 2, y + mySize / 2);

  vertex(x + mySize / 2, y + mySize / 2);

  vertex(x + mySize / 2 + step, y + mySize / 2 + step);

  vertex(x - mySize / 2 + step, y + mySize / 2 + step);

  endShape(CLOSE);

​

​

  // tapa izquierda 

​

  fill(generateColor())

  beginShape();

  vertex(x - mySize / 2, y - mySize / 2);

  vertex(x - mySize / 2 + step, y - mySize / 2 + step);

  vertex(x - mySize / 2 + step, y + mySize / 2 + step);

  vertex(x - mySize / 2, y + mySize / 2);

  endShape(CLOSE);

​

  fill(generateColor())

  // tapa derecha 

​

  beginShape();

  vertex(x + mySize / 2, y - mySize / 2);

  vertex(x + mySize / 2 + step, y - mySize / 2 + step);

  vertex(x + mySize / 2 + step, y + mySize / 2 + step);

  vertex(x + mySize / 2, y + mySize / 2);

  endShape(CLOSE);

​

  fill(generateColor())

  // tapa arriba 

​

  beginShape();

  vertex(x - mySize / 2, y - mySize / 2);

  vertex(x + mySize / 2, y - mySize / 2);

  vertex(x + mySize / 2 + step, y - mySize / 2 + step);

  vertex(x - mySize / 2 + step, y - mySize / 2 + step);

  endShape(CLOSE);

​

  fill(generateColor())

  rect(x, y, mySize, mySize);

​

​

}

​

function generateColor() {

  let temp = color(colors[floor(random(0, colors.length))]);

  return temp;

}