Orion4D Generative Paint

https://github.com/orion4d/Orion4D_generative_paint

Orion4D Generative Paint is a custom node for ComfyUI that adds an advanced painting interface directly usable from the browser.

It allows you to create, modify, compose, and export a layered image, with tools similar to a mini graphic editor: layers, brushes, shapes, selections, gradients, fill, palettes, imported images, transformations, and project saving.

The node is designed for creative workflows where you want to quickly prepare:

• a base image;

• a mask;

• a graphic composition;

• a texture;

• a silhouette;

• a workspace for inpainting;

• a visual base before generation or post-processing in ComfyUI.

Project Objective

Generative Paint is not intended to replace Photoshop, Krita, or GIMP.

Its objective is different: to offer a lightweight, local graphic editor integrated into ComfyUI, which can be used quickly while building a workflow.

It is used to create or modify an image without leaving ComfyUI, and then directly send the result back into the node as usable outputs.

Main Features

Integrated Painting Interface

• HTML interface opened in the browser.

• Interactive canvas.

• Zoom.

• View panning.

• Optional grid.

• Snap to grid.

• Predefined formats.

• Manual dimensions.

• Project saving.

• Retrieval of the final image in ComfyUI.

• Project preview directly within the node.

Node Outputs

The node returns several outputs usable in ComfyUI:

OutputDescriptionimageRGB image with background applied according to the chosen settingrgbaRGBA image with preserved transparencymaskMask generated from the transparency

These outputs allow Generative Paint to be used to prepare final images as well as masks or intermediate layers.

Project Management

Generative Paint uses a local project system.

Each saved project contains:

• the layers;

• the canvas parameters;

• the colour information;

• the palettes;

• the imported images;

• the editable composition;

• a PNG image for preview and output.

The formats defined in the node are used to create a new project.
When an existing project is reopened, it retains its original size saved in the project file.

Example:

Project created in 1500 × 1500 px
→ it remains 1500 × 1500 px upon next load,
even if the node is subsequently set to 2048 × 2048 or 16:9.

Layers

The layer system allows you to work in a flexible and non-destructive manner.

Available functions:

• layer creation;

• new layer placed above the active layer;

• duplication;

• deletion;

• merging;

• renaming;

• visibility;

• transparency lock;

• opacity;

• blending modes;

• movement within the stack;

• active layer selection;

• Mute/Solo button to quickly isolate a layer.

Copy, cut, and paste operations automatically create a new layer above the active layer.

Drawing Tools

Generative Paint offers several drawing and composition tools.

Main Tools

• Brush;

• Eraser;

• Fill;

• Shapes;

• Gradient;

• Move;

• Rotate;

• Scale;

• Lasso;

• Rectangle selection;

• Ellipse selection;

• Zoom;

• Pan.

Available Shapes

• line;

• circle;

• ellipse;

• rectangle;

• triangle;

• star;

• hexagon;

• octagon;

• text;

• imported image.

Generative Parameters

The tool relies on a parameter system that allows producing repeated, symmetrical, or random shapes.

Available parameters depending on the tools:

• rotation;

• opacity;

• branches;

• offset;

• line thickness;

• size;

• step;

• smoothing;

• fixed colour;

• random colour;

• colours from palette;

• HSL variation;

• symmetry.

Multiple parameters can be randomised to obtain graphic effects quickly.

Selections

The application has several selection tools:

• lasso;

• rectangular selection;

• elliptical selection.

Available behaviours:

• active selection visible with an animated outline;

• click outside selection to deselect;

• double-click on the selection tool to deactivate the selection;

• deletion of selected pixels;

• copy;

• cut;

• paste onto a new layer;

• move selected pixels;

• rotate selected pixels;

• scale selected pixels;

• move the selection itself by holding right-click;

• add to selection;

• subtract from selection;

• perfect circle;

• perfect square.

Combined selections retain their actual mask.
A lasso subtraction within a rectangular selection thus produces a truly cut-out shape, and not simply a bounding rectangle.

Gradients

The Gradient tool allows applying different types of gradients to the active layer.

Available modes:

• 1 colour to transparent;

• 2 colours;

• 3 colours;

• gradient eraser.

Types of gradients:

• linear;

• radial;

• angular;

• reflected;

• diamond.

Available options:

• thumbnail preview;

• quick colour inversion;

• editing stops;

• selectable colours from the Gradient palette;

• double-click on a colour to open the native picker;

• Existing pixels only option to limit the effect to pixels already present;

• adjustable intensity for eraser mode.

Palettes

Generative Paint includes a system for local palettes.

Available functions:

