Project’s GitHub Repo

About

Stairs is a game where you walk up stairs, step by step, until you give up…

How To Run

The game is hosted HERE through GitHub. But if you want to run it locally, download this code and navigate to it. Then just open the index.html file in your browser and start playing!

Inspiration

This game was heavily inspired by this YouTube video Titled Games that Don’t Fake the Space:

Tech Stack

• HTML (v5)
• CSS (v3)
• JavaScript (ES6+)
• Three.js (via CDN)
• WebGL (via Three.js)

Principles & Practices

Stairs was built using the methodology of Vibe Coding, meaning this code was entirely written using AI, where the human only made requests and handled version control, through git & GitHub for the project. The code was mainly written by Claude Sonnet 3.7 and Gemini 2.5 Pro, but parts of it were written/refined with o3, gpt-4o, and gpt-4.1. The game’s icon was generated using OpenAI’s gpt-4o image model with OpenAI’s ChatGPT web app. These models were utilized through Anthropic’s Claude web app, the Cursor IDE, and Cha. The music is from this YouTube video, which was downloaded using yt-dlp and segmented/clipped using ffmpeg.

Project’s GitHub Repo

Irrational Pi Algorithm Art

Credit & Inspiration

I want to give full credit for this project to @fascinating.fractals and his video about drawing the irrational Pi. It was thanks to his code in the YouTube video’s description and his explanation that allowed me to Vibe Code this project. Credit also goes to Cursor IDE, which was the main tool used to Vibe Code this project.

About

This is a project, created through Vibe Coding, that visualizes the irrational nature of Pi by using a double-arm algorithmic system. The interactive visualization draws beautiful patterns using the relationship between rotational speeds tied to Pi and customizable drawing parameters. Users can experiment with various controls to generate unique artistic interpretations of Pi’s irrationality. After seeing the video on this and seeing that the code was not available, I had to try and recreate it.

Preview

Features

• Interactive parameter controls via a customizable panel
• Options to pause, reset, randomize, clear, or save both settings and imagery
• Pixel preservation mode for high-density trail art
• Load and save your favorite settings as JSON
• Download canvas art with one click
• Each session gives you a different way to visually experience Pi

How to Use

1. Open index.html directly in your browser.
2. Use the ⚙️ icon to toggle the controls panel.
3. Adjust sliders or numeric inputs for speed, arm lengths, trail length, arm skip, or line width.
4. Use buttons to pause or play, reset, randomize, clear, or save the current visualization or settings.
5. Flip Pixel Mode on or off for alternative rendering.
6. Save your settings as JSON, or load previously saved settings.
7. Download your art when you find a pattern you enjoy.

How It Was Built

1. For a quick overview: This project was built using Cursor IDE, Claude App, ChatGPT App, Cha, and Gemini App. The models Claude 3.7 Sonnet, Google Gemini 2.5 Pro, and OpenAI o3 were utilized in most of those tools.

2. I used Cha to extract the content and description from @fascinating.fractals’ video.

3. The content as a prompt was input into Claude App to generate a prototype and render it through their Interactive Artifact side window. Claude’s Claude 3.7 Sonnet was used for this entire process.

4. After the prototype was good enough and I ran out of free chat memory, I created a local git project and transferred the code from Claude’s web app to this local git project.

5. After transferring it, I opened the local project with Cursor IDE, where I have a Pro plan, and I utilized Claude 3.7 Sonnet and Google Gemini 2.5 Pro to finish implementing the project itself. I did use the ChatGPT and Gemini web apps to generate ideas and fed them into the Cursor IDE to fix more complex bugs. In ChatGPT I utilized OpenAI’s o3 model, and in Gemini I used their Google Gemini 2.5 Pro model.

6. I tested the project in my browser by just opening the single index HTML file.

7. The logo/favicon was created by taking a screenshot of one of the images the app generated, cropping it, removing the background pixels, adjusting the color values, and reducing the image resolution using macOS’s Preview app.

8. And finally, I created the .gitignore file, set up the git project’s directory structure, and created a GitHub repo, pushing everything from my local git project to that GitHub repo. I formatted the entire codebase using fm, and I wrote the README.md myself. However, I used Cha to help me draft and polish the README.md. After all of this, the project was done. From time to time, I do pull up Cursor IDE and use the same model(s) to fix errors I find, but overall, the project was done at that point.