Quil sketch on a Reagent canvas

Question

I have an html canvas and would like to display a Quil sketch on it. Most of the Quil examples use defsketch to draw onto a canvas defined on a static html page. I would like to do it onto the canvas within this Reagent component:

(defn my-component []      
  (reagent/create-class
    {:component-did-mount (fn [this]
                            (let [canvas (reagent/dom-node this)
                                  width (.-width canvas)
                                  height (.-height canvas)]
                              (u/log (str "On canvas with width, height: " width " " height))))
     :component-will-mount #(u/log "component-will-mount")
     :display-name "my-component"
     :reagent-render (fn [] [:canvas {:width 400}])}))

(defn graph-panel []
  [v-box
   :gap "1em"
   :children [[my-component]]])

The best documentation I've found for doing this sort of thing is here, but I can't quite work out how to go to the next level and apply it to the canvas above. Actual code for say drawing a line on the above canvas would be great.

In fact a static and always running defsketch would be fine - the difficulty would be having it access this dynamic kind of canvas.

If it can't be done then that would be nice to know, and I'll use Processing.js directly, assuming that's the next best idea.

Answer 1

You should look into Quil's source code and find out how it works. defsketch is just a macro that creates a function, that calls to quil.sketch/sketch, which eventually returns js/Processing.Sketch object. That's the thing you can use with quil.sketch/with-sketch macro, that just uses binding. That means, most of Quil's drawing functions use the quil.sketch/*applet* var.

I suggest the following: Use defsketch as you would normally do in Quil app, but use :no-start true option. Also, use some fixed :host element ID, that you will use in your reagent component, ie. :canvas#wathever

Example repo here: https://github.com/skrat/quil-reagent-test Run with: lein figwheel dev then open http://localhost:3449/

(ns ^:figwheel-always kil.core
  (:require [reagent.core :as reagent :refer [atom]]
            [quil.core :as q :include-macros true]
            [quil.middleware :as m]))

(enable-console-print!)

(def w 400)
(def h 400)

(defn setup []
  {:t 1})

(defn update [state]
  (update-in state [:t] inc))

(defn draw [state]
  (q/background 255)
  (q/fill 0)
  (q/ellipse (rem (:t state) w) 46 55 55))

(q/defsketch foo
  :setup  setup
  :update update
  :draw   draw
  :host "foo"
  :no-start true
  :middleware [m/fun-mode]
  :size [w h])

(defn hello-world []
  (reagent/create-class
    {:reagent-render (fn [] [:canvas#foo {:width w :height h}])
     :component-did-mount foo}))

(reagent/render-component
  [hello-world]
  (. js/document (getElementById "app")))

Answer 2

For Quil to play nicely with Reagent, I think you want a sketch function that (a) creates the canvas and (b) destroys the sketch when Reagent unmounts it. (If you don't destroy the sketch, it will use up CPU cycles.)

I've had a go at that — see https://github.com/simon-katz/nomisdraw/blob/for-quil-api-request/src/cljs/nomisdraw/utils/nomis_quil_on_reagent.cljs .

My code uses a function that is not part of Quil's API, so I've raised an issue in the hope that will be addressed. (See https://github.com/quil/quil/issues/186)

If this works out, I'll turn it into a mini-library.