Quil esquisse sur un canevas Reagent

Question

J'ai un canevas html et j'aimerais y afficher une esquisse Quil. La plupart des exemples Quil utilisent defsketch pour dessiner sur un canevas défini sur une page html statique. Je voudrais le faire sur la toile dans ce composant réactif:

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

La meilleure documentation que j'ai trouvé pour faire ce genre de chose est here, mais je ne peux pas tout à fait de trouver comment aller à la niveau suivant et appliquez-le sur la toile ci-dessus. Le code réel pour dire que dessiner une ligne sur la toile ci-dessus serait génial.

En fait, un defsketch statique et fonctionnant toujours serait bien - la difficulté serait d'avoir accès à ce type de toile dynamique. Si cela ne peut pas être fait, ce serait bon à savoir, et j'utiliserai directement Processing.js, en supposant que ce soit la meilleure idée suivante.

Answer 1

Vous devriez regarder dans le code source de Quil et découvrir comment cela fonctionne. defsketch est juste une macro qui crée une fonction, qui appelle à quil.sketch/sketch, qui retourne finalement l'objet js/Processing.Sketch. C'est la chose que vous pouvez utiliser avec la macro quil.sketch/with-sketch, qui utilise simplement binding. Cela signifie que la plupart des fonctions de dessin de Quil utilisent la variable quil.sketch/*applet*.

Je suggère ce qui suit: Utilisez defsketch comme vous le feriez normalement dans l'application Quil, mais utilisez l'option :no-start true. En outre, utilisez un ID d'élément :host fixe, que vous utiliserez dans votre composant de réactif, par exemple. :canvas#wathever

repo Exemple ici: https://github.com/skrat/quil-reagent-test Exécuter avec: lein figwheel dev puis ouvrez 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

Pour Quil jouer bien avec le réactif, je pense que vous voulez une fonction sketch que (a) crée la toile et (b) détruit l'esquisse lorsque le réactif le démonte. (Si vous ne détruisez pas l'esquisse, il utilisera des cycles CPU.)

J'ai déjà essayé - voir https://github.com/simon-katz/nomisdraw/blob/for-quil-api-request/src/cljs/nomisdraw/utils/nomis_quil_on_reagent.cljs. Mon code utilise une fonction qui ne fait pas partie de l'API de Quil. J'ai donc soulevé un problème dans l'espoir d'y remédier. (Voir https://github.com/quil/quil/issues/186)

Si cela fonctionne, je vais le transformer en une mini-bibliothèque.