Skip to content

Instantly share code, notes, and snippets.

# rm-hull/LISSAJOUS.md Last active Aug 29, 2015

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 (:require [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]]) (:require-macros [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] (-> 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))))] (-> ctx (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? :white (str "rgba(255,255,255," (double (/ (- 100 persistence) 100)) ")"))] (-> ctx (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 [:div [:div (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)) ] [:div (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))]]))) (big-bang :initial-state initial-state :receive-channel chan :on-receive incoming :on-tick tock :to-draw render-frame!))
to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.