new Riso(color, width, height)

The base Riso object is a single-color p5 graphics object. Its constructor can take 3 parameters:

• color: a string set to a Risograph color like "brightred", "blue" or "orange", or an array with [r,g,b] values
• width: the width of the riso canvas (optional - defaults to width of sketch)
• height: the height of the riso canvas (optional - defaults to height of sketch)

Internally, the riso object extends p5's built in graphics object. You use it mostly the same way with a few exceptions, as detailed in this documentation.

          let blueChannel; //declare riso object

          function setup(){
            createCanvas(500, 500);
            blueChannel = new Riso("blue"); // instantiate riso object as blue layer
            blueChannel.fill(128); //set opacity
            blueChannel.rect(20, 20, 100, 100); //draw rect to blue layer
            drawRiso(); //draw to screen
          }
        

Here we create a blue color layer, set its fill to be 128 (or half opacity) and then draw a rectangle in it.

Pay attention to the order that you create each Riso object (each color layer). The drawRiso() function that previews your sketch will display the layers in the order they are created, with the last created layer on top. Note that if your top layer has an opacity of 255, you may not be able to see the layers underneath. Different color combination may result in different blended colors.

The following default colors are available:

Riso.fill(value);

The fill method for Riso objects takes a single number value between 0 and 255. 0 is completely transparent, and 255 is completely opaque.

          function setup(){
            createCanvas(500, 500);
            let blueChannel = new Riso("blue"); //create riso object, set to blue

            blueChannel.fill(255); // completely opaque
            blueChannel.ellipse(0, 0, 100, 100); //draw ellipse on blue layer

            blueChannel.fill(50); // fairly transparent
            blueChannel.ellipse(50, 50, 100, 100);

            blueChannel.fill(3); // almost invisible
            blueChannel.ellipse(75, 75, 100, 100);

            drawRiso();
          }
        

Riso.stroke(value);

Just like fill, the stroke method for Riso objects takes a single number value between 0 and 255.

          function setup(){
            createCanvas(500, 500);

            let orange = new Riso("orange");
            orange.stroke(255);
            orange.strokeWeight(5);
            orange.rect(50, 50, 100, 100);
            drawRiso();
          }
        

risoNoFill();

Convenience function that calls noFill() on all riso layers.

risoNoFill();

risoNoStroke();

Convenience function that calls noStroke() on all riso layers.

risoNoStroke();

clearRiso();

Completely clears all riso layers. Useful if you are drawing to riso layers in the draw loop rather than just in setup.

clearRiso();

Riso.image(img, x, y, width, height);

Draws an image onto a riso layer. Acts just like p5's image function, but converts the image to greyscale. It will then print in the color of the layer it is drawn on. Use fill to set the opacity of the image.

• img: a p5 image, video or graphics object
• x: x-coordinate of image
• y: y-coordinate of image
• width: width of image (optional)
• height: height of image (optional)

          let img;

          function preload() {
            img = loadImage("cat.jpg");
          }

          function setup(){
            createCanvas(500, 500);

            let orange = new Riso("orange");
            orange.fill(200);
            orange.image(img, 0, 0);
            drawRiso();
          }
        

Riso.cutout(p5.Graphic);

This function is the inversion of the mask function. It removes (or masks) portions of one layer that overlap with another layer or graphics object. This is useful for printing in layers when you don't want overlapping colors.

          function setup(){
            createCanvas(500, 500);

            let blue = new Riso("blue"); //blue layer
            let red = new Riso("red"); //red layer

            blue.fill(255); 
            blue.ellipse(130, 130, 100, 100);
            red.fill(255); 
            red.textSize(100);
            red.text("hello",50, 170);

            //completely removes any intersection of red and blue
             //layers from the blue layer
            blue.cutout(red);
            drawRiso();
            }
        

extractRGBChannel(img, channel);

Extracts a red, blue or green color channels from an image, and saves as a new image. Takes in two parameters:

• img: a p5 image object
• channel: the channel to extract. Can either be a channel name ("red", "green", or "blue") or number (0, 1, 2)

          // convert a color image into a red and blue print
          let img;

          function preload() {
            img = loadImage('cat.jpg')
          }

          function setup(){
            createCanvas(500, 500);

            let blue = new Riso("blue");
            let red = new Riso("red");

            let justBlues = extractRGBChannel(img, "blue"); //extract blue from img and save as new image
            let justReds = extractRGBChannel(img, "red"); //extract red from img and save as new image

            blue.image(justBlues, 0, 0); //draw justblues to blue layer
            red.image(justReds, 0, 0); //draw justred to red layer

            drawRiso();
          }
        

