Riso Color Separator & Effects
Relevant source files
The following files were used as context for generating this wiki page:
The Riso Color Separator & Effects system is a specialized image processing module designed for Risograph printing. Its primary purpose is to decompose standard color images (RGB/CMYK) into separate grayscale layers corresponding to specific Riso ink drums and to apply artistic effects such as halftoning and posterization that simulate traditional duplication aesthetics.
Within the broader project, this module facilitates the transition from digital artwork to physical multi-drum print runs by providing tools for color isolation, density adjustment, and file export (PNG or ZIP). It integrates with the project's library and image processing pipeline to ensure artwork is optimized for the unique constraints of Risograph duplicators.
Sources: README.md:29-33, app/translations/en.json:426-440
System Architecture and Data Flow
The system operates primarily on the client-side using HTML5 Canvas for real-time manipulation and a dedicated JavaScript library, riso-tools.js, for heavy image processing logic.
Image Processing Pipeline
The flow begins with a user-uploaded image or a file selected from the library. The image is rendered onto an "original" canvas, and its pixel data is extracted to generate various color channels.
The diagram shows the progression from raw image data to processed layers ready for printing.
Sources: app/view/riso_separator.html.php:336-368, app/public/js/riso-tools.js:52-101
Core Components
Color Separation Modes
The system supports four distinct logic paths for separating an image into printable layers:
| Mode | Description | Target Layers |
|---|---|---|
| RGB | Splits into primary light channels. | Red, Green, Blue |
| CMYK | Splits into printing process colors. | Cyan, Magenta, Yellow, Black |
| 2-Drum | Divides a grayscale image by a threshold. | Light Tones, Dark Tones |
| Pipette | Uses a "Magic Wand" approach to isolate a specific color. | User-defined color layer |
Sources: app/translations/en.json:442-445, app/public/js/riso-tools.js:103-145
Image Processing Effects
Artistic effects are applied to individual ImageData objects before they are re-rendered to the UI or exported.
- Halftoning: Converts continuous tones into dot patterns using an ordered dithering approach (Bayer matrix 8x8). This simulates the screen-printing look of physical Riso masters. Parameters include
dotSizeandangle. - Posterization: Reduces the total number of color levels (typically 2-10), creating a flat, layered look suitable for multi-pass printing.
- Contrast/Brightness: Standard adjustments used to prepare the density of an image before separation.
Sources: app/public/js/riso-tools.js:332-416, app/view/image_processor.html.php:218-245
Technical Implementation
The riso-tools.js Library
This library contains the mathematical foundations for color conversion and pixel manipulation.
// Example: Converting RGB to CMYK for separation
function rgbToCmyk(r, g, b) {
let c = 1 - (r / 255);
let m = 1 - (g / 255);
let y = 1 - (b / 255);
let k = Math.min(c, m, y);
// ... logic for normalization
return {c, m, y, k};
}
Sources: app/public/js/riso-tools.js:41-57
Layer Preview and Blending
The system uses a multiply blend mode to simulate how physical inks overlay on paper.
The sequence illustrates how individual color channels are combined in the UI to give the user a realistic print preview.
Sources: app/view/riso_separator.html.php:547-586, app/public/js/riso-tools.js:527-553
Technical Specifications
Riso Ink Definitions
The module maintains a standard dictionary of Riso-specific hex codes to provide accurate on-screen color representation.
| Ink Name | Hex Code |
|---|---|
| Black | #000000 |
| Red | #FF5C5C |
| Blue | #0078BF |
| Fluorescent Pink | #FF48B0 |
| Teal | #00838A |
Sources: app/public/js/riso-tools.js:10-25
Image Processor Integration
While the Separator handles color, the image_processor module provides a specialized environment for pre-separation adjustments, supporting formats like PDF, PNG, and JPEG. It uses a polling mechanism (check_image_progress.php) for long-running server-side PDF operations.
Sources: app/view/image_processor.html.php:831-900
Conclusion
The Riso Color Separator & Effects system provides a robust toolset for converting digital images into Riso-ready layers. By combining real-time canvas-based previews with sophisticated halftoning and color-isolation algorithms in riso-tools.js, it ensures that users can predict and control the final output of multi-drum print runs.
Sources: app/view/riso_separator.html.php:249-270, app/public/js/riso-tools.js:595-610