Art from Code: Miami Beach Coaster Club

A look inside my evolving project

As I pursue computer science, I am interested to see what directions I can go in with coding. My first idea for my conference project was to build a bouncing jelly bean simulator. You would add beans to the circular jar and watch them move and bounce off each other while adding more or rotating the jar. I learned a lot about collision while creating my first attempt at my project. 

Midway into the semester, we were instructed to make an amusement park ride. I created a roller-coaster ride while using multiple circles and cars to create a seamless looking ride. I decided to add more to my roller coaster or make a scene from an amusement park. 

I started very basic by adding a hot air balloon, ice cream stand, and a water slide to the sketch. I wanted to use colors that would pop but not a pallet that was too vibrant. Dividing the window into thirds helped establish where I would put particular objects and how they would interact with each space. After discussing my project with Angela, we brainstormed details that would make the piece more visually appealing. 

There are many simple lines, circles, and bezier curves coded into the project to create depth. The boardwalk’s wooden floor has many lines increasing in stroke weight as they get closer to the fence. The fence has a small circular bend to it. Many objects are overlapping each other, creating the illusion of depth with different sizes. 

After I was able to place everything in specific spots, I tackled the movement. I decided to go with a basic “person,” making a simple triangle body with a circle head. The simple person design gives me more freedom to work on the people’s walking and collision—each person is created through the people class with an x-speed and y-speed. The y-speed has noise attached to create a bouncing look to make it seem more like walking. I add noise to the hot air balloon’s movement to make it “float” in the air. 

Lastly, there are a lot of collisions to keep the movement flowing. I worked with collision in my first idea for my conference and used it in the boardwalk conference. The first type of collision I coded was with an object and the border. For example, the people are only allowed to walk on the boardwalk and are constricted to a large rectangle and either change their x-speed or y-speed (speed also controls direction) when they hit an edge. Then the next collision was with like objects. The people walking around and the tubes have collision functions to make them bump off each other if the distance between them gets too close. 

The last collision functions are with specific objects that set off a task. When a person hits the ice cream stand, they will change their x-speed or y-speed to turn around. The person will also display an ice cream cone when they hit the ice cream stand. Also, if one of the people walks close enough to the hot air balloon base while the balloon is low enough, the basket will display a person inside, and a timer will turn on to instruct the balloon to go up and then come back down.

I also wanted to incorporate some keys the user can use to interact with the code. The up and down buttons control the hot air balloon’s height, and the spacebar adds additional tubes to go down the slide.

I have done many coding projects, but this has been the most enjoyable to create. Every time I added a detail to the boardwalk, I thought of more. This project is endless and something I could pick back up whenever I wanted. I learned a lot about my process of tackling a specific design or movement. I became a more efficient coder by thinking through an idea before implementing it.

Author: Tiffany McBrayer