Project (JP Paint) :
Full Screen: https://editor.p5js.org/jperry/full/BV1E6Gx7Y
Editor: https://editor.p5js.org/jperry/sketches/BV1E6Gx7Y
Demonstration:
https://drive.google.com/file/d/1b6_uZjG5eXTpf3IBlNmgLRTO-qgkEANA/view?usp=sharing
This project is titled JP Paint because I took inspiration from MS Paint. The purpose of this project is to be an interactive drawing program with a fun interface.
The most difficult part of this code was creating the button that clears the page. I was unable to figure out how to clear only the part of the canvas that I wanted users to draw on, so I eventually decided to just use the button to create a new rectangle over the old one.
button.mousePressed (clear)
function clear(){
fill (245);
noStroke ();
rect(110,75,560,430,20)
Another part of my code that proved difficult was the slider, but I referenced multiple videos from the Youtube channel The Coding Train along with the p5.js reference and was able to get the slider to work.
slider = createSlider (2,20,4);
slider.position(123,540);
slider.size(300);
For this project, I also used a lot of experimental coding to adjust the key press functions and brush.
Within my code I used variables to store the information for my button and slider so that they can later be manipulated.
Utilizing conditionals, I made my program interactive by being able to use the keys on the keyboard to change colors. I wanted each color to have a button that would be able to be pressed on the canvas, but as I was unable to get them to work, I used keys instead.
I used key for all of my keyboard interactions because keyCode is reserved for coding special keys such as backspace.