Wow this was hard!

For this assignment I created a stock of art photos and cut every one of them to four pieces: the eyes, the nose, the mouth and the chin. I decided that this time I will write my notes in Hebrew - Java script is complicated language I needed that at least the notes will be in a language that I knew

First I uploaded all of photos to p5 and put them in a folder.


I wanted to create four arrays that with every click of the user the photos will change.

I think that from the moment I understood that a class is some kind of a template and it could help me to organize all my code I knew it's a good point to begin with.


So I divided the class to two functions: a 'constructor' that will save all the photos and 'show' that will present the photos. For the 'constructor' I had 3 parameters and 3 'this' variables.

Then I defined all the galleries and wrote a preload function. In the preload function I wrote different arrays for each gallery.


And with the help of this video:

https://www.youtube.com/watch?v=i2C1hrJMwz0&feature=youtu.be&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA


I wrote a variables that allowed me not to write each and every photo name:

Then I called the 'constructor' function in the setup function


And called the 'show' function in the draw function

I wanted the images to change with every click of the mouse, so I added a clicked function in the class and added a random function.



And wrote a MousePressed function. In the function I limited the areas that the mouse can click on and "called" the 'On clicked' function of the class.


Then I uploaded fonts and added team to the preload function

and wrote the text in in the draw function

I needed an object to remove from the arrays. I added a button to the setup function, I copied the code from p5 reference.


And added a remove image function to the class. In addition I wrote an 'if' statement that will stop to remove photos when the arrays have one element left. I did it with a 'splice' that I learned about from this link:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_splice


Here is the results:

https://editor.p5js.org/ds6298/sketches/y3Y4eOcrC


23 views0 comments

Recent Posts

See All