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?

Under the Microscope

By Ahmad Moussa

Made with Slides.com

Under the Microscope

  • 112

More from Ahmad Moussa