You can drag in a JavaScript file to the canvas. If it is a module, it gets added to the canvas. It uses ES Modules (ESM) by default.
Here's a block that takes a P5.js sketch and renders it in-place.
import { p5 } from "https://cdn.example.com/p5.js"
export default {
// object name. required.
name: "P5",
// inlets are input slots that receives incoming messages.
// default inlets are untyped, accepts every kind of messages.
// using string as an input just defines a
inlets: ['sketch']
setup() {
this.canvas = createElement('canvas')
this.canvas.className = '...'
}
render() {
return this.canvas
}
onMessage(message) {
if (message.inlet === 'sketch' && typeof message.data === 'string') {
this.p5 = p5(message.data, this.canvas)
}
}
cleanup() {
this.p5.destroy()
this.canvas.remove()
}
}
- You can edit the object's code in the browser.
- Or link the file to a filesystem file for live-edits.