Aspirational Vanity Product

canvasanimation

I found myself in a popular electronics emporium recently; I was transfixed by the on-screen advertisements of a certain manufacturer, which seemed to encourage consumer conformity and consistency - and felt driven to reproduce it's iconography crudely here. See http://bit.ly/1Aqmz3g

20 Dec 2014 by rm-hull
rm-hull/ee53479fc12758a01d1b
aspirational-vanity-product.cljs
(ns enchilada.aspirational-vanity-product
  (:require
    [enchilada :refer [ctx canvas]]
    [big-bang.core :refer [big-bang]]
    [jayq.core :refer [show attr css]]
    [monet.canvas :refer [begin-path move-to line-to clear-rect
                          stroke stroke-style stroke-width stroke-cap
                          save restore translate rotate]]))
 
(def two-pi (* 2 Math/PI))
(def increment (/ two-pi 360))
(def one-third (/ two-pi 3))

(def initial-state {:angle 0})

(defn update-state [event world-state]
  (update-in world-state [:angle] (partial + increment)))  ; 1 degree

(defn draw-shape [ctx]
  (dotimes [i 3]
    (->
      ctx
      (move-to 0 5)
      (line-to 0 95)
      (rotate one-third)))
  ctx)

(defn draw-array [ctx x y n dir angle]
  (dotimes [i n]
    (->
      ctx
      (save)
      (translate (+ x (* i 200)) y)
      (rotate (* dir angle))
      (draw-shape)
      (restore)))
  ctx)

(defn render [{:keys [angle] :as world-state}]
  (->
    ctx
    (clear-rect {:x 0 :y 0 :w 800 :h 600})
    (stroke-style :#444)
    (stroke-cap :round)
    (stroke-width 5)
    (begin-path)
    (save)
    (draw-array  74 -64 5 -1 angle)
    (draw-array -25 110 5 +1 angle)
    (draw-array  75 282 5 -1 angle)
    (draw-array -25 454 5 +1 angle)
    (draw-array  74 626 5 -1 angle)
    (stroke)
    (restore)))

(show canvas)

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