This experiment builds on top of an HTML5 + JavaScript paintingEngine experiment that I have been working on and begins to explore the integration of symmetry, enhanced particle and attractor code. One of the key design research questions this experiment explores is whether we can have greater creative control over UI elements than jQuery UI + CSS3, etc.
Colors
The color palette comes from a color plug-in I wrote for Illustrator that extrapolates colors from an image, sorts them based on popularity (as well as hue, saturation or brightness) and then saves them as Swatches inside of Illustrator. Getting the color palette from Illustrator to work within Paper.js was possible via a simple ExtendScript (Adobe's JavaScript which is used to drive the Creative Suite/Cloud apps) and the fact that Illustrator supports the ability to find out the quantity of Swatches as well as their color values.
Background Gradient
The colors for the background gradient are randomly selected from the color palette when the page is (re)loaded.
The colors for the background gradient are randomly selected from the color palette when the page is (re)loaded.
Brush
For the brush, I created it in Illustrator with a few small paths to start out with, where each one could become a bristle of a brush within Paper.js. By exporting the file out of Illustrator, saving it as an SVG and then importing that file into my web app, I could differentiate each path by the name I gave them within Illustrator. By doing so, I could define each 'bristle'/path a unique brushstroke behavior and color in order to add some more character to the brushstroke. In this case, I'm only using brushLeft as the point source and drawing a stroke based on that data. The final SVG group of paths ended up looking a little like an X-Wing Fighter, sans the guns. :)
For the brush, I created it in Illustrator with a few small paths to start out with, where each one could become a bristle of a brush within Paper.js. By exporting the file out of Illustrator, saving it as an SVG and then importing that file into my web app, I could differentiate each path by the name I gave them within Illustrator. By doing so, I could define each 'bristle'/path a unique brushstroke behavior and color in order to add some more character to the brushstroke. In this case, I'm only using brushLeft as the point source and drawing a stroke based on that data. The final SVG group of paths ended up looking a little like an X-Wing Fighter, sans the guns. :)
Movement
The movement of the X-Wing Fighter is based on an attraction to the small dot that's wandering around on the screen. The Fighter's movement in influenced by the parameters for the attractor as well as itself. The Fighter has a min-max lifespan as well as a min-max mass. The attractor has a mass with a min-max range and an area of attraction that includes a min-max range.
UI
Similar to the Brush, the UI graphic elements originated in Illustrator and exported as an SVG. My web app imports, and converts each group of paths to interactive sliders with parameters for min, max, current value, etc. Because of highly tighter coupled Illustrator and Paper.js are, the contents of the SVG can change over time and the code doesn't care. This capability is subtle but extremely powerful when working with more dynamic content that might be pulled in from a social media api, for data visualization elements or when the SVGs are being re-generated on a regular basis. So much potential!
