Skip to content

Recoloring circles

Made during a live session with students. Wanted to demonstrate rectangle-circle intersactions, ended up creating art instead.

A set of colorful orangle circles, that change color when you drag a rectangle over them

let startX = 0
let startY = 0
let circles = []

function setup() {
  createCanvas(400, 400);
  
  for (let i = 0; i < 200; i ++) {
    circles.push({x: random(400), y: random(400), r: random(30, 60), h: random(50)})
  }
  for (let i = 0; i < 200; i ++) {
    circles.push({x: random(400), y: random(400), r: random(5, 20), h: random(50)})
  }
}

function draw() {
  background(255);
  
  noStroke()
  colorMode(HSB)
  ellipseMode(RADIUS)
  for (let c of circles) {
    fill(c.h, 100, 90, 0.9)
    circle(c.x, c.y, c.r)
  }
  
  noFill()
  rectMode(CORNERS)
  colorMode(RGB)
  stroke(255)
  strokeWeight(3)
  if (mouseIsPressed) {
    rect(startX, startY,  mouseX, mouseY)
  }
}

function mousePressed() {
  startX = mouseX
  startY = mouseY
}

function mouseReleased() {
  let endX = mouseX
  let endY = mouseY
  
  let centerX = (startX + endX) / 2
  let centerY = (startY + endY) / 2
  let halfSizeX = abs(endX - startX) / 2
  let halfSizeY = abs(endY - startY) / 2
  
  let h = random(360)
  for (let c of circles) {
    let dX = abs(c.x - centerX) - halfSizeX
    let dY = abs(c.y - centerY) - halfSizeY
    let d = dist(0, 0, max(dX, 0), max(dY, 0))
    if (d < c.r) {
      c.h = (h + random(70)) % 360
      c.x += random(-10, 10)
      c.y += random(-10, 10)
      c.r += random(-1, 1)
    }
  }
}

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

Experiments tagged p5 (6/85)

Experiments tagged interactive (2/26)

Experiments on this site (6/85)