Unlocking creative coding using ai

Unlocking creative coding using ai

For many years I have envied the cool kids in the creative coding community. But between a full time job as a designer and some lovely kids I like to spend time with I havn’t really learned to code anything yet.

But with AI I feel like I can begin to play around with some ideas and get quite far with prompting and my basic coding knowledge. This article is intended as inspiration and as a show case of how a designer can explore a vision that requires coding using AI.

Case Study: Recreating a font style

I was watching ‘Krummernes Jul’ with the kids and wasthinking

— “how could I make a text that got random colors for every letter?… and Maybe had some rotation and a slight variation of line spacing.”

I had the vocabulary to describe my vision, but it would be very hard to code it myself.

With AI’s in 2024 I am able to make a mockup using my abilities to describe a vision. My current favourite is claude by anthropic. With its code artifact it is very similar to mocking things up in the online editor of p5.js or codepen.

My first prompt

Hi.
Help me style a text to the following.
The spacing between each letter should be set random between 0 and 10%.
The color of of the letter should be picked by random if an array of 5 colors.
Each letter should have a random rotation between -10 and 10 degrees

That is not bad. It is clearly not what I was aiming for, but for one prompt. This was a lot quicker than searching for a codesnippet on the internet or trying to do it myself. But let us try to get a bit closer.

Second promt

The letter spacing should be between-1 and 2.
Have the sample tekst be krummernes jul.
Let the font family be Ubuntu as a google font. In weight of medium.
And let us have 6 colors: blue, red, pink, orange, brown, green
And add a hard shadow in plain black. 45deg angle with a distance of 2 px

After 2 prompts I feel like w are 80% there. My main issue with this iteration is that the space kinda disapears and a color can be repeated right after it have been used. And then I would like to get the yellow background.

Third prompt

Have a light yellow background on the page.
Make sure if the letter is a space to give it 2% extra letter spacing.
Also make sure the random color selected can’t be the color of the letter before

After this third iteraction I just wanted to tweak it a bit more with the spacing and the shadow.

Make the distance of the drop shadow smaller 
and the add more space to the space symbol

Final tweaks

Now I felt that it was easier for me to finetune the rest manually. So I asked claude to wrapped it up into a single file I could use in visual studio code. And from there I could easily finetune the variables and correct the colors.