10 print Wobbly Anni #svg #plotter

mySketch
Triangle
myDrawing
xxxxxxxxxx
 
/* 
  10 print Wobbly Anni, fork of genuary11
  Wobbly function day
  https://openprocessing.org/sketch/2143501
  #genuary13 #genuary #creativecoding #generativeart
  
  https://genuary.art/prompts#jan13
  https://de.wahooart.com/@@/AQREWQ-Anni%20Albers-Fox%20II
  https://piterpasma.nl/articles/wobbly
*/
​
const SCL = 3, SZE = 13 * SCL;
let items, clrs, svgGrps, svgStr;
​
function setup() {
  createCanvas(297 * SCL, 210 * SCL);
  describe("triangles in 90 degree rotation attached to each other forming a pattern with wobbly sizes")
  pixelDensity(1)
  frameRate(30)
  colorMode(HSB, 100);
  clrs = genColors(4, 100);
  clrs = ["gold", "silver", "grey", "steelblue"]
  colorMode(RGB);
  svgGrps = [];
  initItems();
}
​
function initItems() {
  items = [];
  for (let j = 0; j < ~~(height/SZE-1); j++) {
    for (let i = 0; i < ~~(width/SZE-1); i++) {
      // skip 1st, last and horizontal 1/3 and 2/3 to generate 3 columns
      if (i == 0 || j == 0 || i == ~~(width/SZE) || i == ~~(width/SZE/3)  || i == ~~(2*width/SZE/3) || j == ~~(height/SZE)) continue;
      const x = i * SZE;
      const y = j * SZE;
      const clrIdx = random() < 0.16 ? 0 : 1;
      const item  = new Triangle(x, y, SZE, ~~random(4), clrs, clrIdx)
      items.push(item)
    }
  }
}
​
// https://piterpasma.nl/articles/wobbly
function wobbly(x, y, t) {
  return sin(2.31*x+0.11*t+5.95+2.57*sin(1.73*y-0.65*t+1.87)) * sin(3.09*y-0.28*t+4.15+2.31*sin(2.53*x+0.66*t+4.45))+sin(3.06*x-0.18*t+5.16+2.28*sin(2.27*y+0.71*t+3.97))+sin(5.40*y-0.13*t+4.74+2.83*sin(3.71*x+0.96*t+4.42))/2;
}
​
function draw() {
  background(8); // ("beige");
  
  // reset svg groups
  for (let i = 0; i < 4; i++) svgGrps[i] = ``;
  
  // triangles
  for (let i of items) {
    const sze = wobbly(i.x, i.y, millis()/1000/3) * i.s;
    i.update(sze, random() < 0.001)
    // i.show();
  }
  
  // shadow in front
  const posOffset = {x: SZE * 0.3, y: -SZE * 0.2};
  const clrIdxOffset = 2;
  for (let i of items) {
    // i.show();
    i.show(clrIdxOffset, posOffset);
  }
}
​
function mousePressed() {
  if (mouseButton === LEFT && mouseX > width * 0.1 && mouseX < width*0.9) setup();
}
​
function keyPressed() {
  if (key == "s") {
    saveSvg("epi_ani_wobbly.svg.txt");
  }
}
​
function saveSvg(file_name) {
  let svgAll = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">\n`;
  for (let i = 0; i < svgGrps.length; i++) {
    svgAll += `<g fill="none" stroke="${clrs[i]}" stroke-width="1">\n`;
    svgAll += svgGrps[i];
    svgAll += `</g>\n`;
  }
  svgAll += `</svg>`;
  save(svgAll.split("\n"), file_name);
}
​
function genColors(n = 2, space = 100) {
  arr = [];
  const HUE = ~~random(100);
  const DLT = space / n;
  for (let i = 0; i < n; i++) {
    const clr = color((HUE + i * DLT) % 100, random(25, 50), random(35, 65));
    
    const clrRed = (~~red(clr)).toString(16).padStart(2, '0'); // FF
    const clrGreen = (~~green(clr)).toString(16).padStart(2, '0'); // C0
    const clrBlue = (~~blue(clr)).toString(16).padStart(2, '0'); // CB
​
    arr.push('#' + clrRed + clrGreen + clrBlue); // clr
  }
  return arr;
}