Kaleidoscope #WCChallenge 250212

mySketch
pal
xxxxxxxxxx
 
/*
  Kaleidoskop #WCCChallenge "Children's Games" 🪀 250212
  https://openprocessing.org/sketch/2541284
  #generativeart #creativecoding #p5js
​
  Dear Raph and creative coding community,
​
  was fun to remember the things i enjoyed as a kid.
  Loved to look in Kaleidoscope and see the patterns change.
  
  Implemented it as drawing lines in a triangle
  (changing by time noise) and saving the triangle as an image.
  Afterwards drawing the image by rotating and mirroring.
  Drawing darkening lines via postprocessing to simulate vignette.
  
  https://de.wikipedia.org/wiki/Kaleidoskop#/media/Datei:Kaleidoscope-abc.jpg
​
  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 pal, BG;
let S, H;
​
function setup() {
  createCanvas(S = min(windowWidth, windowHeight), S);
  frameRate(30);
  describe("kaleidoscope: mirroring lines changing position in triangles by time");
​
  randomSeed(~~random(hour() + minute() + second()));
  noiseSeed(random(1234567));
​
  S /= 7;
  H = S / 2 * sqrt(3);
  pal = random(palettes);
  BG = random(pal);
  noFill();
  strokeCap(PROJECT);
​
  loop();
}
​
function draw() {
  let clr = color(BG);
  let darkenBG = color(red(clr)/6, green(clr)/6, blue(clr)/6)
  background(darkenBG)
  // background(BG);
  fill(BG); noStroke();
  rect(0, 0, width, height);
​
  const shapesImg = getKaleidoscopeImg(35);
  // image(shapesImg, 0, 0)
  
  // evaluate dx and dy for pattern and display them
  const dx = 3 * S;
  const dy = H;
  for (let y = 0, j = 0; y < height; y += dy, j++) {
    for (let x = 0; x < width; x += dx) {
      drawKaleidoscope(shapesImg, x + (j%2 === 0 ? 0 : dx/2), y);
    }
  }
​
  // darken out of center / vignette
  strokeWeight(H);
  stroke(0, 56);
  let l = {x: 2*S, y: -4*H};
  for (i = -6; i < 6; i++) {
    let p = {x: width/2 + i*S, y: height/2};
    for (let j = 0; j < abs(i); j++) {      
      line (p.x-l.x, p.y-l.y, p.x+l.x, p.y+l.y); // /-lines
      line (p.x-l.x, p.y+l.y, p.x+l.x, p.y-l.y); // \-lines
    }
  }
  
  // noLoop();
}
​
function getKaleidoscopeImg(numLines) {
  push();
  clip(() => {
    triangle(
      width / 2 - S / 2, height / 2,
      width / 2, height / 2 - H,
      width / 2 + S / 2, height / 2
    );
  });
​
  strokeWeight(S / 7);
  for (let i = 0; i < numLines; i++) {
    // nX -0.5...0.5
    const n1 = noise(1234, i, frameCount/60)*2-0.5;
    const n2 = noise(2234, i, frameCount/60)*2-0.5;
    const n3 = noise(3234, i, frameCount/60)*2-0.5;
    const n4 = noise(4234, i, frameCount/60)*2-0.5;
    // const nc = noise(223+i/111, 999+i/23, frameCount/60);
    stroke(pal[i%pal.length])
    strokeWeight(10-i);
    line(
      width/2 + (n1-0.5)*S, //      n1(width / 2 - S / 2, width / 2 + S / 2),
      height/2 - n2*H, // n2(height / 2 - H, height / 2),
      width/2 + (n3-0.5)*S, // n3(width / 2 - S / 2, width / 2 + S / 2),
      height/2 - n4*H // n4(height / 2 - H, height / 2)
    );
    
    const n5 = noise(5234, i, frameCount/60)*2-0.5;
    const n6 = noise(6234, i, frameCount/60)*2-0.5;
    stroke(pal[pal.length-i%pal.length-1])
    strokeWeight((6-i/2)*1.5);
    point(width/2 + (n5-0.5)*S, height/2 - (n6)*H);
  }
​
  strokeWeight(1);
  stroke(32, 128);
  noFill()
  triangle(
    width / 2 - S / 2, height / 2,
    width / 2, height / 2 - H,
    width / 2 + S / 2, height / 2
  );
​
  pop();
  
  return get(width / 2 - S / 2, height / 2 - H, S, S);
}
​
function drawKaleidoscope(shapesImg, px, py) {
  for (let i = 0; i < 6; i++) {
    push();
    translate(px, py);
    rotate(i * TAU / 6);
    clip(() => {
      triangle(
        0, 0,
        S / 2, H,
        -S / 2, H
      );
    });
    if (i % 2 === 1) scale(-1, 1); // mirrir every 2nd triangle
    image(shapesImg, -S / 2, 0);
    pop();
  }
}
​
function mouseClicked() {
  if (mouseButton != RIGHT) setup();
}