p5.riso@home

This project incorporates code from p5.Riso.js (by Sam Lavigne and Tega Brain) and principles from riso@home (by Jeffrey Warren) to mimic a risograph print effect on a home color printer. It pretends that the four home printer colors (CMYK: cyan, magenta, yellow, black) are the four risograph inks available, and uses code to layer them one at a time using halftone dots.

Here is an example of the printed before and after from one of my comics:

The default parameters are what I used to create the above effect. But you can adjust the parameters to create some wild effects:

To make the process more fun, I added a web interface for adjusting basic parameters and borrowed the retro design from Web 3.1 (by Ian Renton). Feel free to make further adjustments and play with the code itself — all of the custom code is in the index.html file.

Why I made this

I stumbled across the idea to mimic Risograph print effects on a home printer during one of the COVID-19 lockdowns when I found Jeffrey Warren’s riso@home project. In that project, Jeffrey uses Public Lab's Image Sequencer to apply multiple filters to a digital photo or illustration to replicate a Risograph look and feel. Then he printed the image on a home colour laser printer, printing only one colour at a time.

I built on top of Jeffrey’s work by creating a “one-click” tool that automates the process of applying Risograph effects to a digital image. To do that I used p5.riso, a code library that helps artists prepare image files for Risograph printers, which I adjusted for use on home printers by pretending that the four home printer colours (CMYK: cyan, magenta, yellow, black) were the four Risograph inks available, and set p5.riso to layer them on top of each other.

I then inserted extra code to mimic organic Risograph print effects (and defects), and added a user interface so non-programmers can adjust the settings easily. Since I’ve combined elements from both riso@home and p5.riso projects, I call my tool p5.riso@home.

Mimicking a Risograph effect on a home printer appeals to me because I’m a huge fan of a nimble and flexible DIY printing process, which encourages experimentation and play at a low cost. And as a comic and zine maker, using a Risograph machine to print a full booklet is often not accessible or affordable, and possibly less environmentally friendly than home printing.

Sidenote about the Risograph’s eco-friendly reputation (feel free to skip)

Many groups that sell and promote Risograph printing servies tout its eco-friendiness as one of its key selling points. Much of this is deserved: Risograph inks are made from vegetable oil or rice bran (a waste by-product from making white rice), the machine uses less heat than a photocopier (and presumably laser printers as well though not inkjets, and the manufacturer collects old machines and ink bottles for recycling in Japan (and partially in France). But Risograph printers also create stencils for each unique page/print, which does create a lot of waste if you’re only making a few copies or doing a lot of experimentation. These stencils are at least made of natural fiber, but despite what some websites claim, there is no proof that these stencils are “biodegradable” or usable as “fertilizer or animal feed.”

How to setup and run this code

1. Setup a local server environment to run the HTML file in your web browser. Popular options include Simple Web Server and MAMP (if you prefer an app) or Live Server and Python HTTP Server (if you prefer command line). You need to do this because your web browser won’t let you read from and download files from a random HTML file you’ve downloaded to a local folder.
2. Download the code into a folder on this server.
3. Open index.html in your web browser using a URL like http://localhost:8888/p5risoathome/
4. The interface should look like the image at the top of this readme. It takes 5-10 seconds for the image to appear because the code is processing and creating a high-resolution image in real-time.

Implementation quirks & tips for using this

• This project is designed on run on desktop or laptop computers.
• Have patience! Images take a while to process.
• Run test prints, adjust and then run more test prints! Because the effects involve fine detail, I’ve found that the printed output changes depending on what software and print settings I’m using. I had different results printing from Affinity Designer and Adobe InDesign. And I definitely see a difference using my printer’s “Best” quality print setting versus its “Normal” setting.
• Because halftone dots are used, this script doesn’t work well with text. I recommend laying out text separately from the illustration or photo.
• The color extraction process doesn’t use p5.Riso’s extractCMYKChannel() function (it gave me very muddy images); rather it uses a workaround outlined in riso@home to extract an image using only CMY layers, which, in my experience, produced brighter images.
• The code for extracting and outputting the K layer mostly focuses on very dark greys/blacks, which is particularly useful if your image uses black outlines. See riso@home’s note about “Printing black” for more detail.
• What I’m calling “moire effect” is what riso@home calls “mis-alignment” or “registration error.”
• The riso@home project suggests printing one layer at a time and running the page through the printer four times. This didn’t work well for my home printer, so I first process all four layers digitally and then print the whole thing once.
• All javascript libraries are included in this package for ease of running locally without an internet connection.