mini project 2 | Interactive Design | Paint for Fun

Project Title: Paint for Fun

Link to my project: https://editor.p5js.org/sf3972/sketches/n4JtVR82S

Brief Description and Concept: 

    This is a drawing program with several brushes that can paint gradient colors and various stamps. With the program, you have the chance to explore different combinations of colors and shapes to create your own style of art. And it’s easy to use as well. Just by clicking several keys on the keyboard, you are free to go!

Demo/Visual Documentation:

   

    Screen recording: https://drive.google.com/drive/folders/1g1an2ER45UIJgr-jNnXWuhCN1dA-a2AG

Coding:

    The first sketch I got was from the class exercise. The continuous ellipses created a sense of space, which was amazing. But it was a little bit tedious as well, so I planned to work on the change of shapes and colors.

 

    Then I referred to the slides and some youtube videos for inspiration. Instead of creating a simple brush, I wanted it to have gradient colors and changeable thickness. So that I removed the fixed RGB color and put mouseX and mouseY, also I added a variable to change the thickness of the brush.

 

    Inspired by my first sketch, I added a few stamps as well.

 

Reflection:

Variables are used to store information to be referenced and manipulated in your sketch. Describe how you used variables and their purpose in your sketch.

    I used a variable to change the thickness of my brush. By pressing different keys, the variable increases and decreases in a steady way so that the painter can adjust to a fit thickness easily. The downside is that the thickness can only change when using the brush. In other words, it won’t change if the mouse is not pressed.

 

Conditions allow us to control what the program does and perform different actions based on “if” logic statements. They enable the user to interact with the program. Describe the interactive methods you applied in your program, utilizing conditionals.

    I used if(mouseIsPressed) and if(keyIsPressed). These two statements helped me establish various brushes and stamps that can be used on one canvas. By simply pressing the keys, users are able to create paintings in a minute.

 

What are the differences between key and keyCode?

    Key is used for common keys on the keyboard like “1” and “a”. While when it comes to specific keys like “right arrow” and “shift”, we should use keyCode.