I'm blogging now because I'm in a creation-hole and want to make sure I get the assignment in before class. I'm not nearly done with this sketch and want to start evolving it toward a more final piece, as I find that this could be a really nice start to something poetic. I'm excited for ICM madness tomorrow where I can get some crowdsourced input.
Where I'm at
I've decided to keep working with the sketch I started for week 6, changing the input functionality over to HTML so it could be stylized via CSS as per Allison's in-class suggestion. This was probably a curse for a weekly assign, as I still have a lot to learn in all three languages... I'm conflicted here; on one hand, I didn't get enough time to practice the specific tools for this week's assignment, but on the other I'm learning a lot about HTML and CSS, and how the languages start to interact with both each other and p5.
Here's a screen recording of the sketch in action thus far:
Full screen sketch: https://editor.p5js.org/medusamachina/full/Hk7YMH1nm
Editor: https://editor.p5js.org/medusamachina/sketches/Hk7YMH1nm
Credits: Galaxy PNG (http://www.stickpng.com/img/nature/space/universe/galaxy-purple-effect)
Sound: https://freesound.org/people/komal22moiz/sounds/380521/
Getting to this point was straight up mind-bending. Translating the input and button to html also meant reconfiguring the code in the sketch, and there was a lot of going back and forth between the html, css, and js to recall what IDs where used where. Centering the input box was a real goose-chase, but I caught it Also figuring out how to get the input value from the html box to display the name of the person playing the game was ::mindblown:: (thank you Vicky Shaudery via Stackoverflow and Dan Shiffman of course) . Moving the submit.mouseClicked to draw in order to keep the background and image on the screen was another crazy information hole.
I spent quite a bit of time trying to figure out image on canvas, as I couldn't get them to respond to the resize. I chose a PNG file on a black background, hoping that I could use a mouse interaction to either populate the canvas or to move the image (with object and array), but without the full-width canvas resizing, the images would stay in position to the scope of the canvas size when the sketch was first loaded. I then tried other image alterations, like having it fade in or rotate, but it seems that everything is complicated by a function being called by a button that is created in an html.
I also added a sound to the submit button dom element, and used setVolume to have the music fade out so there wasn't a harsh cut when the sound effect ended. This is where I'm at before class, and will bring it to the madness tomorrow. Cheers!
Comentários