The Image as Inspiration
As mentioned in my last blog post, I’d bring you along in my visual arts journey to share and inspire. This project started as a short walk through the neighborhood. I always see a number of cracked surfaces along the way and this time decided to snap a quick image of a fractured sidewalk. This became the basis for the project. See Figure 1.

There’s a lot of meaning that can be symbolized by a fracture and it can mean different things to different people. This led me to the realization that I can portray this same fractured surface in a variety of ways (my iPhone, an ink doodle, and code generated art crafted with p5.js). In the realm of art and design, expressing a single idea through various mediums can unveil unique perspectives and techniques. This exploration not only highlights the versatility of visual representation but also underscores the synergy between traditional and digital tools. Additionally, I leveraged the capabilities of ChatGPT to assist in developing the code for the p5.js project, showcasing the collaborative potential between human creativity and artificial intelligence.
Ink Doodle: Translating Reality to Art
Transitioning from photography to drawing, the ink doodle offers a more abstract and interpretive representation of the fracture. This particular image reminded me a lot of neurographic art (from Gabrielle Anna Cormier’s Youtube channel), so I felt it would translate well to an ink doodle. Using traditional ink and paper, I focused on capturing the essence and movement of the fracture lines. The variability of ink allows for expressive lines of varying thickness which worked well to capture the variations in the surface cracks. This method emphasizes the artistic interpretation, providing a contrast to the precise realism of the photograph. The doodle not only reflects my personal style but also invites viewers to perceive the fracture through a more subjective lens.
I started with this simplified version in a small sketchbook. See Figure 2.

Then, got inspired to go larger and more creative and complex. See Figure 3. In this one, I added an ink wash over the ink lines representing the cracks to provide a more weathered look. Both doodles are much more abstract representations of the original iPhone photo.

Code Generated Fractures
If you take a look at my other code generated art, most of it is inspired by nature in my attempt to showcase the interplay between the natural world and the digital world and how math and algorithms play a key role in what you see in the natural world. This effort was no different and I took it to another level by introducing AI into the mix.
While I have a lot of experience coding in python and p5.js and creating graphics using both, I’ve also been exploring how to leverage AI and tools like ChatGPT to augment and jump start creativity and the creative process. Instead of Googling to remember how to perform certain functions or get inspiration, I can simply share my initial concept and even the original image and let ChatGPT help me get things rolling. While of course you can ask ChatGPT questions and get answers and it does quite well at generated code which actually works, it isn’t as great at more creative or complex tasks. However, it is a great collaborator. My general approach is to explain the role I would like ChatGPT to play and then share the overall concept or output I’m trying to achieve. This tends to get things rolling and then let the collaboration begin!
The Process
- Share my background and how I’d like ChatGPT to respond and any other relevant information. In my case, I pre-configured ChatGPT for this so I can skip this step.
- Explain that I’d like ChatGPT to act as a visual artist who is great at using code to generate art imitating life. You can get more creative with this, but it’s always a good idea to start this way to get better results.
- Share my idea. I started by sharing that I’d like to brainstorm an approach to generage art that would simulate cracks in a sidewalk. I got back a full outline of how to approach the challenge.
- At this point, I could have simply asked for the code, but I knew it would be quite generic so instead I shared the image in Figure 1. ChatGPT can analyze images and use them to influence output (I have the paid version but I believe this works in the free version but usage is capped).
- At this point, ChatGPT responded by analyzing, realizing the image contained cracks and came up with an approach to mimic the branching patterns. See Figure 4 and Figure 5.
- The core of the code was a Crack class in which each crack grew over time based on random adjustments and it would occasionally create a new branch by creating another instance of the class. Of course this code wasn’t quite what I wanted, but this core code allowed me to immediately start iterating with working code and tailoring it to my idea. What would normally take a few hours to get going, took minutes, allowing me to be more creative.


- It did a nice job of generating cracks eminating from a point, but there were several issues to fix and it didn’t really represent the more geometric pattern in the original image. I also wanted to customize and parameterize the Crack class to meet my needs. This part involved creating a new function, several adjustments and iterations.
- In order to get closer to the geometric pattern in the original image, I decided to start the cracks at vertices of cells in a Voronoi diagram. I rememberd that Voronoi diagrams have a similar pattern from a previous project. While I could have resused that code, I decided to ask ChatGPT for help again and it suggested two approaches to generate a Voronoi diagram. I chose the one leveraging a Voronoi library (simpler).
- Now that I had a way to generate Voronoi vertices, I merged this with the code which generated the cracks so that cracks would be generated originating from each vertex of every cell in the diagram.
- I then needed to connect the vertices to make it look like larger cracks which spawned the smaller cracks. For this, I used my “squigLines” function and the result is below in Figure 6.

As you can see, it’s getting a bit closer to resembling the original iPhone image but not quite there. I’m definitely not finished with this one, but thought I had enough to share and potentially inspire others.
Enhancement Ideas
These are a list of the enhancements I have planned or have thought about. Let me know in the comments if you have ideas or would like to know more or see the code.
- Post the working code to this site so everyone can play with it
- Add sliders to allow for easy changing of the parameters
- Experiment with different color palettes
- Use different shapes as the origination points for the cracks. For example, I plan to create cracks around the outside and inside of a circle to simulate a sunburst or lunar eclipse
- Use transparency and more painterly effects
- Add a textured pattern
Final Thoughts
Well, there you have it, fractures, 3 ways. Exploring the concept of a fracture through photography, ink doodling, and generative coding has been an enlightening journey that underscores the diverse avenues of creative expression. Each medium offers its own set of tools and perspectives, allowing for a multifaceted exploration of a singular idea. Moreover, integrating AI assistance through ChatGPT in the coding process highlights the evolving relationship and collaboration between technology and artistry. As we continue to innovate and experiment, the fusion of traditional techniques with digital advancements promises endless possibilities for creative endeavors.
I’d love to hear your thoughts on visualizing concepts through different mediums! Have you experimented with combining traditional art and coding in your projects? Share your experiences in the comments below or reach out through my socials (click the icons at the bottom of any page) or email me directly at [email protected]
Stay tuned for more creative explorations!