energetic

let palette, circleA, circleB, particles, squareParticles;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  palette = [

    color('#D64933'),

    color('#FA8334'),

    color('#EA9010'),

    color('#2D854A'),

    color('#14591D'),

    color('#3587A4'),

    color('#23B5D3'),

    color('#573280'),

    color('#832232'),

    color('#DA4167'),

    color('#E87461')

  ];

​

  circleA = generateCircle();

  circleB = generateCircle();

  particles = generateParticles(width * height / 10800);

  squareParticles = generateParticles(width * height / 13500);

​

  noFill();

  strokeWeight(min(width, height) / 27);

  rectMode(CENTER);

}

​

function isPointInCircle(p, c) {

  return p.dist(c.pos) < c.d / 2

}

​

function isPointOnCircle(p, c) {

  return abs(p.dist(c.pos) ** 2 - (c.d / 2) ** 2) < c.d;

}

​

function fillIntersection(circleA, circleB) {

  let xMin = max(circleA.pos.x - circleA.d / 2, circleB.pos.x - circleB.d / 2);

  let xMax = min(circleA.pos.x + circleA.d / 2, circleB.pos.x + circleB.d / 2);

  let yMin = max(circleA.pos.y - circleA.d / 2, circleB.pos.y - circleB.d / 2);

  let yMax = min(circleA.pos.y + circleA.d / 2, circleB.pos.y + circleB.d / 2);

​

  let active = false;

​

  for (let y = yMin; y <= yMax; y++) {

    for (let x = xMin; x <= xMax; x++) {

      const p = createVector(x, y);

      const inCircleA = isPointInCircle(p, circleA);

      const inCircleB = isPointInCircle(p, circleB);

      const onCircleA = isPointOnCircle(p, circleA);

      const onCircleB = isPointOnCircle(p, circleB);

​

      if ((onCircleA && inCircleB) || (onCircleB && inCircleA)) {

        stroke(lerpColor(circleA.colour, circleB.colour, 0.5));

        point(x, y);

        active = true

      }

    }

  }

​

  if (active) {

    circleA.active = true;

    circleB.active = true;

  } else {

    circleA.active = false;

    circleB.active = false;

  }

}

​

​

function drawCircle(c) {

  if (c.active) {

    fill(c.colour.levels[0], c.colour.levels[1], c.colour.levels[2], 54);

    stroke(c.colour);

  } else {

    fill("#27272754");

    stroke("#272727")

  }

  circle(c.pos.x, c.pos.y, c.d);

}

​

function generateCircle() {

  const c = random(palette);

  palette.splice(palette.indexOf(c), 1);

​

  const maxVel = min(width, height) / 72;

​

  return {

    pos: createVector(random(width * 1 / 3, width * 2 / 3), random(height * 1 / 3, height * 2 / 3)),

    d: min(width, height) / 3,

    colour: c,

    vel: createVector(random(-maxVel, maxVel), random(-maxVel, maxVel)),

    active: false

  }

}

​

function moveCircle(c) {

  c.pos.add(c.vel);

  if (c.pos.x - c.d / 2 < 0 || c.pos.x + c.d / 2 > width) {

    c.vel.x *= -1;

  }

​

  if (c.pos.y - c.d / 2 < 0 || c.pos.y + c.d / 2 > height) {

    c.vel.y *= -1;

  }

}

​

function generateParticles(n) {

  const particles = [];

​

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

    particles.push({

      pos: createVector(random(width), random(height)),

      vel: createVector(random(-1, 1), random(-1, 1)),

      colour: random(palette)

    });

  }

​

  return particles;

}

​

function moveParticle(p) {

  p.pos.add(p.vel);

  if (p.pos.x < 0 || p.pos.x > width) {

    p.vel.x *= -1;

  }

​

  if (p.pos.y < 0 || p.pos.y > height) {

    p.vel.y *= -1;

  }

}

​

function drawParticle(p) {

  stroke(p.colour.levels[0], p.colour.levels[1], p.colour.levels[2], 77);

  noFill();

  point(p.pos.x, p.pos.y)

}

​

function drawSquareParticle(p) {

  stroke(p.colour.levels[0], p.colour.levels[1], p.colour.levels[2], 177);

  noFill();

  square(p.pos.x, p.pos.y, 1)

}

​

function draw() {

  background("#fffbe6");

  particles.forEach(drawParticle);

  squareParticles.forEach(drawSquareParticle);

  drawCircle(circleA);

  drawCircle(circleB);

  fillIntersection(circleA, circleB);

  moveCircle(circleA);

  moveCircle(circleB);

  particles.forEach(moveParticle);

  squareParticles.forEach(moveParticle);

}

​

function mouseClicked() {

  setup();

  draw();

}