¿Cómo puedo hacer que no pueda usar createCanvas sin procesar, sino a través de un espacio de nombres como p5.createCanvas , mientras que el html aún maneja las dependencias?
index.html
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script> <script language="javascript" type="text/javascript" src="src/app.js"></script> <style> body { padding: 0; margin: 0; } </style> </head> <body> </body> </html> app.js
function setup() { createCanvas(10, 10); } function draw() { background(0); circle(10, 10, 10); }Creo que lo más parecido a lo que está buscando en p5.js es el modo de instancia . Por defecto, p5.js solo exportará globalmente el constructor p5 . Si ha declarado globalmente una función de setup , p5.js exportará globalmente todas sus funciones, propiedades y constantes. Si no desea que el espacio de nombres global se contamine, puede usar la instanciación del modo de instancia, donde declara una función que toma un objeto que contiene todas las funciones, propiedades y constantes de p5 (vea el ejemplo a continuación).
function mySketch(p) { p.setup = function() { p.createCanvas(400, 400); p.background(100); }; p.draw = function() { p.circle(p.mouseX, p.mouseY, 20); }; p.mouseClicked = function() { if (window.createCanvas) { console.log('createCanvas is globally defined.'); } else { console.log('createCanvas is NOT globally defined.'); } } } new p5(mySketch); <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script> <style> body { padding: 0; margin: 0; } </style> </head> <body> </body> </html>