Link: https://editor.p5js.org/natayie/sketches/dNRmHaYSm 

Idea: Purikura Board

Cultivating everything I’ve learned the past month of ICM, I wanted to create an interactive drawing board inspired by Japanese purikuras. In Japan, purikura (プリクラ) refers to a photo sticker booth or the product of such a photo booth. The name is a shortened form of the registered trademark Purinto Kurab.

I initially sketched out a 400px by 700px canvas to place both a ‘board’ and the lower part for customized sliders and buttons. This idea uses several components we’ve learned in class so far:

  • Variables (mouseX and mouseY)
  • Conditionals (customizable buttons in certain areas)
  • Arrays and Loops (changing fruit stickers)
  • Classes/OOP

Visually, my initial goals were to have:

  • A rainbow brush that changed hue as the mouse was dragged
  • Stickers that would appear as the mouse was clicked
  • Size of brush and type of fruit as potential sliders
  • ‘Clear’ button to start new drawing

Creating a clearable drawing board with a rainbow brush and ‘stickers’

Version 1: https://editor.p5js.org/natayie/sketches/1GiKq4NCk 

Reference Links:

I first wanted to create the initial drawing rainbow brush and the first sticker, along with the clear page button, to start with the simplest tasks. My instinct went to using functions such as mousePressed(), mouseDragged(), and variables for the customizable button. Some problems I ran into were having mousePressed() and mouseDragged() not starting simultaneously.

I got help from Luisa to separate them by working retrospectively by checking if the mouse was being dragged right before the user released the mouse. “If it was being dragged, we are at the end of a drawing, and shouldn't draw a strawberry. If it wasn't being dragged, this is a standalone click and we should draw a strawberry.” https://editor.p5js.org/luisa/sketches/bH808IIhJ 

Changing fruit stickers with sliders

Version 2: https://editor.p5js.org/natayie/sketches/QfivnkNUU 

Reference Links:

The next step was to make it so I can change the type of fruit sticker with a slider. I have yet to code with sliders yet and I believe I would be using an array for the various types of elements in the slider. 

I first created an array called “fruits” with elements of loadImage() of each fruit. I tested this concept of changing fruit with mousePressed() and loops and arrays. With conditionals I created another button to change the fruit.

Customizable brush - sliders

Version 3: https://editor.p5js.org/natayie/sketches/-tzEb3PkE 

Reference Links:

Creating classes

Version 4: https://editor.p5js.org/natayie/sketches/dNRmHaYSm 

I created a Brushes() class - I had a hard time understanding how to separate everything into classes and call them out separately when I already have an array every time there is a mouse action since the numbers are fixed within the class parameters?

Published by natalie.r.fajardo in ICM, ITP