My Car Ant-Farm
Try it yourself
I can’t believe I get to share this with my dad — it’s the coolest bit of code I’ve written recently. It’s an ant-farm full of cars!
It’s my first time being able to share my work in public. I joined the iTwin Platform team recently and was super excited (and nervous) to work on my first task. I got together with my manager to brainstorm a sample that I could write (to explore iTwin.js and its sandbox).
I remember seeing a demo a few months ago with cars zipping around on a real-world map! They even stopped and waited at intersections. Now that’s the sample I wanted to write. I could use the original source code — which looked like magic— as a launching point and put my own spin on it.
During our discussion, my manager introduced me to a fancy buzzword: data federation — pulling in separate data streams and using them together. This sample would explore the concept of integrating OpenStreetMap (OSM — an awesome API used for getting street data) with iTwin.js.
I was nervous starting out because I was fresh to the iTwin.js scene. I could never imagine coding my very own car ant-farm. So before jumping into the code, I had to hit the books and do research. For that, I went to the place where all iTwin.js rookies hang out — the sandbox samples.
These samples were valuable because they answered some important questions — What were the cars made of? Decorators? How do they work? Will I ever be able to make one?
Once I got a good grasp of how decorators worked, I felt confident enough to look at the (magical) source code. The next step was to port it into my very own sandbox. I read through it line-by-line to uncover the bits I needed. The important ones were the car decorator, OpenStreetMap query, and code that glued them together.
I hooked these pieces up to the right places in my sandbox with one eye closed and my fingers crossed and pressed play.
And…Woah, it actually worked? No way! I saw thousands of cars driving along actual streets and intersections! Working their way through like ants! I ran around the apartment…and then had to sit down for 10 minutes. When I returned to my computer, I immediately sent screenshots to all my work friends.
Creating the Sandbox
With my heart still racing a bit, I took a few deep breaths. It was time to organize my code and make it look pretty. To avoid being overwhelmed, I decided to break my tasks up into bite-sized pieces. I tucked away the scariest code (OSM query and data parsing) into a black box (to be dealt with later). I used the samples as a reference to structure the decorator code and create a blank widget.
After this initial success, I thought to myself, “Wow, okay. This isn’t actually that bad. I can totally clean up this code and make it accessible as a sandbox.”
Things were starting to get exciting. I followed the cars zooming through roads, envisioning myself as one of the ants driving in my sample. I imagined weaving my way down crowded highways, traveling to different places. Roads might be empty or packed full. I might even need to drive on a different side of the road (in some countries). I thought, “Oooh, what if my ants had super powers and could teleport anywhere in the world?” Maybe Singapore, Tokyo, or Madrid? Or even home to my mom and dad’s house.
I added UI elements that would help me make these scenarios a reality. I pulled logic from the global display sample to add a way to teleport. For the first time, I was interacting directly with my ant-farm.
I smiled. My confidence was growing.
I demoed these features to my team to decide on a UI, polished up the decorator, and removed any excess code. It looked shiny and clean, and I felt like I owned this. My little farm looked complete…but I still had one last thing to tackle — the daunting OSM code.
I carefully peeled the tape off the black box hoping to uncover its secrets. I took a steadying breath and reminded myself of the progress I had made so far.
Remember how I said the original source code was magical?
Yeah, this stuff was straight out of a wizard’s spell book.
I went through it in chunks and took pseudocode notes. I noticed it was pulling data from OSM and crafting a network of streets and intersections. I bottled each chunk up into self-contained functions to understand it better. There was still tons of magic happening…but I was starting to feel more like a wizard.
For other curious wizards, here is my pseudocode:
→ Request data from OpenStreetMap
→ Count the times each point on a street is used to find where intersections exist.
→ Iterate through the data to create streets from one intersection to the next, leaving room for the intersections themselves.
→ Iterate through the streets I just created to create intersections between each incoming and outgoing street.
→ Create starting locations.
→ Create probabilities that will influence which road a car will take out of an intersection
→ Return streets, intersections, starting locations, and probabilities.
Next thing I know…I finished my first sample! It federates (that’s right, I just used that buzzword) real-world data with an iTwin viewer that visualizes cars weaving their way through a city. It MAY seem like the cars are running over each other — but they are actually flying. It’s not a bug — it’s a feature.
I promise :)
The only bugs here are the self-driving ants.
Thanks to this sandbox, I feel like I’m not a rookie anymore. I have graduated 🥳. AND as a bonus, I got to showcase it in front of 200 people at an iTwin meeting!
But the person I am most excited to send it to (along with this article)…is my dad.
