Rotating Spiral

canvasanimation

A common optical illusion that is a static image, but appears to move as you look at different parts of the image - first popularised by Akiyoshi Kitaoka, Ritsumeikan University (http://www.ritsumei.ac.jp/~akitaoka/index-e.html). This gist based on a processing-js script at http://www.openprocessing.org/sketch/131928.

13 Oct 2014 by rm-hull

rm-hull/2058361259a6bd764be8

rotating-spiral.cljs

(ns enchilada.rotating-spiral
  (:require
    [jayq.core :refer [show]]
    [enchilada :refer [ctx canvas]]
    [big-bang.core :refer [big-bang]]
    [monet.canvas :refer [fill-style fill ellipse rotate translate save restore fill-rect]]))

(def initial-state {
  :angle 0
  :radius 600
  :speed 1
  :t 0})

(defn update-state [event {:keys [t angle speed radius] :as world-state}]
  (if (< radius 2)
    world-state
    (assoc world-state
        :radius (/ radius (+ 1 (* 0.001 speed)))
        :angle (+ angle (* speed (/ Math/PI 102)))
        :t (inc t))))

(defn render [{:keys [t angle radius]}]
  (->
    ctx
    (save)
    (translate 400 300)
    (rotate angle)
    (fill-style (case (mod t 8)
                  0 :#FFFFFF
                  1 :#D2D200
                  2 :#D2D200
                  3 :#D2D200
                  4 :#000000
                  5 :#3232FF
                  6 :#3232FF
                  7 :#3232FF))
    (ellipse {:x radius :y 0 :rw (/ radius 10) :rh (/ radius 6)})
    (fill)
    (restore)))

(show canvas)
(-> ctx
  (fill-style :lightgrey)
  (fill-rect {:x 0 :y 0 :w 800 :h 600}))

(big-bang
  :initial-state initial-state
  :on-tick update-state
  :to-draw render)