Party Lines Sequel — A Processing.js Project
Expanded GUI Version Added 7/16/13
Party Lines Sequel is my final homework project for the Coursera class Creative Programming for Digital Media and Mobile Apps. It is the successor to the original Party Lines. For this project, the ability to play music was a requirement. Note that the mp3 file used by the sketch is over 2 megabytes so it may take some time to load. This program has been verified to work on a Windows 7 platform using either Firefox 21 or Internet Explorer 9. Note that if you are using the Chrome browser on an Android device, the audio volume control may not work.
The original version of this program required user keyboard input to start and stop the program. However it occurred to me that this put people accessing the program via a mobile browser at a disadvantage. Therefore I added a GUI widget to replace the keyboard input. For this modified version I've added a more attractive GUI widget. I have also added additional painting options and updated the splash screen to document these new functions.
Note: the Java canvas used here is of fixed size so does not scale based on device type/form factor.
Usage
Press the start button to begin. Then 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. There are three drawing modes available: curved lines, straight lines, and ellipses.
Clicking on the color palette will toggle between two coloring modes. In the default mode, colors are taken from Vincent van Gogh's painting Field with Poppies. In the generative mode, colors are based on the location of your mouse within the canvas.
Left to right, the GUI widget buttons are:
- the square icon stops/pauses the program and the music.
- the right-pointing triangle icon starts or re-starts the program and the music.
- the curved line icon activates curved lines drawing mode.
- the straight line icon activates straight lines drawing mode.
- the ellipse icon activates ellipse drawing mode.
- the color palette toggles between van Gogh and mouse controlled coloring.
- the minus (-) icon slows down movement and lowers the volume of the music
- the plus (+) icon speeds up movement and increases 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 Sequel creates a system of particles that become the key points for the lines drawn. In straight line drawing mode, a line is drawn to each particle from the mouse's x,y coordinates. Lines are also drawn between particles that are adjacent to one another in the system. In curved line drawing mode, the mouse's x,y coordinates are combined with the particle's x,y coordinates to create both the curve endpoints and the curve control points which together control the shape of the curve. In ellipse drawing mode, the particles migrate towards the mouse's x,y coordinates. The mouse's coordinates are only updated when the mouse is being dragged. If the mouse is not being dragged, then the mouse's last x,y coordinates are used until the next time the mouse is dragged.
The color assigned to each line is derived using one of two methods. In the first method, color is taken from a location in van Gogh's painting Field with Poppies that corresponds with the particle's x,y coordinates. In the second method, color is created by 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 in the system. A simple GUI menu class is used to manage the GUI widget and associated buttons. A splash screen function is used to display the program's instructions. Color for the splash screen's text is controlled by the program's frame count which causes the text colors to oscillate, which consequently provides a visual cue that the program is indeed running.
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.