Introduction
In my spare time, I love to explore my creative side. Lately, I’ve been having a blast working with GPT-4, ChatGPT, and other AI language tools. They’ve helped me create everything from funny poems to collaborating on code projects that once seemed out of reach.
A Spark of Inspiration
My journey began with a fascination for Jackson Pollock’s drip paintings. I wondered if I could create digital versions of these mesmerizing works. With Python coding and another person’s web app, I produced a series of digital drip paintings and minted them as NFTs. Check out my previous NFT project, Dripping with Emotion.
Yet, I wanted more. I dreamed of dynamic, animated digital paintings, but my limited JavaScript skills held me back.
AI to the Rescue
With ChatGPT, I experimented and generated a web page that takes any input word and uses it as a seed for a random drip art generator. I published this fun little web app at https://dripart.io. It uses JavaScript and HTML to create random ‘paint drips’ and generates them over time. The seed system makes the pages shareable, adding to the excitement!
Here’s an example of some art that it generates:
A Look Behind the Curtain: GPT-4’s Collaboration
Interestingly, I barely touched any of the code behind this project. Most of it was written by GPT-4, and I just kept guiding it along to make the features I wanted. It’s incredible how AI has helped me achieve something that would have been much more difficult on my own. Let’s dive into some of the key aspects of the code:
Seed System
The seed system is the core of the web app. It uses the input word as a seed for generating random drip art. To achieve this, GPT created the following JavaScript functions:
getSeedFromURL(): This function extracts the seed word from the URL’s query parameters.hashStringToSeed(s): This function takes a string as input and returns a hash value to seed the random number generators in the p5.js sketch.
Drip Generation
Drips are generated using the createDrips() function, which takes a p5.js instance and a number of drips to create as arguments. It uses the LineDrip and DotDrip classes to create randomly positioned and sized drips in different colors.
Animation and Interaction
The p5.js library handles animation and rendering, while JavaScript handles user interactions. The hideWarningAndOverlay() function is triggered when the user submits their seed word, which then calls the regenerateDripsWithSeed() function to create a new set of drips based on the input seed.
Responsive Design
The web app is also designed to be responsive, with CSS media queries adjusting font sizes and element widths for smaller devices. This ensures that the app looks great on all screen sizes.
It’s fascinating to see how GPT-4 played a significant role in creating this web app. With just a little guidance, it generated the code, and I was able to bring my vision to life.
It’s been a fantastic project, and I did it all in a weekend! I can’t wait to see what more I can accomplish.