Perspective Cubes #WCCChallenge "Only Lines" 250312

mySketch
perspCube
myDrawing
palettes
xxxxxxxxxx
 
/*
  Perspective Cubes #WCCChallenge "Only Lines" 250312 
  https://openprocessing.org/sketch/2575143
  #generativeart #creativecoding #p5js
​
  Dear Raph and creative coding community,
  
  animated perspective cubes moving from bottom to top.
  The original submitted prompt was "only lines. only horizontal or only vertical.".
  So the right and bottom part is horizontal and left and bottom part vertical.
  The lines are drawn with a fix raster within the cuve and an offset between the cubes, 
  so we can see through.
   
  Each scene has a random number of cubes and colors. 
  To avoid flashing, the bg color will be lerped between the scenes.
  
  Not anymore, as bg will adjusted to have more contrast:
  So also an interesting effect will make some cubes invisible, 
  when they have the same color as the background.
  
  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, perspPts, cubesPosSze;
let pal, lastBg;
let svgGrps;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  describe("random number of 3-perspective-point cubes moving from bottom to top drawn as hashes: horizontal for right and bottom part and vertical for left and bottom part");
  frameRate(30);
  S = min(width, height);
  pal = random(palettes);
​
  // points of the three-points-perspective: bottom, left, right
  perspPts = [
    {x: width / 2, y: max(width, height) * 2},
    {x: max(width, height) * -1, y: height / 2},
    {x: max(width, height) * 2, y: height / 2},
  ];
​
  cubesPosSze = [];
  for (let i = 0; i < random(7, 19); i++) cubesPosSze.push({
    x: S/2 * random(-0.4, 0.4) + width/2,
    y: S/2 * random(-0.3, 0.5) + height/2,
    s: S * random(0.15, 0.25),
    c1: ~~random(pal.length),
    c2: ~~random(pal.length),
    i // to have an offset while drawing
  });
​
  if (!lastBg) lastBg = color(pal[0]);
}
​
function draw() {
  // new scene every 75 frames / 2.5 sec
  if (frameCount % 75 === 0) setup();
  
  // draw bg and fade from last palette (to avoid flashing)
  lastBg = lerpColor(lastBg, color(pal[0]), 0.05);
  // background(lastBg); // background(2, 2, 12);
  const adjBg = lerpColor(lastBg, color(2, 2, 12), 0.75);
  background(adjBg); // background(2, 2, 12);
​
  // draw and move the cubes
  svgGrps = [];
  for (let clr of pal) svgGrps.push(`<g id="${clr}" stroke="${clr}" stroke-width="1" fill="none">\n`);
  for (const cb of cubesPosSze) {
    
    drawCube(cb);
    svgStr += `</g>\n`;
  }
}
​
​
function keyPressed() {
  if (key == "s") {
    saveSvg("epi_hashed_cubes.svg.txt");
  }
}
​
function saveSvg(file_name) {
  let svgAll = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">\n`;
  for (const svgGr of svgGrps) svgAll += svgGr + `</g>\n`;
  svgAll += `</svg>`;
  save(svgAll.split("\n"), file_name);
}