Make Riso Patterns in P5.js

I remember going to a workshop in Taipei last year where they introduced me to coordinating colors and prepping for riso printing, which is a type of digital screen printing method that involves vibrant colors. I wanted to replicate the look of riso using P5.js, a library for making generative art.

The key to achieving the look is through the use of blendMode, specifically blendMode(MULTIPLY). This reduces the opacity of the colors and when overlapped, the colors becomes a darker version of the mix.

Today, we'll make one pattern that looks like this:

Okay, first make sure you have your canvas set up. You can change the width and height to whatever you want it to be but for this example, let's just use 400 x 400. That's all you need in the setup function!

function setup() {
  createCanvas(400, 400);
}

Moving on to the draw function, you want to move the starting point to the middle of the page, so place this at the beginning.

translate(width/2, height/2)

Then, let's get on to making the circle pattern! Use a for loop to make the circles rotate around, as seen here. Here is where you can adjust the stroke weight as you'd like.

 for (let i = 0; i < 10; i++){
      blendMode(MULTIPLY);
      rotate(120)
      strokeWeight(30);

Then, use a if/else statement to assign 3 different colors to the circles, depending on if they're dividable by 2 or 3. I used the primary colors of red, yellow, and blue in this.

if (i % 2 === 0){
      stroke(80, 150, 255);
      ellipse(10, 70, 50, 50)
    } else if (i % 3 === 0) {
      stroke(255, 255, 0);
      ellipse(10, 70, 50, 50)
    } else {
      stroke(255, 0, 0);
      ellipse(10, 70, 50, 50)
    }

Wrap everything from the translate to the if/else in push() and pop. The final code in the draw function should look like this:

function draw() {
  background("FFF");
  push()
  // translate to middle of canvas
  translate(width/2, height/2)
  // use for loop to make the circles rotate around 
  for (let i = 0; i < 10; i++){
      blendMode(MULTIPLY);
      rotate(120)
      noStroke()
      strokeWeight(30);
  // use if/else to assign 3 different colors to the circles
    if (i % 2 === 0){
      stroke(80, 150, 255);
      ellipse(10, 70, 50, 50)
    } else if (i % 3 === 0) {
      stroke(255, 255, 0);
      ellipse(10, 70, 50, 50)
    } else {
      stroke(255, 0, 0);
      ellipse(10, 70, 50, 50)
    }
  }
  pop()
}

Personally, I really like the look of this and made some holiday cards based on this! Cheers to the 🎄 season!