fractalkitty looking for math? fractalkitty.com

weekly creative coding

arcs in motion

#random#trig#color#interactive#animation#wcc

pointsnPointscolorsarcMakercolorPalette

let points = [];
let nPoints = 10;
let colors = [];
function setup() {
  nPoints = 100;
  createCanvas(windowWidth, windowHeight);
  r = min(width / 2.5, height / 2.5) - random(20, 100);
  colorPalette();
  points = [];
  for (let i = 0; i < nPoints; i++) {
    points[i] = {
      x1: r,
      y1: r,
      c1: floor(random(0, nPoints - 0.0001)),
      c2: floor(random(0, nPoints - 0.0001)),
      c3: floor(random(0, nPoints - 0.0001)),
      color1: floor(random(1, colors.length - 0.0001)),
      color2: floor(random(1, colors.length - 0.0001)),
      arcColor1: floor(random(1, colors.length - 0.0001)),
      arcColor2: floor(random(1, colors.length - 0.0001)),
      arcColor3: floor(random(1, colors.length - 0.0001)),
      r: random(10, width / 5),
      t: random(-1, 1),
      x: r,
      y: 0
    };
  }
  background(colors[colors.length - 1]);
}
function draw() {
  translate(width / 2, height / 2);
  t = frameCount / 400;
  rotate(t / 1.5);
  strokeWeight(0.25);
  c = colors[0];
  c.setAlpha(10);
  background(c);
  fill(255, 255, 255, 1);
  circle(0, 0, r * 2);

  for (let i = 0; i < nPoints; i++) {
    points[i].x = points[i].x1 * cos(points[i].t * t);
    points[i].y = points[i].y1 * sin(points[i].t * t);

    arcMaker(points[i], points[points[i].c1], colors[points[i].arcColor1]);
    arcMaker(points[i], points[points[i].c2], colors[points[i].arcColor2]);
    arcMaker(points[i], points[points[i].c3], colors[points[i].arcColor3]);
  }
  strokeWeight(3);
  for (let i = 0; i < nPoints; i++) {
    x = points[i].x;
    y = points[i].y;
    fill(colors[points[i].color1]);
    stroke(colors[points[i].color2]);
    circle(x, y, 5);
  }
}

function arcMaker(p1, p2, colorArc) {
  d = dist(p1.x, p1.y, p2.x, p2.y);

  dx = p1.x - p2.x;
  dy = p1.y - p2.y;
  if (p1 != p2) {
    if (p1.y <= p2.y) {
      angle1 = -acos(dx / d);
    } else {
      angle1 = acos(dx / d);
    }

    noFill();

    stroke(colorArc);
    strokeWeight(1);
    arc(p1.x - dx / 2, p1.y - dy / 2, d, d, angle1, angle1 + PI);
    strokeWeight(0.25);
    arc(p1.x - dx / 2, p1.y - dy / 2, d, d, angle1 + PI, angle1 + PI * 2);
  }
}
function colorPalette() {
  nColors = 10;
  r1 = random(220, 255);
  g1 = random(220, 255);
  b1 = random(220, 255);
  r2 = random(0, 80);
  g2 = random(0, 80);
  b2 = random(0, 80);
  for (let i = 0; i < nColors; i++) {
    colors[i] = color(
      r2 + (i * (r1 - r2)) / 10 + random(-20, 20),
      g2 + (i * (r1 - g2)) / 10 + random(-20, 20),
      b2 + (i * (r1 - b2)) / 10 + random(-20, 20),
      50
    );
  }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function mousePressed() {
  if (nPoints <= 5) {
    nPoints = 100;
  } else {
    nPoints -= 3;
  }
  colorPalette();
}