Ku Shulan #WCCChallenge 250227

mySketch
Shapes
xxxxxxxxxx
 
/*
  Ku Shulan #WCCChallenge 250227 
  https://openprocessing.org/sketch/2551694
  #generativeart #creativecoding #p5js
​
  Dear Raph and creative coding community,
  
  animated the paper cut work from Ku Shulan based on this image:
  https://a-g-i.s3.eu-west-3.amazonaws.com/HongWei/_1600xAUTO_crop_center-center_75_none/Flowers-world-01.jpg
​
  Used the clip function to display eyes, nose and mouth inside the letters.
  Interesting missing some parts when overlappig both "K" and "S", as direction of points in "S" is opposite.
​
  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 shapesChars, shapesOverlay, SCL;
​
function setup() {
  createCanvas(windowHeight * 0.7, windowHeight); // windowWidth, windowHeight
  describe("colorful paper cuts forming the name Ku Shulan with abstract eyes, nose and mouth moving inside the chars");
  frameRate(60);
  noStroke();
  SCL = min(width, height) / 2;
  shapesChars = [sh1K, sh2U, sh3S, sh4H, sh5U, sh6L, sh7A, sh8N];
  shapesOverlay = [shEye1o, shEye1i, shEye2o, shEye2i, shMouth];
  for (const sh of shapesOverlay) {
    sh.pts = makePts(sh.sze[0], sh.sze[1], ~~random(3, 4)*2+1, sh.sze[2] ? sh.sze[2] : 1);
  }
  shMouth.pts.slice(shMouth.pts.length/2, shMouth.pts.length/2);
  shapesOverlay.push(shHeart);
}
​
function draw() {
  background(212);
  
  drawShapes(shapesChars);
  push()
  clip(() => {drawShapes(shapesChars);}); 
  drawShapes(shapesOverlay, 16, true);
  pop();
}
​
function drawShapes(shapes, detail = 8, movePos = false) {
  for (const sh of shapes) {
    push();
    let dx = 0, dy = 0;
    if (movePos) {      
      dx = (noise(sh.pos[0], sh.pos[1], frameCount/231) - 0.5);
      dy = (noise(sh.pos[1], sh.pos[0], frameCount/321) - 0.5);
    }
    translate((sh.pos[0]+dx) * width, (sh.pos[1]+dy) * height);
    fill(sh.clr);
    beginShape();
    for (let i = 0; i < sh.pts.length; i++) {
      const pt = sh.pts[i];
      dx = (noise(sh.pos[0]+pt[0], i+1, frameCount/231) - 0.5) / detail;
      dy = (noise(sh.pos[1]+pt[1], i+1, frameCount/321) - 0.5) / detail;
      vertex((pt[0]+dx)*SCL, (pt[1]+dy)*SCL)
    }
    endShape();
    pop();
  }
}