p5.Riso, Hacker News

new Riso (color, width, height)

The base Riso object is asingle-color p5 graphics object. It’s 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 p5s built ingraphics 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 it’s 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 ofthe 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.ellipse (0, 0, 100, 100);             red.ellipse (0, 0, 150, 150);              // 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             let justReds=extractRGBChannel (img, "red"); // extract red from img              blue.draw (justBlues); // draw justblues to blue layer             red.draw (justReds); // 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.draw (justCyan); // draw justCyan to blue layer             red.draw (justMagenta); // 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

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           }