electric-painter.md

Painter — Electric Clojure

• by Dag in Sweden
• https://github.com/formicagreen/electric-clojure-painter

Screen.Recording.2023-02-20.at.23.43.12.mp4

paint.cljc

(ns app.canvas
  (:require [hyperfiddle.electric :as e]
            [hyperfiddle.electric-dom2 :as dom]))

#?(:clj (defonce vertices (atom [])))
#?(:cljs (def mousedown (atom false)))
#?(:cljs (defonce current-emoji (atom "🐱")))
(def emojis ["🕉" "🧬" "🧿" "🌀" "♻️" "🐍" "🐱" "🫥" "🌰" "🐞" "🐹" "🪙" "🕸" "📞"])

(e/defn Painter []
  (e/client
    (dom/style {:margin "0" :overflow "hidden" :background "lightblue" :user-select "none" :font-size "30px"})
    (dom/element "style" (dom/text "@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }"))
    (dom/div
      (dom/style {:width "100vw" :height "100vh"})
      (dom/on "mousedown" (e/fn [e] (reset! mousedown true)))
      (dom/on "mouseup" (e/fn [e] (reset! mousedown false)))
      (dom/on "mousemove" (e/fn [e] (let [x (.-clientX e) y (.-clientY e)
                                          m (e/watch mousedown)
                                          e (e/watch current-emoji)]
                                      (e/server
                                        (when m
                                          (swap! vertices (fn [v]
                                                            (take 10000
                                                              (conj v [x y e])))))))))
      (dom/div
        (dom/style {:background "#fff5" :backdrop-filter "blur(10px)" :position "fixed"
                    :top "0" :left "0" :height "100vh" :padding "10px"})
        (e/for-by identity [emoji emojis]
          (dom/div
            (dom/style {:cursor "pointer"})
            (dom/on "click" (e/fn [e] (reset! current-emoji emoji)))
            (dom/text emoji)))
        (dom/div
          (dom/style {:cursor "pointer" :padding-top "50px"})
          (dom/on "click" (e/fn [e] (e/server (reset! vertices []))))
          (dom/text "🗑️")))
      (dom/div
        (e/for-by identity [vertex (e/server (reverse (e/watch vertices)))]
          (dom/div
            (dom/text (last vertex))
            (dom/style {:position "absolute"
                        :left (str (first vertex) "px")
                        :top (str (second vertex) "px")
                        :width "10px" :height "10px"
                        :user-select "none" :z-index "-1" :pointer-events "none"})))))))