• main colour palette;

• dedicated gradient palette;

• direct selection from the swatches;

• import palette;

• export palette;

• local saving;

• load saved palettes;

• delete palettes.

Palettes are stored in the folder:

palettes/

User Images

It is possible to use external images in the editor.

User images can be placed in the folder:

user_images/

They can then be used as graphic elements in the interface.

Fonts

The fonts/ folder allows you to add fonts usable by the text tool.

fonts/

Recommended formats:

.ttf
.otf
.woff
.woff2

Custom Effects

Generative Paint can load custom effects from the custom node folder or from the folder:

effects/

Effect scripts can be written in JavaScript or Python depending on their integration.

Examples of recognised names:

effect_example.js
effect_example.py
my_effect.gp_effect.js
my_effect.gp_effect.py

This approach allows extending the editor without directly modifying the application's core.

Installation

1. Close ComfyUI.

2. Copy the custom node folder to:

ComfyUI/custom_nodes/Orion4D_generative_paint/

1. Ensure the structure looks like this:

Orion4D_generative_paint/
├── __init__.py
├── node.py
├── web/
│   ├── generative_paint_comfy.html
│   ├── generative-paint-web.js
│   └── generative_paint_node.js
├── effects/
├── fonts/
├── gradient/
├── palettes/
├── presets/
├── projects/
└── user_images/

1. Restart ComfyUI.

2. Add the node:

Orion4D Generative Paint Projects

into a workflow.

Quick Start

Typical workflow:

1. Add the Orion4D Generative Paint Projects node in ComfyUI.

2. Choose an existing project or select __new__.

3. Define a project name.

4. Choose a predefined or manual format.

5. Click on Open App.

6. Paint, compose, or modify the image.

7. Save from the interface.

8. Return to ComfyUI.

9. The image is updated in the node.

Keyboard Shortcuts

ShortcutActionBBrushGEraserFFillLLassoVMoveRRotateEClear active layerCtrl + CCopy selectionCtrl + XCut selectionCtrl + VPaste onto a new layerCtrl + DDeselectDelete / DelDelete selected pixels or delete the layer depending on contextAlt + selectionAdd to active selectionCtrl + selectionSubtract from active selectionShift + ellipsePerfect circleShift + rectanglePerfect squareHold Right-ClickMove the active selection

Project Folders

web/

Contains the interface and browser-side logic.

web/generative_paint_comfy.html
web/generative-paint-web.js
web/generative_paint_node.js

projects/

Contains the saved projects.

projects/

Each project uses a safe name derived from the name entered in the node.

palettes/

Contains the colour palettes.

palettes/

gradient/

Contains the saved gradients.

gradient/

presets/

Contains the presets used by the interface.

presets/

user_images/

Contains the user images available in the application.

user_images/

fonts/

Contains the fonts added by the user.

fonts/

effects/

Contains custom effects.

effects/

Usage Tips

• Use multiple layers to keep a flexible workflow.

• Duplicate a layer before a major transformation.

• Use selections to limit fills, gradients, and transformations.

• Use Alt + selection and Ctrl + selection to build complex masks.

• Use the Mute/Solo button to quickly isolate a layer while working.

• Keep important projects in the projects/ folder.

• Avoid project names that are too long or contain special characters.

• Reload the project list in the node if a newly created project does not appear immediately.

Development

The project mainly relies on three files:

node.py
web/generative_paint_comfy.html
web/generative-paint-web.js

The following file manages the integration of the node into the ComfyUI interface:

web/generative_paint_node.js

Troubleshooting

The project does not open

Verify that the project file is present in:

projects/

Also check that ComfyUI has been restarted after installation or replacing files.

The browser keeps an old version of the interface

Perform a hard reload:

Ctrl + F5

or clear the browser cache for the ComfyUI local address.

The project does not appear in the list

Click on:

Refresh Projects

in the node.

If necessary, restart ComfyUI.

The image displayed in the node is not up to date

Click on:

Refresh Projects

or relaunch the workflow.

The canvas does not have the expected size

For a new project, the size comes from the node settings.

For an existing project, the size comes from the saved project.
This is intentional to avoid distorting an existing image.

Compatibility

The custom node is designed for ComfyUI and a modern browser.

Recommended browsers:

• Chrome;

• Edge;

• Recent Firefox.

The project was designed for local use with ComfyUI.

Current Limitations

This first version is functional, but certain limits may still exist:

• the interface depends on the browser;

• some shortcuts may be captured differently depending on the system;

• very large canvases may consume a lot of memory;

• custom effects require a correct script structure;

• the project system is local to the custom node folder.