Skip to content

tracerstar/comfyui-p5js-node

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

comfyui-p5js-node

Custom node for ComfyUI to run p5js

What this is

A simple proof of concept node to pass a p5js canvas through ComfyUI for img2img generation use.

What this isn't

A full blown p5js editor. That already exists. There's no debugging or error checking here. This node expects a working sketch to be pasted in the input to render to a canvas.

How it works

  • Paste your sketch in the text box and press the "Run Sketch" button.
  • The sketch is saved to the temp folder in a subdirectory, named p5js/sketch.js
  • The iframe gets refreshed with this sketch.
  • Pressing "Queue Prompt" will trigger the node to pass control to the JS to query for the canvas obect in the iframe and then return it back for * processing to an image. The image then gets passed along the pipeline.

Installation and tips

Clone the repository into your ComfyUI custom_nodes directory. You can clone the repository with the command:

git clone https://github.com/tracerstar/comfyui-p5js-node.git

When writing your p5js sketch, make sure you use the basic method of creating a canvas in your setup method. Right now the JS will only grab the canvas object by the default ID p5js adds (defaultCanvas0). This can be improved later on.

function setup() {
    createCanvas(512,512);
}

What's next

  • Some UI improvements (maybe allowing sketches to save and later be picked from a dropdown like the loadImage node)
  • Looking into the feasibility of animation / batch iamges

About

Custom node for ComfyUI to run p5js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published