For this assignment we were asked to create an interactive page in p5.js using p5.js dom elements. I had a lot of fun creating and playing around with these elements, but I ran into a fair amount of issues when trying to implement different ideas.
Initially, I wanted to create a photobooth where you could apply filters to the createCapture() of the video and then save that photo somewhere on the screen. I ran into a lot of problems trying to implement this. What I believe the issue was is that I am applying the filters on the canvas and since the canvas is occupied, I am not able to print them below. Would I need to have a second canvas if that's the case?
The other issue that I ran into was not know exactly when to add styles to javascript, when to add them to the html, and when to add them to the css section. I feel like I did it wrong since I created all the elements in javascript, i couldn't have them all in one div. Thus mass selection on the page to move them to the center became this huge task. With that said, I'm still not sure how to navigate where each element should be created and what place would be the best to style those elements.
I don't feel like this is a finished project as I spend a lot of time just trying to get it to work, but I did learn a tone in the process :).
Here is the that I am calling instacopy.