Audio-Reactive Drawing Machine

The assignment was to develop a drawing machine, and since I've been thinking about linking sound and light a lot recently, I thought I'd dip my toes in.


It's a crude little thing, for sure. But it works. Mostly. 

The RGB values of every color (of the background and each of the shapes) are set to be some multiple of the amplitude of the song playing. I chose Only Shallow by My Bloody Valentine, partially because of the distinct colors of the album art and partially because I love that band. Up and down arrow keys allow the user to select from three different methods of drawing - placing squares, placing circles, or drawing a line.

There is a rather strange bug related to the selection index resetting changing how the shapes appear, but it honestly makes the whole thing look better, so I didn't bother with fixing it.

This was my first time writing anything in Javascript, so I did spend a lot of time searching up syntax and un-learning variable type conventions. I ended up making classes for Circle, Square, and Line objects that would be placed in the scene with a set position and re-drawn each frame based on the amplitude.

Full repository here:
https://github.com/b-bolles/Audio-Reactive-Drawing-Machine-

Comments

Post a Comment

Popular posts from this blog

veins - a weird visual toy

Image
I call this particular bit of code "veins" because it ... sorta looks like veins. Put less creepily, it's a bit like an old Windows screensaver (the one with all the random tubes) crossed with a Jackson Pollock painting. But less elegant. It's a pretty simple toy - I just get the pixel color of wherever the user is clicking, then I send our four "pix" objects that carry that color in random directions, creating random lines at 90-degree angles to each other. It's kind of neat on its own, but clicking many times in a single location / holding the mouse button down also creates an interesting corruption-style effect, or a wavelike effect if the mouse is dragged. For performance considerations, I stop the "pix" objects after 500 steps, so I can rapidly click/hold the mouse button down without bogging down the browser. https://github.com/b-bolles/veins
Read more

Squeezy Circle

Image
My latest invention takes after the subgenre of infinite runners akin to the Flash classic Helicopter and the infamous iPhone game Flappy Bird - namely, ones that require the player to finesse a specific input to weave between randomly placed pillars flying at the player on a 2-D plane. In my case, it's an FSR controlling a sphere. It's particularly jerky, since it's not interpolating the inputs, just assigning them directly to the sphere, but it works well enough. I have a series of blocks objects that steadily approach the sphere, and delete themselves once they're offscreen. They check for collision with the ball only when they're at relatively the same x position, and compare the ball's center coordinate with their own openings. Checking the center of an object as opposed to the entire thing is a practice employed by many 2D 'shmup games, which I am terrible at. Since I seem to be incapable of writing solid serial communication on my own, I borro
Read more