Recently had a fun branding project come through at my day job. One of my unused brand directions was the idea of using Lissajous curves to form parts of the logo and various brand elements.
Lissajous curves, named after the French mathematician Jules Antoine Lissajous, are mathematical visualizations that represent the motion of two perpendicular harmonic oscillations. These curves are formed by plotting the coordinates of points that correspond to the simultaneous values of the two oscillating variables. The easiest way to design these was to have a program do it for me, so that's what I did. With the help of ChatGPT, I built a Figma plugin to draw out the curves based on whatever parameters the user selects.
Plugin details:
- a: This is the frequency of oscillation along the x-axis for the Lissajous curve. The value of 'a' influences the shape and complexity of the curve, determining how many 'loops' it forms in the horizontal direction.
- b: Similar to 'a', 'b' is the frequency of oscillation along the y-axis. It determines how many 'loops' the curve forms in the vertical direction.
- delta: This is the phase shift between the two sinusoidal functions that generate the Lissajous curve. By altering the value of 'delta', you can change the relative positions of the curves in the x and y directions, leading to a wide variety of different shapes.
- numPoints: This is the number of data points used to draw the Lissajous curve. It's effectively the resolution of the curve; a larger number of points will result in a smoother curve, while fewer points will create a more 'stepped' or polygonal appearance.
- scale: This is a scaling factor that influences the overall size of the Lissajous curve. By adjusting 'scale', you can make the curve larger or smaller without changing its basic shape.
.png)
Had the client gone with this direction, the plugin was intended to be published privately as part of their brand assets for easily creating brand elements when collateral was needed.
I've since published it publicly to Figma if you'd like to play around with it. The curves are live stroke vectors so there's a lot of possibilities.
This "code aided design" route has greatly expanded my creativity as of late. I've built two additional plugins for brand work, one working with color theory and the other for drawing fractals at variable depths. Previously I had been really inspired by the work Pentagram is doing with their identity systems, and going forward I hope to expand in that direction where applicable.