How can I make it so that I won't be able to use raw createCanvas, but rather through namespace like p5.createCanvas, while still having the dependencies handled by the html?
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);
}
I think the closest thing to what you are looking for in p5.js is instance mode. By default p5.js will only globally export the p5 constructor. If you have globally declared a setup function then p5.js will globally export all of its functions, properties, and constants. If you don't want the global namespace polluted you can use instance mode instantiation, where you declare a function that takes an object that contains all of the p5 functions, properties, and constants (see example below).
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>