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…

lissajous-curve.cljs

(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!))

LISSAJOUS.md

Some predefined examples:

• Buttercup

• Orchid

• Rose

• Snowdrop

• Spiragraph

• Dots - try setting the persistence to 99