Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
In mathematics, a Lissajous curve /ˈlɪsəʒuː/, also known as Lissajous figure or Bowditch curve /ˈbaʊdɪtʃ/, is the graph of a system of parametric equations $x=A\sin(at+\delta)$, $y=B\sin(bt)$, which describe complex harmonic motion. This family of curves was investigated by Nathaniel Bowditch in 1815, and later in more detail by Jules Antoine Li…
(ns big-bang.examples.lissajous
[cljs.core.async :as async]
[dommy.core :refer [insert-after!]]
[enchilada :refer [ctx canvas canvas-size value-of]]
[jayq.core :refer [show]]
[monet.canvas :refer [fill-style fill-rect circle rotate translate]]
[big-bang.core :refer [big-bang]]
[big-bang.components :refer [slider]])
[dommy.macros :refer [sel1 node]]))
(def dimensions
(let [[width height] (canvas-size)]
{:x (quot width -2) :y (quot height -2) :w width :h height}))
(defn box [content]
[:span {:style "width: 250px;
display: inline-block;
border: 1px solid lightgrey;
margin-right: 5px;
margin-bottom: 5px;
padding-left: 5px;
border-radius: 3px;
background: whitesmoke;"} content])
(def initial-state
{:t 0
:ctx ctx
:persistence 97
:scale 295
:clear? false
:rate (value-of :rate 40)
:a (value-of :a 31)
:o1 (value-of :o1 27)
:o2 (value-of :o2 23)})
(defn incoming [event world-state]
(merge world-state event {:clear? (or (:a event) (:o1 event) (:o2 event) (:rate event))}))
(defn tock [event world-state]
(update-in [:t] inc)
(assoc :clear? false)))
(defn degrees->radians [d]
(/ (* (double d) Math/PI) 180.0))
(defn draw-point! [ctx theta rate scale a o1 o2]
(let [t (/ theta rate)
x (* (Math/sin (degrees->radians (* a t))) (Math/cos (degrees->radians (* o1 t))))
y (* (Math/sin (degrees->radians (* a t))) (Math/sin (degrees->radians (* o2 t))))]
(fill-style :red)
(circle {:x (* scale x) :y (* scale y -1) :r 3}))))
(defn render-frame! [{:keys [clear? scale rate a o1 o2 t persistence ctx] :as world-state}]
(let [color (if clear?
(str "rgba(255,255,255," (double (/ (- 100 persistence) 100)) ")"))]
(fill-style color)
(fill-rect dimensions)
(draw-point! t rate scale a o1 o2))))
(let [chan (async/chan)]
(show canvas)
(translate ctx (quot (dimensions :w) 2) (quot (dimensions :h) 2))
(sel1 :#canvas-area)
(insert-after! (node
(box (slider
:id :persistence
:label-text "Persistence:"
:min-value 0
:max-value 100
:initial-value (initial-state :persistence)
:send-channel chan))
(box (slider
:id :rate
:label-text "rate:"
:min-value 1
:max-value 100
:step 1
:initial-value (initial-state :rate)
:send-channel chan))
(box (slider
:id :a
:label-text "a:"
:min-value 0
:max-value 360
:step 1
:initial-value (initial-state :a)
:send-channel chan))
(box (slider
:id :o1
:label-text "o1:"
:min-value 0
:max-value 360
:initial-value (initial-state :o1)
:send-channel chan))
(box (slider
:id :o2
:label-text "o2:"
:min-value 0
:max-value 360
:initial-value (initial-state :o2)
:send-channel chan))]])))
:initial-state initial-state
:receive-channel chan
:on-receive incoming
:on-tick tock
:to-draw render-frame!))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment