ICM, Wk 2: Jazzy Timez Animation

When I was trying to come up with a piece for this week I had an image in mind of these node-like shapes appearing with the press of the button. Sort of circles, with spindly lines coming out of them. The shapes would grow and the lines would lengthen outward as the mouse was pressed.

So, I figured that a good place to start my drawing with would be some circular shapes. I knew that I wanted them to appear where my cursor was and when I clicked my mouse.

First circles

I decided I should try and figure out how to play around with the size of these circles and randomizing it each time I clicked the mouse. Tuned into a couple of Shiffman’s handy-dandy vids and found the one on randomizing. Eh, Voila! Circles of various shapes and then sizes!

flat circles

circles when you click

Then, I decided that rather than make another black and white sketch, that I’d try playing around in color because THAT’S NEW! So I happily clicked around and made a bunch of multi-colored circles.

circles of different shapes and colors

Now, here’s where things got tricky/interesting/I just tried out a bunch of code.

What I wanted to have happen is that when my I released the mouse, my circle that I just created would move off in a random direction. I realized I needed to somehow get a moveX function in there while maintaining my mouse x (since I still wanted shapes to pop up where my cursor was). [I played with moveX = moveX +1. I tried function mouseReleased().] This led me to looking a bit into conditional statements, and I tried juxtaposing a mousePressed() command with one that asked the circles to move.

trying to get circles to move, pt. 2

I played around with a couple iterations, adjusting code here and there.

trying to get circles to move, pt. 3

trying to get circles to move, pt. 4

ICM Wk 2 Vid 2

So when I got to this point, my sketch reminded me of animations from the 60s – bright, solid geometric shapes bouncing around the screen. Maybe something I saw in Fantasia? So I decided to add some rectangles…but also look into adding a jazzy audio file to give it a real beat era vibe.

When I looked at the p5.js reference on audio, I honestly didn’t find it to be helpful at all. (Though thinking about it in retrospect, I maybe should have checked out the sound entry…). In any case, I did a quick web search and found this tutorial here: http://coursescript.com/notes/interactivecomputing/sound/

I tested it out with a free song I found online, made a few mistakes and fixed them and then….I had sound!

But as I listened to it, I realized that it wasn’t the song I wanted. I had this very particular jazz melody stuck in my head. Problem was, I had no idea who played it. So I thought back to the jazz albums I’ve owned and went with my first guess: Miles Davis. I clicked on the first YouTube video of his that I saw and, Voila ! I was correct!

But when I added the .mp3 (and maybe I didn’t realize it before because the other one didn’t have speech) but I realized that (duh) every time I clicked the mouse to get the shapes and colors to change, the track started over. Hm. I tried putting the sound.play(); command in different parts of the code – in a separate mousePressed function before and after the other, in the set up, in the draw function – but either it wouldn’t allow the rest of the animation to work (I guess because it took too long to load?) or, it wouldn’t play at all, or it would loop it over the previous iteration.

Then I realized I need to assign another command, one that I would only need to issue once. I remembered someone mentioning something about a keyPressed() function, so I tried it out and HECK YEAH! Now I can click and make lots of circles of different shapes and colors to the sweet music of Miles.

EXCEPT, apparently, not in the browser. I go back to the tutorial and it says some browsers don’t support .mp3 because its codec (?) patented. So I tried adding in a .ogg function.

Alas, that didn’t work either. So, I’m moving on for the moment so I can get this blog post up. [EDIT: IT’T WORKS! Thanks, Shiffman!]

So here’s my animation that should play Miles Davis’ classic, So What:


I tried to find some corresponding example of a 1960s animation, and did come across this Oscar winning short – The Critic (1963), narrated by none other than Mel Brooks. I certainly see some similarities, though I really wanted one that used jazz.

Or this classic by Chuck Close, The Dot and the Line: A Romance in Lower Mathematics (1965):

I do still hope to make my black spindly animation at some point! Funny though, how I went from this very delicate, dark concept to a bright, geometric animation. La.

Some questions I had were, how can I make the rectangles a different randomized color from my circles, as in can I assign a fill function to a particular set of shapes? Also, how can I get shapes to move after my mouse is released?

(Visited 68 times, 1 visits today)

16. September 2015 by zoe.bachman.itp
Categories: ICM | Tags: , , , , | Leave a comment

Leave a Reply

Required fields are marked *