Patchies - JS Objects API

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.

#patchies