Estoy usando jQuery para agregar un div a una página que luego me gustaría usar como ubicación para el contenido producido por otro script (en este caso, p5). Funcionará bien si asigno incluir un div estático con id='p5canvas' pero cuando uso jQuery para agregar contenido dinámico (ver más abajo), no sucede nada y no entiendo por qué. ¿Alguien puede explicar en qué me estoy equivocando/qué falta?
principal.php
<html> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script> <!-- and other stuff--> <button class="continueButton" id="btn3" value="blah"> Blah</button> <!-- and other stuff--> </html>jQuery.js
$("#btn3").click(function(){ $("#contentbox3").load("graphic2.html"); $.getScript("animatebug.js");//a p5 animation });gráfico2.html
<div id="p5canvas"></div>animatebug.js
function setup(){ createCanvas(400, 400); background(200,100,0); img = loadImage("images/bug_small.gif"); const myCanvas = createCanvas(400, 400); myCanvas.parent('p5canvas'); image(img, 0, 0); } function draw(){ background(200,100,0); image(img, 100, 100); }El orden de ejecución es realmente importante aquí, y ahí es donde las cosas van mal. La secuencia de comandos p5 en su encabezado está buscando una función de setup() para llamar en un momento en que aún no ha cargado su elemento de destino <div id="p5canvas"/> o su archivo animatebug.js que contiene la función.
Debe asegurarse de que ambos eventos sucedan (html cargado y secuencia de comandos cargada) y luego puede ejecutar la secuencia de comandos correctamente.
Puede controlar cuándo se llaman las funciones p5 utilizando el modo de instancia p5 .
const animateBug = function(p) { let img; p.setup = function() { const myCanvas = p.createCanvas(400, 400); p.background(200, 100, 0); img = p.loadImage("https://www.gravatar.com/avatar/ddffc30b6adba9c402d2f6d8902c47fb?s=64&d=identicon&r=PG&f=1"); myCanvas.parent('p5canvas'); p.image(img, 0, 0); } p.draw = function() { p.background(200, 100, 0); p.image(img, 100, 100); } }Luego ejecutas esto llamando
new p5(animateBug); Lo más probable es que desee llamar a new p5(animateBug); en su jQuery para que pueda asegurarse de que load() y getScript() hayan terminado primero. Pero no soy un jQuery pro, así que no puedo ayudarte con esa parte.