Wave Cubes - OpenProcessing

mySketch
IsoCube
perlin
myDrawing
xxxxxxxxxx
 
let isoCubes, S, noiseFn;
const D = 4, SCL = 3, MAR = 20;
let boundaryPoints;
let svgCircles;
​
function setup() {
  createCanvas(210 * SCL, 297 * SCL);
  noiseFn = mynoise.perlin3; // mynoise.simplex3
  
  S = (~~(min(width, height) / 3) / D) * D;
  boundaryPoints = [    
    { x: MAR, y: MAR },
    { x: width-MAR, y: MAR },
    { x: width-MAR, y: height-MAR },
    { x: MAR, y: height-MAR },
  ];
  
  isoCubes = [];
​
  if (true) {
    
    for (let i = 0; i < 5; i++) {
      const cx = random(100, width-100);
      const cy = random(100, height-100);
      const sze = random(0.35, 1.25) * S;
      isoCubes.push(new IsoCube(cx, cy, sze, D));
    }
    
  } else {
    isoCubes.push(new IsoCube(100, 110, 100, D));
    isoCubes.push(new IsoCube(300, 110, 100, D));
    isoCubes.push(new IsoCube(500, 110, 100, D));
​
    isoCubes.push(new IsoCube(000, 310, 100, D));
    isoCubes.push(new IsoCube(200, 310, 100, D));
    isoCubes.push(new IsoCube(400, 310, 100, D));
    isoCubes.push(new IsoCube(600, 310, 100, D));
​
    isoCubes.push(new IsoCube(100, 510, 100, D));
    isoCubes.push(new IsoCube(300, 510, 100, D));
    isoCubes.push(new IsoCube(500, 510, 100, D)); 
​
    isoCubes.push(new IsoCube(000, 710, 100, D));
    isoCubes.push(new IsoCube(200, 710, 100, D));
    isoCubes.push(new IsoCube(400, 710, 100, D));
    isoCubes.push(new IsoCube(600, 710, 100, D));
​
    isoCubes.push(new IsoCube(100, 910, 100, D));
    isoCubes.push(new IsoCube(300, 910, 100, D));
    isoCubes.push(new IsoCube(500, 910, 100, D));   
  }
  
  // isoCubes.push(new IsoCube(width/2, height/2, S));
  
  frameRate(30);
  loop();
  background(32);
  noFill();
}
​
function draw() {
  background(32);
  
  // clip(() => {rect(0, 0, 600, 1010);});
  
  for (const ic of isoCubes) {
    ic.draw();
  }
  
  stroke(212);
  svgCircles = ``;
  for (let i = 0; i < random(3, 6); i++) {
    const cx = random(100, width-100);
    const cy = random(100, height-100);
    const sze = random(0.35, 1.25) * S / 1.5;
    drawCircle(cx, cy, sze);
  }
  
  console.log(isoCubes);
  noLoop();
} // draw()  
​
​
function drawCircle(cx, cy, r) {
  svgCircles += `<g fill="none" stroke="black" stroke-width="1">\n`;
  svgStr = ``;
  // beginShape();
  for (let i = 0, lx, ly; i < 50; i++) {
    let a = random(TAU);
    const x = cos(a) * r + cx;
    const y = sin(a) * r + cy;
    // vertex(x, y);
    if (i > 0) clipLine({x: lx, y: ly}, {x, y}, boundaryPoints);
    lx = x, ly = y;
  }
  // endShape();
  svgCircles += svgStr;
  svgCircles += `</g>\n`;
  svgStr = ``;
}
​
function drawNoiseGrid() {
  const d = 123;
  const t = frameCount / d;
  noStroke();
  for (let y = 0; y < height; y += S) {
    for (let x = 0; x < width; x += S) {
      const n = noiseFn(x/d, y/d, t);
      fill(n*255);
      rect(x, y, S);
    }
  }
} // drawNoiseGrid()
​
function mousePressed() {
  if (mouseButton != RIGHT && mouseX > width*0.1 && mouseY < width*0.9) {
    setup();
    redraw();
  }
}
​
function keyPressed() {
  if (key == "s") {
    saveSvg("epi_iso_waves.svg.txt");
  }
}
​
function saveSvg(file_name) {
  let svgAll = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">\n`;
  for (const ic of isoCubes) {
    svgAll += `<g fill="none" stroke="black" stroke-width="1">\n`;
    svgStr = ``;
    for (const sh of ic.shapes) {
      clipPts(sh, boundaryPoints, {point: {x: ic.pos.x, y: ic.pos.y}, angle: ic.detail})
    }
    svgAll += svgStr;
    svgAll += `</g>\n`;
  }
  svgAll += svgCircles;
  svgAll += `</svg>`;
  save(svgAll.split("\n"), file_name);
}