circles-2
2012. 05. 26.

Inspired by an installation I saw yesterday at Gangnam St., Seoul. Hold down any key and see the circles go amok.

» launch circles-2

p5       = processing
circles  = []
interval = null
repeat_x = 14
repeat_y = 7
ease     = 0.3
elas     = 0.95

setup = ->
  size      $(window).width(), $(window).height()
  frameRate 30
  colorMode HSB, 1.0
  noStroke()

  interval = min min(50,  width() / repeat_x),
                 min(50, height() / repeat_y)
  position = {
    x: (width()  - interval * repeat_x) / 2
    y: (height() - interval * repeat_y) / 2
  }

  for y in [0...repeat_y]
    for x in [0...repeat_x]
      circles.push {
        x: position.x + interval * x + interval * 0.5
        y: position.y + interval * y + interval * 0.5
        r:
          1.2 * TWO_PI * x / repeat_x +
          1.2 * TWO_PI * y / repeat_y
        c: color(((x - y) / repeat_x + 1) % 1, 0.6, 1)
        s: 0
        d: 0
      }

keyPressed = mousePressed = ->
  c.s += random(interval * 3) for c in circles

draw = ->
  background 0

  for c in circles
    rad = p5.frameCount * 0.1 - c.r

    c.ts = interval * (sin(rad) + 1) * 0.5 * 0.3 + interval * 0.2
    c.s += (c.d = (c.ts - c.s) * ease + c.d * elas)

    fill c.c
    ellipse c.x, c.y, c.s, c.s
» capture | close