Ilusão Anim

const CLRS = ["lightblue", "steelblue"]; // "["#550099", "darkred", "purple"]

let svgGrArr;

​

function setup() {

  createCanvas(S=min(windowWidth, windowHeight), S);

  describe("wobbly and rotating circles forming a visual spiral");

  frameRate(30);

​

  stroke(212)

  noFill();

  strokeWeight(2);

}

​

function draw() {

  background(32);

  const centerX = width / 2;

  const centerY = height / 2;

​

  svgGrArr = [];

  for (let clr of CLRS) svgGrArr.push([]);

  for (let i = 20, cI=0; i < 360; i += 15, cI++) {

    let radius = map(i, 0, 360, 0, width * 0.4);

​

    // Círculos ou arcos concêntricos com ondulações

    push();

    const clr = CLRS[cI%CLRS.length]

    stroke(clr)

    translate(centerX, centerY);

    const rot = radians(i) * sin(frameCount/60);

    rotate(rot);

​

    let vtxArr = [];

    beginShape();

    for (let a = 0; a <= TWO_PI; a += TAU/100) {

      let x = cos(a) * radius;

      let y = sin(a) * radius;

      let offset = cos(a * 10 + i * 0.1) * 10; // Efeito ondulado

      vertex(x + offset, y + offset);

      const svgPt = createVector(x + offset, y + offset);

      svgPt.rotate(rot);

      vtxArr.push({x: svgPt.x + centerX, y: svgPt.y + centerY});

    }

    endShape();

    pop();

    svgGrArr[cI%CLRS.length].push(vtxArr);

  }

​

}

​

function keyPressed() {

  // generate svg output

  if (key === "s") {

    saveSVG("epi_wavy_circles.svg.txt");

  }

}