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?

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?