art(fish) simulation: using GPT-4 to recreate my first ever computer science project

Can AI code better than my freshman year self? (yeah, probably)

Mar 15, 2023

(Note: It may take a few seconds for all of the GIFs in this post to load, esp. if you are on mobile!)

Almost 10 years ago, I took my first ever computer science course. I signed up for Introduction to Computer Science only because I needed a math credit. Until that point, I thought I was going to major in either international relations (which I dropped after one course) or history (which I did end up completing a double major in!). Luckily, I enjoyed the Intro to CS course so much that not only did I obtain my math credit, but I also gained a major and a whole career out of it!

One of the most memorable projects I completed during that course was creating a fish tank simulation called “SimFishy.” In the project, I had to make ASCII fish move across a fixed-size “fish tank”. I had to do all this fancy stuff like make the fish move in all directions and wrap around the tank without becoming disfigured. I spent many late nights staying up until 2 or 3 AM fixing bugs and compiler errors (because the project was written in C++).

Yesterday, OpenAI released GPT-4, their newest large language model. Although the fundamentals of computer science taught in introductory courses remain essential, the nature of coding has evolved significantly. After watching OpenAI’s demo of GPT-4, I felt immediately inspired to create something both imaginative and personal using the newest generation of GPT models. I wanted to revisit one of my earliest programming projects — but this time, I could employ AI to write the code faster, better, and more efficiently.

Luckily, I’m a chronic hoarder/recordkeeper, and so I was able to dig up my original code for SimFishy. It took a few tries to remember how to compile the program — it didn’t help that I wrote no documentation back then, nor that I haven’t used C++ in many years. Once it worked, it was quite delightful seeing the old code running again. Below is a short demo of what the (rather chaotic) fish were supposed to do in the fish tank.

In this article, I use the new GPT-4 model to generate code for a fish tank simulation in a JavaScript web app. I show the steps I took to iterate on the project using this incredible new large language model. I further use GPT-4 to transform the code into a 3D simulation using a single request. A project that once took me many painstaking hours and days can be completed in an hour or less. This article shows just how easy it is to generate code using GPT-4 to create a full project — even in domains I am not familiar with (such as 3D objects).

The connection to the namesake of this blog, “art fish intelligence”, is not lost on me.

🤖 Using GPT-4 to generate code

GPT-4 is OpenAI’s newest model, boasting more sophisticated language capabilities than GPT-3.5 (and ChatGPT) and touting multimodal capabilities (given text and image as inputs, it can output text, although this functionality is not yet publicly available). It can be accessed on the same website as ChatGPT by signing up for ChatGPT Plus.

🐟 Attempt 1: Making a tank with a single fish

I started by asking GPT-4 for JavaScript code to make the fish tank simulation. I gave only three lines of what I wanted it to do … and then it started coding!

GPT-4 generated code for a separate HTML, CSS, and JavaScript file. All I had to do was copy and paste them directly into Replit, an online code environment.

GPT-4 created the ASCII fish, placed it in a fish tank, and made it move across the screen. This took less than 5 minutes to create!

You might notice that when the fish reaches the right side of the fish tank, it’s a bit jumpy before it wraps around to the left side of the tank. I address fixing the wrapping logic in the next section.

🌊 Attempt 2: Improving the tank

I bombarded GPT-4 with a series of requests.

First, I asked for a blue background to resemble water:

Update the code so fish tank is a rectangle and has a blue background. The fish should stay black.

Next, I requested GPT-4 to fix how the fish’s wrapping logic:

Check the wrapping of the fish when it hits the tank edge. As the head goes out of frame, it should show up on the other side of the tank in the same trajectory.

I even asked GPT-4 to refactor the code to be more modular!

Make this code more modular and reusable. We might want to have more fish in the fish tank in the future.

For all of these requests, GPT-4 went ahead and executed them flawlessly. With each update, I copied the new code into Replit to see the changes.

Look how cute the two fish are! And the wrapping works perfectly now.

🐠 Attempt 3: MORE FISH!

Now, for the fun part! Let’s add more fish to the fish tank!

Now add another fish to the fish tank.

I was impressed with how well GPT-4 generated the ASCII fish on the fly. Look at the details of fish3!

At this point, things started going wrong. The larger fish (fish3) moved in a weird zigzag motion. Also, half of its body was missing. This is when I had to do a little bit more careful debugging. At this point, I had barely looked at the code other than copying and pasting it.

It looked like the fish was having trouble wrapping around the top and bottom of the fish tank, which it didn’t have to do until now. Luckily, given a little bit of prodding, GPT-4 is pretty good at finding errors and addressing them. GPT-4 even supplies explanations for its errors and how it will go about fixing them.

After this change, the large fish’s body was no longer missing!

Thanks for reading 🎨 art fish intelligence 🐡. This post is public so feel free to share it.

🌈 Attempt 4: Adding color

I wanted to make the fish tank more exciting by adding more color. This was done with a single request:

After I added color, everything was fair game. GPT-4 was not very good at creating ASCII for objects more complicated than fish, such as squids or sand castles, so I sourced the ASCII for those from the Internet. The final product, I admit, while colorful and stimulating, is far from an artistic masterpiece. There is a lot going on, but it definitely makes for a fun fish tank!

I found this iterative coding approach to be a great proof of concept. It showed how powerful these new AI tools are — and how easily they can be used to generate desired code!

🐡 [Bonus] Attempt 5: Converting to 3D

I got a little bit carried away and wondered if I could get GPT-4 to make me a fish tank in 3D! I’ve never actually done anything with 3D before, but I thought I’d give it a shot. I had GPT-4 write code for me in P5, a JavaScript library for creating graphic and interactive experiences.

GPT-4 generated code and I copied it into P5. Only when I ran the program did I realize that the output was not quite what I wanted. 3D objects are a bit more complicated than ASCII, and GPT-4 struggled with approximating the shape of a fish by using a cone and a sphere.

I asked GPT-4 how to make the 3D model look more like a fish. It generated code to load in a fish object and texture file, which I was able to find for free on the Internet after a little bit of scrounging around. I ended up with the following fish and texture. I asked GPT-4 to rotate the fish, and this is how I ended up with this interestingly shaped and colored fish that rotates strangely across the tank.

As I am neither a fish nor 3D modeling expert, I cannot comment too much on this video, other than the fact that my freshman-year self could never have imagined that an AI could generate code for this simulated fish tank in such a short amount of time!

Concluding Remarks

This article aimed to show a compelling use case for GPT-4 — using it to generate code for a full project while providing detailed explanations and iterating on feedback and errors. While one could argue that I did little to no coding to create this project, I actually learned a lot through the explanations and comments GPT-4 provided as it iterated on its code.

GPT-4 has been available for less than a day and yet there are already so many amazing things people have been using it for. Once the multimodal functionality of GPT-4 becomes available to the public, I can’t wait to see how people continue to utilize the incredible capabilities of AI!

I consulted my old journal entries from college to see what kind of headspaces I was in while I was working on SimFishy during freshman year. I’ll wrap up this article with a wonderful snippet I found: “My code worked last night at 2 AM, when I finished, except there were still a few glitches. For example, the clown fish kept on losing its brain and one of the fish had four eyes instead of two and was kind of scary.” How fitting, as I stay up until 2 AM finishing up this very article 💙