Our assignment this week was to use the DOM library of P5js. I’ve been wanting to integrate HTML and CSS into my ICM work for a while, so I was surprised at how frustrating I found this assignment.

I think my mistake was to try to use a pretty robust old sketch for the assignment. I really wanted to put some finishing touches on Trumpong, which I did, but it was tough going. The biggest issue that I ran into was that HTML elements interact much differently with each other than P5 elements on a canvas. This made it really tough to layer already existing elements. I put much of my text into DOM, then had so much trouble trying to align it correctly with the canvas using CSS that I reverted it all to JS.

In addition, I was surprised to find out that you can’t create parent elements with the DOM library in the JS file. In order to do this, I had to create a parent element in index.html, then use the parent function in the sketch.js file.

The things that I did get done: I added a score and speed keeper at the bottom of the playing board using DOM. In doing this I also created a style.css file and added a small amount to the index.html. I also created a background that scales to the screen size using DOM. I put the project on a dedicated url (trumpong.com). Then I added Google Analytics and event tracking. This way I can see how many people play and which candidates are most popular.

I’ve enjoyed working on the same project for the past few assignments, but, with all the new things we are learning in P5, I’m ready now to move on to something new!

See the final project at trumpong.com

See my commit on Git Hub here.