Recoloring circles
Made during a live session with students. Wanted to demonstrate rectangle-circle intersactions, ended up creating art instead.
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)
Browse more articles?
← Rhythm 1 Experiments tagged p5 (6/85) Flower 1 →
← Brick wall graffiti Experiments tagged interactive (2/26) Bubbles →
← Rhythm 1 Experiments on this site (6/85) Flower 1 →