This experiment image was inspired by the following question: What happens when you combine particles that chase the cursor with calligraphy like brushestrokes? Can it be done in JavaScript?
I used a custom JavaScript stack to pull off the experiment with Paper.js as the main library for handling the drawing and animation aspects.
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.
Brush
For the brush, I created it in Illustrator with a few small paths to start out with, where each one would 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 then gave each 'bristle'/path a unique brushstroke behavior and color in order to add some more character to the brushstroke. 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 would 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 then gave each 'bristle'/path a unique brushstroke behavior and color in order to add some more character to the brushstroke. The final SVG group of paths ended up looking a little like an X-Wing Fighter, sans the guns. :)
