We’re breaking out of canvas land and into the DOM! Our homework this week involved using the HTML DOM with our p5 programs, getting and sending values on a webpage (outside of the usual canvas element we’ve been using so far).
I’m still having fun exploring the p5 sound library, and DOM control was a great way to logically add control and feedback to a music based program. I’m really impressed with p5’s stretching of sound, and decided to make a Vaporwave themed music player.
http://alpha.editor.p5js.org/projects/rkk0bvS1e
(Embedding this one was a bit fussy. Maybe because of all the DOM trickery? Worth asking about in class.)
Drag a sound file that is on your computer onto the indicated area and the file will load. When the file is successfully loaded, press the play button.
Certain aspects of layout are just so much easier in HTML, it was a great reminder to get back into it. Though there were some issues with centering some of my DOM elements, the advantages to really working the DOM are apparent for larger scale and multi-page p5 programs. I was able to implement drag and drop for file loading, change the color of elements based off of the amplitude of the music, and create sliders and buttons quickly and easily. Even funny stuff I hadn’t even thought of was available. Depending on the amplitude of the sound, the title of the sound file being displayed will switch from lowercase to uppercase. (CSS style ‘text-transform’,’uppercase’ for the curious)
Knowing that I can CSS style everything is even that much better, keeping in mind future edits and changes that might occur in a program. In this case, I used some Google Fonts to spruce up the Vaporwavey feel of the design. And all of this isn’t at the expense of the canvas sketch itself, which shows a waveform of the sounds currently playing. This gets embedded in the background thanks to a z-index property. In the requisite pink and blue, of course.
I started out with music more ambitious goals involving the p5 sound library, which were thwarted at nearly every turn. But my little Vapor-Player (…um…working title…) has captured my heart, and I will be revisiting it as I get more adept at sound manipulation in the browser.
The only question I have left is… what happened to shrug emoji’s right arm?!!?
Shrug emoji!! What did I do? Oh GOD I’m a monster!!!!
Editors note: When asked for comment about the incident shrug emoji offered no statement, but did shrug.