Party Lines - A Processing.js Project
Modified GUI Version Added 7/3/13
Party Lines is a homework project for the Coursera class Creative Programming for Digital Media and Mobile Apps. Note that the ability to play music is one of the requirements for this project. Also note that the mp3 file the sketch uses is just over 2 megabytes so depending on your connection it may take some time to load. The program has been verified to work on a Windows 7 platform with Firefox 21 and Internet Explorer 9.
The original version of this program required user keyboard input to start and stop the program. However it occurred to me that for people accessing this page with a mobile browser, they won't have a keyboard interface available. To remedy this I added a GUI widget to replace the keyboard input. I also added a splash screen that contains very basic instructions about the GUI widget.
Note: the Java canvas used here is of fixed size so does not scale based on device type/form factor.
Usage
Drag your mouse across the canvas to dynamically update the focus of the party lines. Release your mouse to lock the focal point leaving the line ends free to dance. The location of your mouse within the canvas influences the color of the lines.
Click the GUI widget right-pointing triangle icon to start or re-start the program and the music.
Click the GUI widget square icon to stop/pause the program and the music.
Click the GUI widget minus (-) icon to both slow down movement and lower the volume of the music
Click the GUI widget plus (+) icon to both speed up movement and increase the volume of the music
Try slowing down the program until all motion stops and then drag your mouse across the canvas to see what happens.
Project Description
Party Lines creates a system of particles that become the endpoints for lines drawn to each particle from the mouse x,y coordinates. Lines are also drawn between particles that are adjacent to one another in the system. The color assigned to each line is derived from averaging the particle's x,y location with the mouse's location and the current frame count. A particle class is used to define the methods and the variables (location, speed, acceleration) associated with each particle. A simple menu class is used to manage the GUI widget.
References
- buzz.js - I used this sound code and associated html obtained from the Processing.js web site in order to incorporate sound into the project
- marcus_kellis_theme.mp3 - I used this 2 megabyte mp3 file as the audio source. This mp3 file is distributed with Processing as a part of the Minim example programs.