Estoy tratando de integrar un p5js con Vaadin. El objetivo es conectar la biblioteca p5js y mi p5js Sketch también en el componente de vista de Vaadin. Por lo tanto, podría iniciar y renderizar mi p5js Sketch en el lado del cliente y referirme a alguna lógica en el lado del servidor.

Como me di cuenta una vez que se cargó la biblioteca p5js, se iniciaría automáticamente (la biblioteca p5js es un archivo de script con una función principal dentro de los corchetes redondos) y capturaría mis funciones "configuración ()" y "dibujar ()" de boceto. Y así es exactamente como funciona si hago una página html vacía y conecto scripts allí con etiquetas.

En Vaadin usé la anotación @JavaScript para ambos scripts e inicié localhost pero no pasa nada. El boceto no se inicia. Hay una prueba "console.log ()" dentro de la función "setup ()" que tampoco funcionará.

Además, de alguna manera no puedo acceder a las funciones del boceto desde la consola del navegador (ni solo "setup()", ni "window.setup()", ni "p5.setup() fit") pero con una pequeña modificación de código puedo hacerlo. coloque mi código de boceto dentro de "window.ns={// my code}" Puedo consultarlo a través de "window.ns..." en la consola. Así que estoy bastante seguro de que los bocetos están cargados con la página.

¿Qué me estoy perdiendo?

Aquí está la clase de vista de Vaadin que hice (Java):

 @Route(value = "/MyView") @JavaScript("p5.js") @JavaScript("sketch.js") public class MyView extends VerticalLayout { public MyView() { } }

Aquí está el código de Sketch (JavaScript):

 function setup () { console.log(`test message`); createCanvas(400, 400); } function draw () { background(220); }

No hay ningún mensaje de error relacionado con el problema. La consola está en silencio.

Actualizar:

También podría ser útil si alguien con experiencia mira el código de la biblioteca de alto nivel para descubrir cómo comienza: código de la biblioteca de alto nivel