Bubbles

Every frame, a random point is selected. If it's covered by a bubble, that bubble is popped. Then, a bubble with radius equal to 60% of the maximum non-overlapping circle is added at that point1.

The largest bubble is highlighted.

Hold mouse down to make a new bubble.

Bubbles pop in and out of existence 

let circles = []

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 1000 && circles.length < 400; i ++) {
    addCircle(random(width), random(height))
  }
}

function draw() {
  background(220);
  let maxR = 0
  for (let c of circles) {
    maxR = max(maxR, c.r)
  }
  for (let c of circles) {
    if (maxR == c.r) {
      colorMode(HSB)
      fill(c.r, 100, 100)
      colorMode(RGB)
    } else {
      fill(255)
    }
    circle(c.x, c.y, c.r * 2)
  }
  if (mouseIsPressed) {
    addCircle(min(max(mouseX, 0), width), min(max(mouseY, 0), height))
  }
  addCircle(random(width), random(height))
}

function addCircle(newX, newY) {
  let maxRadius = 400
  for (let i = 0; i < circles.length; i ++) {
    let c = circles[i]
    let distance = dist(c.x,c.y,newX,newY) - c.r
    if (distance < 5) {
      circles.splice(i, 1)
      i --
      continue
    }
    maxRadius = min(maxRadius, distance)
  }
  
  if (maxRadius > 0) {
    let radius = lerp(0, maxRadius, 0.6)
    circles.push({x: newX, y: newY, r: radius})
  }
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/i0ZaQ_wxW)

  1. If the descripion alone makes you think of a mathematical task in stochastic geometry such as "What percentage of the plane is covered by bubbles" or "What is the probability that there exists a bubble of radius larger than R", consider yourself nerdsniped 😇↩︎

Experiments tagged p5 (9/85)

Experiments tagged interactive (3/26)

Experiments on this site (9/85)