Okay, so today I'm gonna walk you through this little side project I did, messing around with simulating the Medellin electric stairs. You know, those outdoor escalators they built into the hillside? Pretty cool, right? I thought it'd be a fun challenge to try and recreate the movement in code. So, let's dive in!
First off, I started by scouring the internet for any decent photos or videos of the stairs in action. I needed to get a good feel for the angle, the number of steps, and how fast they moved. Found a few good ones on YouTube that I paused and studied frame by frame. This was important – I needed real-world data to make it look convincing.
Next, I fired up Processing. Yeah, I know, it's a bit old-school, but it's perfect for quick visual prototypes. I wanted to get something on screen fast. I started by just drawing a single rectangle to represent one step. Then, I duplicated that rectangle a bunch of times, positioning them at an angle to mimic the stairs. It looked super basic at this point – just a bunch of angled rectangles – but it was a start!
Then came the tricky part: animating the movement. I figured I needed to create some kind of system where the steps would "move" up the slope and then disappear at the top, reappearing at the bottom. I messed around with using modulo (%) to create a looping animation. Basically, each step had a position variable, and I’d increment that variable each frame. When the position reached a certain threshold (the top of the stairs), I’d reset it to the bottom. This gave the illusion of continuous movement.
Spent a good chunk of time tweaking the speed. It was either way too fast or painfully slow. I ended up using a float variable for the speed and then playing around with decimal increments until it looked about right. You really gotta eyeball this kind of thing. There's no real science to it, just a whole lotta "does this feel right?"
After the basic movement was working, I wanted to add a bit of depth. So, I played around with changing the color of the steps based on their position. Steps further away (towards the top of the stairs) were slightly darker, and steps closer to the viewer were lighter. This made the whole thing look a bit more three-dimensional, even though it was just a 2D simulation.
One of the bigger challenges was getting the timing of the steps right. If they were all moving in perfect sync, it looked really unnatural. So, I introduced a slight offset to the starting position of each step. This meant that each step started its movement cycle at a slightly different point, which created a more staggered, realistic effect. It's those little details that really sell the illusion!
To make it a little visually interesting, I threw in a basic background. Just a simple gradient that faded from dark blue at the top to a slightly lighter blue at the bottom. Didn't want to spend too much time on it, but it definitely helped to frame the stairs and make them pop a bit more.
Finally, I added some basic interaction. I made it so you could use the mouse wheel to adjust the speed of the stairs. Just scrolling up would speed them up, and scrolling down would slow them down. This was mostly just for fun, but it's always good to add a little interactive element to these kinds of projects.
Overall, it was a pretty fun project! Learned a few things about creating looping animations and simulating movement. It's not a perfect recreation of the Medellin electric stairs, but it gets the general idea across. Plus, it was a good excuse to dust off Processing and mess around with some code. If you're looking for a fun weekend project, I definitely recommend giving something like this a try!
