Genuary 23: Inspired by brutalism

let simplex

let shading

let levels=[]

let storyHeight

let levelAlignments=[]

​

function preload(){

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

}

​

function setup() {

  createCanvas(400, 400); 

  background('#f4f1de') 

}

 function draw(){

   background('#f4f1de')

   translate(0, 50)

  noStroke()

  fill(200)

  quad(100, 250, 200, 225, 300, 250, 200, 275)

  fill(100)

  let lc=createVector(100, 200)

  let ct= createVector(200, 175)

  let rc= createVector(300, 200)

  let cb=createVector(200, 225)

//  quad(lc.x, lc.y, ct.x, ct.y, rc.x, rc.y, cb.x, cb.y)

  //200 is bottom tier, maybe 30y each tier?

  for(y=40; y<=200; y+=40){

    tier(y, noise(y, frameCount/300)*300+100)

  }

  //'left base' start and upper left and go clockwise go in to 40 on the sides, 20 from top

  fill(80)

quad(140, 200, 200, 185, 200, 265, 140, 250 )

//ellipse(200, 265, 10)

  //right base

  fill(90)

  quad(200, 185, 260, 200, 260, 250, 200, 265)

  //quad(200, 175, 100, 200,  200, 225, 300, 200)

  for(let i=0.1; i<1; i+=0.225){

    let lPlacement= p5.Vector.lerp(lc, ct, i)

    let rPlacement= p5.Vector.lerp(rc, ct, i)

    let l2=p5.Vector.lerp(lc, ct, i-0.1)

    let r2=p5.Vector.lerp(rc, ct, i-0.1)

    fill('#f4f1de')

    stroke(100)

    let lyoff=map(i, 0.1, 1, 50, 100)

    //let ryoff= map(i, 0, 0.1, 50, 100)

      fill(200)

    quad(lPlacement.x, lPlacement.y, lPlacement.x+10, lPlacement.y, lPlacement.x+20, lPlacement.y+lyoff+5, lPlacement.x+10, lPlacement.y+lyoff)

    quad(rPlacement.x, rPlacement.y, rPlacement.x-10, rPlacement.y, rPlacement.x-20, rPlacement.y+lyoff+5, rPlacement.x-10, lPlacement.y+lyoff)

      fill('#f4f1de')

    quad(lPlacement.x, lPlacement.y, l2.x, l2.y, l2.x+20, l2.y+lyoff, lPlacement.x+20, lPlacement.y+lyoff+5)

    quad(rPlacement.x, rPlacement.y, r2.x, r2.y, r2.x-20, r2.y+lyoff, rPlacement.x-20, rPlacement.y+lyoff+5)

  } 

  noFill()

  stroke(100)

  textFont(font)

   fill(100)

  strokeWeight(1)

  stroke(100)

  text('1.23', 20, 330) 

}

​

function tier(y, w){

  push()

  translate(200, y)

  fill(100)

  quad(-w/2, 0, 0, -w/8, w/2, 0, 0, w/8)

  fill(100)

  //windowlevel -- need to split it into left windos and right windows, but #s are here (+20 on some y's)

  fill(50)

  quad(-w/2.5, -40, 0, -w/8-40, 0, -w/8-20, -w/2.5, -20)

  fill(80)

  quad(0, -w/8-40, w/2.5, -40, w/2.5, -20, 0, -w/8-20)

  stroke(100)

  fill('#f4f1de')

  quad(-w/2, 0, -w/2, -20, 0, -w/8-20, 0, -w/8)

  quad(w/2, 0, w/2, -20, 0, -w/8-20, 0, -w/8)

​

  pop()

}