# Under the Microscope

## Itinerary

• Making Fake Polygons
• Circle Packenings... not!
• Bugs Features!
• 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, y-noi)
}
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, y-mod)
}
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?

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 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)

# 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

# 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?