Simple animation demo for big-bang

big-bang-simple-animation.cljs

(ns big-bang.example.cat-animation
  (:require-macros [cljs.core.async.macros :refer [go]])
  (:require [enchilada :refer [canvas ctx canvas-size proxy-request]]
            [cljs.core.async :as async :refer [<!]]
            [dataview.loader :refer [fetch-image]]
            [big-bang.core :refer [big-bang!]]
            [jayq.core :refer [show attr]]))

(defn increment-and-wrap [x]
  (if (< x 800)
    (inc x)
    0))

(defn update-state [event world-state]
  (update-in world-state [:x] increment-and-wrap))

(defn render-scene [ctx img {:keys [x y] :as world-state}]
  (.clearRect ctx 0 0 800 220)
  (.drawImage ctx img x y))

(go
  (let [cat "https://gist.github.com/rm-hull/8859515c9dce89935ac2/raw/cat_08.jpg"
        img (<! (fetch-image (proxy-request cat)))]

    (attr canvas "width" 800)
    (attr canvas "height" 220)
    (show canvas)

    (big-bang!
      :initial-state {:x 0 :y 0}
      :on-tick update-state
      :to-draw (partial render-scene ctx img))))