Illusory Cones

canvasanimation

An optical illusion in ClojureScript & big-bang, ported from http://djfav.com/2014/01/24/illusory-cones/ - originally written in javascript by Jon Faviell.

6 Sept 2014 by rm-hull
rm-hull/efee7bef4dcc615728a7
illusory-cones.cljs
(ns big-bang.examples.illusory-cones
  (:require 
    [big-bang.core :refer [big-bang]]
    [jayq.core :refer [show]]
    [enchilada :refer [ctx canvas canvas-size]]
    [monet.canvas :refer [clear-rect circle fill-style fill 
                          save restore translate rotate]]))

(def initial-state
  (let [[width height] (canvas-size)]
    { :t 0
      :radius 200
      :canvas {:x 0 :y 0 :w width :h height}
      :mid-point [(/ width 2) (/ height 2)]}))

(defn update-state [event world-state]
  (update-in world-state [:t] (partial + 0.5)))

(defn draw-circles [ctx num-circles radius]
  (doseq [i (range 1 num-circles)
          :let [color (if (odd? i) :black :white)]]
    (->
      ctx
      (fill-style color)
      (circle {:x (* (Math/sin (/ i 2)) num-circles) 
               :y 0 
               :r (- radius (* i (/ num-circles 2)))})))
  ctx)

(defn render [{:keys [t radius canvas mid-point] :as world-state}]
  (->
    ctx
    (clear-rect canvas)
    (save)
    (translate (first mid-point) (second mid-point))
    (rotate (/ t Math/PI))
    (draw-circles 20 radius)
    (restore)))

(show canvas)

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