Experiment 1: Cubical Vortex Effect – Jin Zhang & Siyue Liang

Experiment I: Cubical Vortex Effect

Jin Zhang(3161758) & Siyue Liang(3165618)


Atelier I

Github Link:




We were interested in the examples shown in class on sound controlled animation so we wanted to experiment more with it. Based on this idea, we tried to connect our 3D shapes by inputting songs or the computer microphone.

The reason we chose to work with html5 and javascript is that we had a similar lessons last year so we already learned some basic knowledge, so we are comfortable working with it.


This is what we made in the very beginning.  Cubes and cones are displayed from far to near by adding the z-axis.  It creates a tunnel-like shape and looks very cool.




Our original thought was to input an audio file and make animation react to the music.  We tried using the “loadSound” and “analyzer.getLevel” to input the music as a value for the animation.  But it didn’t work because the audio file couldn’t be loaded properly for some reason. So we went back to using “micLevel”. However, because the microphone records every tiny acoustical signal that it gets, the animation wouldn’t move as orderly because it is very easily disrupted by the outside voices.



After that, we just played around with the code more and got some of these random effects. Some of them worked and some of them did not.  Then we added a few if statements to make the shapes switch to cones when mouse is pressed, just to make it more fun and interactive.




We tried to change the “rotate” code in order to make the cubes and corns rotate in different angles individually. However, it could only rotate in one angle as a whole for some reasons.


I really liked this one because it has a cool future and space feel to it.  How we got this was we set the diameter of the cones to be equal to the mic value and when there is no sound, the cones would become these rod-like shapes.



In our final version, “micLevel” controls the stroke color, the size, and the rotating of the shapes and mouseX and mouseY controls their stroke and movement.  



It’s a really interesting process to see the changing of the result by playing with different elements.  We had a lot of fun doing this project together and we would definitely keep exploring sound interactive art.




This sketch is from openprocessing and it inspired us to have the idea of creating 3D effects and explore the beauty of geometrical shapes.  

We used the part for reference where a for loop was used to create shapes and translating them to different positions according to the mouse coordinates continually.


Leave a Reply