Constructing a model identification with code
Lately had a enjoyable branding undertaking come via at my day job. One in all my unused model instructions was the concept of utilizing Lissajous curves to type elements of the brand and numerous model components.
Lissajous curves, named after the French mathematician Jules Antoine Lissajous, are mathematical visualizations that signify the movement of two perpendicular harmonic oscillations. These curves are shaped by plotting the coordinates of factors that correspond to the simultaneous values of the 2 oscillating variables. The simplest option to design these was to have a program do it for me, so that is what I did. With the assistance of ChatGPT, I constructed a Figma plugin to attract out the curves based mostly on no matter parameters the person selects.
Plugin particulars:
- a: That is the frequency of oscillation alongside the x-axis for the Lissajous curve. The worth of ‘a’ influences the form and complexity of the curve, figuring out what number of ‘loops’ it types within the horizontal route.
- b: Just like ‘a’, ‘b’ is the frequency of oscillation alongside the y-axis. It determines what number of ‘loops’ the curve types within the vertical route.
- delta: That is the section shift between the 2 sinusoidal capabilities that generate the Lissajous curve. By altering the worth of ‘delta’, you’ll be able to change the relative positions of the curves within the x and y instructions, resulting in all kinds of various shapes.
- numPoints: That is the variety of information factors used to attract the Lissajous curve. It is successfully the decision of the curve; a bigger variety of factors will lead to a smoother curve, whereas fewer factors will create a extra ‘stepped’ or polygonal look.
- scale: This can be a scaling issue that influences the general dimension of the Lissajous curve. By adjusting ‘scale’, you can also make the curve bigger or smaller with out altering its primary form.
Had the shopper gone with this route, the plugin was supposed to be revealed privately as a part of their model property for simply creating model components when collateral was wanted.
I’ve since revealed it publicly to Figma if you would like to mess around with it. The curves are reside stroke vectors so there’s loads of potentialities.
This “code aided design” route has significantly expanded my creativity as of late. I’ve constructed two extra plugins for model work, one working with shade principle and the opposite for drawing fractals at variable depths. Beforehand I had been actually impressed by the work Pentagram is doing with their identification methods, and going ahead I hope to develop in that route the place relevant.