Under the Microscope
Itinerary
 Making Fake Polygons
 Circle Packenings... not!

BugsFeatures!  Buffer Shenanigans
 Final Touches
Microcosm
~ A wondrous tiny world. A universe in miniature. ~
To Deform a Circle 1
Drawing a circle
// Placing 50 points
// around the circumference of a circle
beginShape()
for(let a = 0; a < TAU; a+=TAU/50){
let x = 200 + 100 * cos(a)
let y = 200 + 100 * sin(a)
vertex(x, y)
}
endShape(CLOSE)
To Deform a Circle 2
Deforming with Perlin Noise
beginShape()
for(let a = 0; a < TAU; a+=TAU/50){
let x = 200 + 100 * cos(a)
let y = 200 + 100 * sin(a)
let noi = map(noise(x * 0.02, y * 0.02),0,1,10,10)
vertex(x+noi, ynoi)
}
endShape(CLOSE)
To Deform a Circle 3
Deforming with a Sine
// Placing 50 points
// around the circumference of a circle
beginShape()
for(let a = 0; a < TAU; a+=TAU/50){
let x = 200 + 100 * cos(a)
let y = 200 + 100 * sin(a)
let mod = sin(y*0.01+a) * 10
vertex(x+mod, ymod)
}
endShape(CLOSE)
Not a new Idea
Something back from 2022
Domain Warping
They see me warpin, they hatin
1. Displacing vertices with noise
2. Modulating one noise with another
Periodic Function
Why?
 Visually more interesting than perfect circles
 Everyone loves blobs
 ...
 Profit?
Cranking It
Domain Warping
(Broken) Circle Packing
Actually had to go back and read my code to figure out what I was doing
The Usual Approach
for(let n = 0; n < numAttempts; n++){
let randX = random(PAD, 800  PAD)
let randY = random(PAD, 800  PAD)
let randR = random(5, 50)
let placeable = true
for(let i = 0; i < circles.length; i++){
let otherC = circles[i]
let d = dist(
otherC.x, otherC.y,
randX, randY
)
if(d < otherC.rad + randR + 5){
placeable = false
}
}
if(placeable){
circles.push(
{x: randX, y: randY, rad: randR}
)
}
}
In this Case...
 Fake Circles > Polygons
 Checking for Intersections > Segment Intersection
 Is one shape contained within another?
Why are shapes overlapping?
Making Circles Overlap
Fake... fake Circles
What's actually going on under the hood
If we don't cheat
Biootifullll! (But takes forever)
No Idea what's going on here but also looks kinda cool
Buffer Shenanigans
aka More is More
buff1 = createGraphics(WID, HEI)
buff2 = createGraphics(WID, HEI)
See Through Effect
 Draw first packing on buff 1
 Draw second packing on buff 2 + clip the first buffer as an image
Buff 1
Buff 2
Buff 1+2
Earlier Iterations of this Idea
Cool Effect
Aesthetics?
Transparent fills on some of the see through circles  kind of like membranes.
Little dashed lines around the circumference of the blobs.
Thanks
Is this where I shill my NFTs?
Under the Microscope
By Ahmad Moussa
Under the Microscope
 94