Pattern Illustrator is a drawing and animation tool that enables users to directly and efficiently design pattern drawings, or they can generate directly modifiable sketches with Gemini. Each illustration is built from a series of strokes, and the user can directly modify these strokes to improve the overall aesthetic of the drawing. The tool provides the ability to visualize an animation between up to ten illustrations stored within the platform, using linear interpolation to create smooth transitions. The idea for a drawing tool that could simultaneously provide the ability to animate originated from my experience creating animations for dance shows, where it was very difficult to prototype and design animations when I first started without any experience. My goal with Pattern Illustrator is to encourage beginner illustrators to find meaning from and create expression out of patterns, especially within the nuances of structured forms.

Users can create drawings in nine modes—free draw, 180-degree rotational, 4-way rotational, mirrored, radial, dihedral, spiral, kaleidoscopic, and fractal symmetry—or they can use Gemini to generate artwork as editable strokes on the canvas. As users draw, they ink a series of strokes that can then be individually modified in color, thickness, geometry, and position. Sliders and controls adjust parameters such as repetitions (N), scale, and depth depending on the symmetry mode. Users can clear the canvas, save a PNG, store drawings for animation, and use AI Palette to generate color swatches. Storing does not clear the canvas automatically, allowing users to build up a sequence as they see fit. To animate, they select at least two stored drawings, choose the easing and animation duration, and click Animate for a canvas render or Export Animation.

I built Pattern Illustrator as a fully interactive p5.js system centered around a single stroke representation. Every stroke—whether drawn manually, generated through symmetry, or created by Gemini—is stored as an array of vertices with associated properties such as hue, saturation, brightness, opacity, and thickness. Symmetry modes work by transforming each stroke’s vertices before drawing, and the editing tools modify these properties directly. The animation system linearly interpolates between corresponding strokes in the stored drawings, blending their vertex positions and visual properties frame by frame. The AI features convert Gemini’s output into the same stroke structure used throughout the tool, ensuring that every generated element can be manipulated with the exact same controls as user-drawn content. Users can switch between drawing, editing, storing, and animating within one the same environment.