Genuary 5: isometric art

let colors=["#af4c24","#8e6438","#c58b31","#768860","#396872","#1b344e"]

let storyHeight= 60

function preload(){

font= loadFont('FamiljenGrotesk-VariableFont_wght.ttf')

}

​

function setup() {

  createCanvas(400, 400); 

  background('#f4f1de') 

  noFill()

  stroke(100)

  for(let x=50; x<=270; x+=storyHeight){

    building(x, 360, floor(random(2,5)), storyHeight)

  }

  textFont(font)

   fill(100)

  strokeWeight(1)

  stroke(100)

  text('1.5', 20, 380)  

}

​

//x, y, marks bottom left corner

function building(x, y, stories, w){

  push()

  translate(x, y)

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

    fill('#f4f1de')

    rect(0, -storyHeight-(storyHeight*i), w, storyHeight)

    let f1=createVector(0, -storyHeight*i)

    let f2= createVector(storyHeight, -storyHeight-(storyHeight*i))

    let s1= createVector(storyHeight, -storyHeight*i)

    let s2= createVector(storyHeight, -storyHeight-(storyHeight*i))

    let w1= createVector(0, -storyHeight-(storyHeight*i))

    let w2= createVector(storyHeight, -storyHeight-(storyHeight*i))

    let inc=0.07

    for(let fi=0.05; fi<1; fi+=inc){

      let p1= p5.Vector.lerp(f1, f2, fi)

      let p2= p5.Vector.lerp(s1, s2, fi)

      inc=  pow(inc, 1.018)

      let p3= p5.Vector.lerp(w1, w2, fi)

      line(p1.x, p1.y, p2.x, p2.y)

      line(p1.x, p1.y, p3.x, p3.y)

    }

  }

  fill(colorMixer(x, colors))

  quad(storyHeight, 0, storyHeight*2, -storyHeight, storyHeight*2, -storyHeight*(stories+1), storyHeight, -storyHeight*stories)

  quad(storyHeight, -storyHeight*stories, storyHeight*2, -storyHeight*(stories+1), storyHeight, -storyHeight*(stories+1), 0, -storyHeight*stories)

  pop()

  fill('#f4f1de')

}

​

function colorMixer(x, colorArray) {

  let c = noise(x/300) * colorArray.length

  let c1 = floor(c)

  let c2 = floor(c + 1) % colorArray.length

  let color1 = colorArray[c1]

  let color2 = colorArray[c2]

  let mix = fract(c)

  let coloring = spectral.mix(color1, color2, mix)

  return coloring

}

​