extractCMYKChannel(img, channel);

Extracts the cyan, magneta, yellow and/or black color channels from an image, and saves as a new image. Takes in two parameters:

• img: a p5 image object
• channel: the channel(s) to extract. Can either be a channel name ("cyan", "magenta", "yellow", "black") or number (0, 1, 2, 3) or channel set string ("cy", "mk", "cyk")

          // convert a color image into a cyan and magenta print
          let img;

          function preload() {
            img = loadImage('cat.jpg')
          }

          function setup(){
            createCanvas(500, 500);

            let blue = new Riso("blue");
            let red = new Riso("red");

            let justCyan = extractCMYKChannel(img, "cyan"); //extract cyan from img
            let justMagenta = extractCMYKChannel(img, "magenta"); //extract magenta from img

            blue.image(justCyan, 0, 0); //draw justCyan to blue layer
            red.image(justMagenta, 0, 0); //draw justMagenta to red layer

            drawRiso();
          }
        

ditherImage(img, type, threshold);

Reduces an image to one color using patterns of dots to create greys.

Takes three parameters. The first is the image object. The second is the dither type (choose between atkinson, floydsteinberg, bayer or none). The third sets the threshold (it only applies to bayer and none). Dither type 'none' simply applies a threshold, turning pixels above and below the threshold clear and black.

              let black;
              let img;
              let ditherType = 'atkinson';

              function preload() {
                img = loadImage('data/no_threat.jpg');
              }

              function setup() {
                pixelDensity(1);
                createCanvas(img.width, img.height);
                black = new Riso('black'); //create black layer
              }

              function draw() {
                background(220);
                let threshold = map(mouseX, 0, width, 0, 255); //change dither threshold with mouse position
                clearRiso();

                let dithered = ditherImage(img, ditherType, threshold);//pass image to dither
                black.image(dithered, 0, 0); //draw dithered image

                drawRiso();
              }

              function keyReleased() { //function to change dither type with a keypress
                if (key == 1) ditherType = 'atkinson';
                else if (key == 2) ditherType = 'floydsteinberg';
                else if (key == 3) ditherType = 'bayer';
                else if (key == 4) ditherType = 'none';
              }

              

drawRiso();

Draws all Riso objects/layers to the screen. Should be used at the end of your draw or setup functions. Useful for previewing what your prints will look like.

          function setup(){
            createCanvas(500, 500);

            let colors = ["red", "blue", "green", "black"];
            for (let i = 0; i < colors.length; i++) {
              let channel = new Riso(colors[i]); //create four color channels from array
              channel.fill(random(100, 200));
              channel.ellipse(random(0, width), random(0, height), 100, 100); //put a random ellipse on each
            }

            drawRiso(); //preview on screen
          }
        

exportRiso();

Use this function when you are ready to print. It exports all riso layers as individual png files, that can be printed in different ink colors. You should call this function in an event listener like mousePressed, or at the end of your setup function.

          let blue;
          let red;

          function setup(){
            createCanvas(500, 500);

            blue = new Riso("blue");
            red = new Riso("red");
          }

          function draw() {
            clearRiso(); //clear screen every loop of draw

            blue.fill(map(mouseX, 0, width, 0, 255)); //set blue fill by mouse position
            red.fill(map(mouseY, 0, height, 0, 255)); //set red fill by mouse position

            blue.ellipse(200, 200, 100, 100); //draw ellipse to blue layer
            red.ellipse(250, 250, 100, 100); //draw ellipse to red layer
          }

          function mousePressed() { //when mouse is pressed
            exportRiso(); //export red and blue layers as pngs for printing
          }
        

halftoneImage();

Applies a halftone pattern to an image. Takes up to five parameters. The first and only required parameter is the image object. The second is the shape of the dots (default value is a circle). The third is the frequency of dots, measured in lpi (lines per inch), with a default value of 10. The fourth one is the angle to rotate overlapping patterns to reduce interference (default value 45). The fifth parameter is intensity, which will dither the result at the given threshold (default value 127).

              let pink;
              let img;

              function preload() {
                img = loadImage('data/monkeys.jpg');
              }

              function setup() {
                pixelDensity(1);
                createCanvas(img.width, img.height);
                pink = new Riso('fluorescentpink'); // create pink layer
              }

              function draw() {
                background(220);
                clearRiso();

                let halftoned = halftoneImage(img, 'line', 3, 45, 90); // pass image to halftone with line dots, frequency of 3, angle of 45, and intensity of 90.
                pink.image(halftoned, 0, 0); // draw halftoned image

                drawRiso();
              }