Plotter #8 Arcs

const BG = "pink", FG = "steelblue"; // const BG = 212, FG = 32;

let svgStr;

let NUM_REVOL;

​

const boundaryPoints = [];

​

function setup() {

  createCanvas(~~(windowHeight/297*210), windowHeight);

  describe("arcs");

​

  noFill();

  stroke(FG);

  strokeWeight(1);

  const MAR = 10;

  boundaryPoints.push(    

    { x: MAR, y: MAR },

    { x: width-MAR, y: MAR },

    { x: width-MAR, y: height-MAR },

    { x: MAR, y: height-MAR },

  );

  // console.log(boundaryPoints);

  loop();

}

​

function draw() {

  background(BG);

  svgStr = "";

  const penArcFuncs = [penArcHori, penArcVert, penArcOutline];

  const num = penArcFuncs.length;

  const pos = createVector(randomGaussian(width/2, 20), randomGaussian(height/2, 20));

  for (let i = 0; i < num; i++) {

    const w = width * 0.01;

    const f = random(1.1, 1.7);

    drawArcs(pos, w, f, penArcFuncs[i]);

  }

  noLoop();

}

​

function drawArcs(pos, w, f, penArcFunc) {

  let r = ~~random(width*0.1, width*0.2);

  let ri = r - w/2;

  let ro = r + w/2;

  const n1S = random(10, 99);

  const n1F = random(100, 499);

  const n2S = random(10, 99);

  const n2F = random(100, 499);

  // stroke(random(["blue","green","red","yellow","purple","cyan","orange"]))

  svgStr += `<g fill="none" stroke="black" stroke-width="1">\n`;

  for (let i = 0; i < 8; i++) {

    // console.log(`ri ${ri}, ro ${ro}, w ${w}, f ${f}`)

    // strokeWeight(ro-ri)

    const d = ri + ro;

    const n1 = noise(n1S + d/n1F);

    const n2 = noise(n2S + d/n2F);

    // arc(pos.x, pos.y, d, d, n2*TWO_PI-n1*QUARTER_PI, n2*TWO_PI+n1*QUARTER_PI);

    // penArcOutline(pos.x, pos.y, ri, ro, n2*TWO_PI-n1*QUARTER_PI, n2*TWO_PI+n1*QUARTER_PI);

    // penArcHori(pos.x, pos.y, ri, ro, n2*TWO_PI-n1*QUARTER_PI, n2*TWO_PI+n1*QUARTER_PI);

    // penArcVert(pos.x, pos.y, ri, ro, n2*TWO_PI-n1*QUARTER_PI, n2*TWO_PI+n1*QUARTER_PI);

    svgStr += `<g>\n`;

    penArcFunc(pos.x, pos.y, ri, ro, n2*TWO_PI-n1*QUARTER_PI, n2*TWO_PI+n1*QUARTER_PI);

    svgStr += `</g>\n`;

    w *= f;

    ri = ro + 4;

    ro = ri + w;

  }

  svgStr += `</g>\n`;

}

​

function penArcOutline(cx, cy, r1, r2, sa, ea) {

  clipArc(cx, cy, 2*r1, 2*r1, sa, ea, boundaryPoints);

  clipArc(cx, cy, 2*r2, 2*r2, sa, ea, boundaryPoints);

  const p1 = polar2cart(cx, cy, sa, r1);

  const p2 = polar2cart(cx, cy, sa, r2);

  clipLine(p1, p2, boundaryPoints)

​

  const p3 = polar2cart(cx, cy, ea, r1);

  const p4 = polar2cart(cx, cy, ea, r2);

  clipLine(p3, p4, boundaryPoints)

}

​

// stripes of arcs different radii

function penArcHori(cx, cy, r1, r2, sa, ea) {

  const dlt = 5;

  for (let r = r1; r <= r2+1; r+=dlt) {

    clipArc(cx, cy, 2*r, 2*r, sa, ea, boundaryPoints);

  }

}

​

// lines with different angles from center

function penArcVert(cx, cy, r1, r2, sa, ea) {

  let d = r1 + r2;

  const cir = PI * d; // circumference 

  const dlt = 5;

  const rd = dlt/cir*TWO_PI;

​

  for (let a=sa; a<=ea+rd/2; a+=rd) {

    const p1 = polar2cart(cx, cy, a, r1);

    const p2 = polar2cart(cx, cy, a, r2);

    clipLine(p1, p2, boundaryPoints)

  }

}

​

​

function polar2cart(x, y, a, r) {

  return {

      x: cos(a) * r + x,

      y: sin(a) * r + y

  };

}

​

function mouseClicked() {

  if (mouseButton !== RIGHT) {

    setup();

  }

}

​

function keyPressed() {

  if (key === 's' || key === 'S') {

    let svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">\n${svgStr}</svg>`;

    save(svg.split("\n"), "epi_arcs.svg.txt");

  }

}