Skip to content

Instantly share code, notes, and snippets.

@nrfm

nrfm/main-gist.cljs

Last active August 20, 2020 16:58
Show Gist options
  • Save nrfm/959c20b61d30dd228fa9044db1a0795f to your computer and use it in GitHub Desktop.
Save nrfm/959c20b61d30dd228fa9044db1a0795f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nrfm revised this gist Aug 20, 2020. 1 changed file with 30 additions and 57 deletions.
    87 changes: 30 additions & 57 deletions main-gist.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -1,62 +1,35 @@
    (defn xy [e]
    [] (let [rect (.getBoundingClientRect (.-target e))]
    [:div "render ok! updated"] [(- (.-clientX e) (.-left rect))
    ) (- (.-clientY e) (.-top rect))]))
    (defn tone-sketch
    [{:keys [sketch]}]
    [h/js-loader {:scripts {#(and (exists? js/Tone))
    (str "https://cdnjs.cloudflare.com/ajax/libs/tone/14.5.40/Tone.js")}
    :loading [:div "Loading..."]
    :loaded [:div sketch]}])

    (defn mouse-handlers [drawing]
    (let [pen-down? (r/atom false)
    start-path
    (fn start-path [e]
    (when (not= (.-buttons e) 0)
    (reset! pen-down? true)
    (let [[x y] (xy e)]
    (swap! drawing conj [x y x y]))))
    continue-path
    (fn continue-path [e]
    (when @pen-down?
    (let [[x y] (xy e)]
    (swap! drawing (fn [lines]
    (let [last-line-idx (dec (count lines))]
    (update lines last-line-idx conj x y)))))))
    end-path
    (fn end-path [e]
    (when @pen-down?
    (continue-path e)
    (reset! pen-down? false)))]
    {:on-mouse-down start-path
    :on-mouse-over start-path
    :on-mouse-move continue-path
    :on-mouse-up end-path
    :on-mouse-out end-path}))
    (defn sketch
    []
    (let [synth (.toMaster (.chain (new js/Tone.Synth)))
    play (fn [i]
    (.triggerAttackRelease synth i "8n"))]
    [:div

    (defn paths [drawing]
    (into
    [:g
    {:style {:pointer-events "none"}
    :fill "none"
    :stroke "black"
    :stroke-width 4}]
    (for [[x y & more-points] @drawing]
    [:path {:d (str "M " x " " y "L "(string/join " " more-points))}])))
    [:div.pa5
    (for [i ["c4" "d4" "e4" "f4" "g4" "a4" "b4b" "c5"]]
    [ant/button {:on-mouse-down #(play i)} i]
    )]]))

    (defn scribble3 [attrs drawing]
    [:svg
    (merge-with merge attrs
    {:width "100%"
    :height 400
    :style {:border "1px solid"
    :box-sizing "border-box"
    :cursor "crosshair"}})
    [paths drawing]])
    (defn sketch-2
    []
    (let [synth (.toMaster (.chain (new js/Tone.Synth)))
    play (fn [i]
    (.triggerAttackRelease synth i "8n"))]
    [:div
    [:div.pa5
    (for [i ["c2" "d2" "e2" "f2" "g2" "a2" "b2b" "c2"]]
    [ant/button {:on-mouse-down #(play i)} i]
    )]]))

    (defn scribble-widget [& {:keys [ratom]}]
    (let [
    handlers (mouse-handlers ratom)]
    [scribble3 handlers ratom]))
    [:div
    [:p "Example of loading a js library using js-loader."]
    [tone-sketch {:sketch [sketch]}]
    [tone-sketch {:sketch [sketch-2]}]]

    (def my-drawing4 (r/atom []))
    (def my-drawing5 (r/atom []))

    [:div
    [scribble-widget :ratom my-drawing4 :mouse-handlers (mouse-handlers my-drawing4) ]
    [scribble-widget :ratom my-drawing5 :mouse-handlers (mouse-handlers my-drawing5) ]]
  2. nrfm revised this gist Aug 20, 2020. 1 changed file with 62 additions and 1 deletion.
    63 changes: 62 additions & 1 deletion main-gist.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,62 @@
    [:h1 "NEW GIST"]
    (defn xy [e]
    [] (let [rect (.getBoundingClientRect (.-target e))]
    [:div "render ok! updated"] [(- (.-clientX e) (.-left rect))
    ) (- (.-clientY e) (.-top rect))]))

    (defn mouse-handlers [drawing]
    (let [pen-down? (r/atom false)
    start-path
    (fn start-path [e]
    (when (not= (.-buttons e) 0)
    (reset! pen-down? true)
    (let [[x y] (xy e)]
    (swap! drawing conj [x y x y]))))
    continue-path
    (fn continue-path [e]
    (when @pen-down?
    (let [[x y] (xy e)]
    (swap! drawing (fn [lines]
    (let [last-line-idx (dec (count lines))]
    (update lines last-line-idx conj x y)))))))
    end-path
    (fn end-path [e]
    (when @pen-down?
    (continue-path e)
    (reset! pen-down? false)))]
    {:on-mouse-down start-path
    :on-mouse-over start-path
    :on-mouse-move continue-path
    :on-mouse-up end-path
    :on-mouse-out end-path}))

    (defn paths [drawing]
    (into
    [:g
    {:style {:pointer-events "none"}
    :fill "none"
    :stroke "black"
    :stroke-width 4}]
    (for [[x y & more-points] @drawing]
    [:path {:d (str "M " x " " y "L "(string/join " " more-points))}])))

    (defn scribble3 [attrs drawing]
    [:svg
    (merge-with merge attrs
    {:width "100%"
    :height 400
    :style {:border "1px solid"
    :box-sizing "border-box"
    :cursor "crosshair"}})
    [paths drawing]])

    (defn scribble-widget [& {:keys [ratom]}]
    (let [
    handlers (mouse-handlers ratom)]
    [scribble3 handlers ratom]))

    (def my-drawing4 (r/atom []))
    (def my-drawing5 (r/atom []))

    [:div
    [scribble-widget :ratom my-drawing4 :mouse-handlers (mouse-handlers my-drawing4) ]
    [scribble-widget :ratom my-drawing5 :mouse-handlers (mouse-handlers my-drawing5) ]]
  3. nrfm created this gist Aug 11, 2020.
    1 change: 1 addition & 0 deletions main-gist.cljs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [:h1 "NEW GIST"]