DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Make Riso Patterns in P5.js
Ivy Chen
Ivy Chen

Posted on • Updated on

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.

Image description

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:

Image description

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);
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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)
    }
Enter fullscreen mode Exit fullscreen mode

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()
}

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Layoffs: It’s Okay to Not Be Okay