Krater #WCCChallenge "Erosion" 250221

/*

  Krater #WCCChallenge "Erosion" 250221 

  https://openprocessing.org/sketch/2551694

  #generativeart #creativecoding #p5js

​

  Dear Raph and creative coding community,

  erosion after a lava eruption.

  Single bars will lerp from a given size and color to the destination.

  Moving mouse to the right border will fade out the colors into night.

​

  Join the Birb's Nest Discord for friendly creative coding community

  and future challenges and contributions: https://discord.gg/S8c7qcjw2b

  WCCC-Contributions: https://openprocessing.org/curation/78544

*/

​

let S, pal, polys;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  S = min(width, height);

  describe("rectangle blocks oriented to the center of a circle of different heights");

  frameRate(60);

  pal = random(palettes);

  polys = [];

  insertBlock();

}

​

function draw() { 

  background(2, 2, 12);

  noStroke();

  noFill();

  orbitControl();

  lights();

  pointLight(color(255, 192+32*sin(frameCount/23), 192+32*cos(frameCount/32)), -4*S, 4*S, sin(frameCount/123)*2*S);

  spotLight(color(255), createVector(-4*S,4*S, 0), createVector(1,-1,0), PI / 3, 50)

  specularMaterial(255);

  shininess(90);

  metalness(90);

  // rotateX(-(sin(frameCount/123)+1)/3)

  rotateX(-0.43-100/(frameCount+100))

  // rotateX(map(mouseY, 0, height, 0, 1)*-QUARTER_PI)

  // rotateY(-sin(frameCount/123)*HALF_PI)

  rotateY(map(mouseX, 0, width, -1, 1)*HALF_PI)

  translate(0, +height/6, 0);

  // insert block

  if (frameCount % 1 === 0) for (let i = 0; i < 9; i++) insertBlock(min(width, height)/2);

  // clear and ground

  push();

  rotateX(HALF_PI)

  fill(0, 0, 8);

  circle(0, 0, height*1.1)

  pop();

​

  // draw blocks

  fill("rgba(255,140,0,0.25)")

  for (let p of polys) {

    p.update();

    p.show();

  }

}

​

function insertBlock(MAX_L = 100) {

  const a = random(TWO_PI);

  const l = (frameCount%600)/600*MAX_L; // random(MAX_L);

  const wid = ~~random(10, 15); // width

  const dep = ~~random(10, 35); // depth

  const hf = (sin(l/MAX_L*10/PI)+sin(l/MAX_L*108/PI)*0.5)/1.6+0.12; // map(l, 0, MAX_L, 1, 0.1)

  const hgt = max(10, ~~random(10, 100) * hf); // height

  // console.log(`a ${nf(a, 0, 2)}, l ${nf(l, 0, 2)}, w ${nf(wid, 0, 2)}, d ${nf(dep, 0, 2)}, h ${nf(hgt, 0, 2)}`);

  const x = cos(a) * (l);

  const y = sin(a) * (l);

​

  const rotA = random(0.7); // random() < 0.9 ? 0 : random(-0.5, 0.5);

  const vecD = createVector(x, y).rotate(rotA).normalize().mult(dep/2);

  const vecW = vecD.copy().rotate(HALF_PI).normalize().mult(wid/2);

  const CLRS = pal; // ["pink", "purple", "darkred", "darkorange", "cyan", "azure"];

  const n = noise(a, l/MAX_L, frameCount/123); // edges of array will be rarely chosen

  const clr = color(CLRS[~~(n*CLRS.length)]);

  clr.setAlpha(160);

  const ptsArr = [];

  ptsArr.push({x: x+vecD.x+vecW.x, y: y+vecD.y+vecW.y});

  ptsArr.push({x: x-vecD.x+vecW.x, y: y-vecD.y+vecW.y});

  ptsArr.push({x: x-vecD.x-vecW.x, y: y-vecD.y-vecW.y});

  ptsArr.push({x: x+vecD.x-vecW.x, y: y+vecD.y-vecW.y});

​

  const initH = (1-l/MAX_L)*500; // initial hight before erosion

  const newPoly = new Polygon(hgt, ptsArr, clr, max(initH, hgt*2));

  if (newPoly.intersects(polys)) return false;

  polys.push(newPoly);

  return true;

}

​

function mousePressed() {

  if (mouseButton === LEFT) {

    if (isLooping())  {

      noLoop()

    } else {

      loop();

    }

  }

}