I Created Something Cool and Satisfying to Watch with HTML Canvas (A Plane Infinitely Drifting Through Space)
Sometimes the best projects start from boredom.
During the week, I was feeling restless and wanted to work on something creative. I’ve been building out a Canvas 2D programming series on YouTube, but at the time I’d only uploaded the intro videos. While thinking about what to build next, an idea hit me:
Why not create something visually satisfying with Canvas 2D that could also evolve into a future game project?
That idea eventually became this:
🌌 An infinite looping space world with drifting ships, stars, asteroids.
The Idea 💡
I decided to start small.
Instead of immediately building gameplay systems, weapons, multiplayer networking, and all the complicated stuff, I focused on the foundation: the world itself.
I wanted to create a simulated infinite world where objects leaving one side of the screen would appear on the opposite side like the world is wrapped around itself.
Kind of like how our spherical Earth works 🌍.
You can keep moving forever without hitting an actual edge. That became the core concept.
The Challenge
At first, I thought the looping world logic would be easy.
It was not 😂.
I spent hours trying to make the wrapping system behave correctly. Even AI wasn’t helping much at some point, so I had to sit down and deeply think through the mathematics and coordinate system myself.
Eventually, I figured it out.
And guess what the biggest issue turned out to be?
*A silly variable name mix up * 🤦♂️.
The funny part was that I knew my logic should work, which made debugging even harder. I kept ignoring the possibility of a tiny mistake because I was so focused on the bigger system.
That’s one thing programming constantly teaches:
Sometimes the hardest bugs are the smallest ones.
Building the Space World ✨
After many hours (and days) of refining things, I completed the first stage of the project. And honestly… it became incredibly satisfying to watch.
Here’s what I added:
⭐ Animated stars
☄️ Asteroids
🚀 Drifting planes/ships
🌌 Infinite looping space
✨ Smooth ship trails
🗺️ A minimap system
The minimap is one of my favorite parts, it lets you detect approaching ships before they even enter the screen. That small detail made the world feel much bigger and more alive.
Bonus: I Accidentally Built a Small Tool Along the Way 😂
While working on the project, I also ended up creating a small editor/tool for designing shapes.
The funny thing is… I never planned to build it 😅.
I created a space where I could draw objects with snapping/grid support to make the shapes more consistent and easier to design. The tool also lets me copy the shapes as normalized vertices, which I can directly use inside the game.
That means I can design ships or objects visually and immediately convert them into reusable game data a little shape editor that turned into a mini side project.
Is it buggy? Absolutely 😝.
Am I planning to fix everything? Probably not 😂.
But honestly, it does exactly what I need it to do, and sometimes that’s enough.
The Infinite World System
Here’s the interesting part: the world is not actually infinite.
It’s a looping toroidal world. That means:
- The left edge connects to the right edge
- The top edge connects to the bottom edge
So when an object exits one side, it seamlessly reappears on the opposite side. This creates the illusion of endless space while keeping the simulation efficient and manageable.
Why I Built This
This project is also connected to an older game project I abandoned some time ago: Rocket Raiders.
While building this experiment, I realized I could evolve the system into something much bigger. So now I’m considering turning this into a full multiplayer space shooter game.
Maybe this time I’ll finally finish it 😄.
Tutorials Coming Soon 🎥
I also plan to create:
- A full tutorial for this project
- A deeper blog post explaining the technical details
- More Canvas 2D videos
I’m currently working on a complete Canvas 2D tutorial series on YouTube where I’ll cover everything from beginner concepts to advanced rendering systems Canvas 2D from A to Z, no stone left unturned.
Web Graphics Programming with Canvas 2D - YouTube
Welcome to the Web Graphics Programming with Canvas 2D course. This course is designed to introduce you to the fascinating world of graphics programming on t...
youtube.com
The next episode drops next week, and I’m making sure every episode is better than the last. Like, subscribe, and hit the bell 🔔 so you don’t miss it.
Check Out the Project 👇
🔴 Live Demo
**📁 GitHub Repositories**
Voidfront
An infinite looping space world built with HTML Canvas 2D - drifting ships, animated stars, asteroids, smooth trails, and a minimap. Strangely relaxing to watch.
✨ Features
- 🌌 Infinite looping world - objects exit one edge and reappear on the opposite side, creating a seamless toroidal space
- 🚀 Drifting ships - multiple planes drifting independently through the world
- ✨ Smooth trails - each ship leaves a fading trail as it moves
- ⭐ Animated stars - parallax star field for depth
- ☄️ Asteroids - scattered across the world adding life and obstacles
- 🗺️ Minimap - spot approaching ships before they reach your screen
- 🛠️ Shape editor - a built-in visual tool for designing and exporting normalized ship/object vertices
🌐 Live Demo
👉 Try it here
🧠 How It Works
Toroidal World
The world is not actually infinite - it's a looping toroidal space. Think of it like the surface of…
Final Thoughts
One thing I love about creative coding is how a random experiment can suddenly evolve into something much bigger.
What started as:
Let me build something interesting with Canvas 2D
…slowly became:
This could actually become a full game.
And honestly, just watching the ships drift endlessly through space is strangely relaxing.
If you’re curious about Canvas 2D, come join me on the YouTube series we’re just getting started 🚀.
See you!
Top comments (0)