Creative Coding Week 6: DOM/User Input

This week, we are exploring some of the extended capabilities of P5.js. I decided to experiment with user input because I have always wanted to add more interactive elements to my sketches. DOM makes creating user input elements like text boxes, buttons, and sliders super simple and efficient. Before learning about DOM, I’d often use mousePressed() and if statements to draw a button on the canvas. But with DOM, I don’t have to mess with mouseX/Y input and everything is streamlined. With all that being said, I tried to implement some text boxes, buttons, and sliders into my previous assignments.

Here are the two sketches I modified using DOM:

I updated my week 1 assignment with some sliders:

I then tried to add a text box to my assignment last week:

One useful thing I learned was that DOMs can be hidden with the hide() function (it looks like this: xxx.hide();), so that can be integrated into the sketch when there are multiple pages/steps in the program. Now that I am somewhat familiar with user input, I cannot wait to put it into use for my midterm project.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store