LIVE CODE HERE

This week, we needed our assignment to include some DOM elements. Honestly, I don’t really see how I would use the DOM extensively. I’m not sure if it’s because we really didn’t cover it that extensively, or if I’m just a terrible person, but for me, If I wanted to build a site I would probably do it on the actual HTML page and affect the styling with CSS… so I’m confused as to why I would use it on the P5 sketch aside from the buttons, sliders and writing outside the actual canvas–all in very contained, small parts.

My idea for this week was basically an interactive fairytale where you could click through pages like a book, roll-over certain words and images appear and have some other little things. I tried building my code three different ways: 1) using the createP() DOM function, 2) using the createDiv() DOM function and 3) using the text function on P5. After struggling for almost two days trying to figure out the DOM functions, purpose and how to use it, I  managed to get the text function to do what I wanted.

I created an array of strings, and then a function that was linked to the button to cycle through the array. I preloaded an image and fonts, but for some reason the fonts I loaded weren’t acting properly. I finally got the main one to load so I just left it as is, but I would love to know what I’m doing wrong. The idea was to have one font be for the title and end pages, and then a body copy for the three pages of the story.
Also, my original idea was this grandiose beautiful thing with roll-over images and a bunch of stuff,  and I’ve quickly come to realize that (as with fabrication) I need to manage my time expectations regarding how long I think it’s gonna take, and times that by PI.

Finally, I caught Marc (Abbey) when he was leaving a class and he managed to show me how my code would’ve worked with the DOM settings. We played around with the code a bit too but even he couldn’t figure out how to load the font! after a while he told me to go back to the way I was doing it and went to talk to Lauren McCarthy about optimizing font loads for the DOM…win, i guess?

All in all, I kind of feel like this assignment didn’t go at all like I would’ve wanted to. The DOM was overly complicated to me, and messy even–which seems counter-intuitive to what we’ve been learning so far. Help! did I just miss the whole point entirely?