CSc 101: Car Race

You will write a processing program that generates an animation of two cars racing against each-other. This is the first assignment you’ve had that involves movement and animation. Thus, you’ll need to use the setup() and draw() functions to get the motion to work.

Below is a gif demonstrating what the animation should look like:

This is a top-down view of two cars racing to a finish line on a race-track. Notice a few things about this animation:

The road background is made up of alternating dark/light gray lines spanning the whole screen. These bars should be created using a for-loop, and slowly moved across the screen.
The yellow lane-stripes are “painted” down the middle of the road.
The red stripe is the finish line. It starts off-screen, but scrolls onto the screen a few seconds into the animation.
The top lane has a green car (just drawn with two rectangles), and the bottom lane a blue car. As you can see, the blue car is moving faster, and wins the race.
The cars move up/down in their lanes to “follow” the mouse pointer. You may use the mouseX and/or mouseY variables to get this working correctly. Each car should stay in it’s own lane.
Once the finish-line goes off screen, the animation is “done”.

Programming Strategy

As you can see, there are a lot of “moving parts” in this animation, which might make it seem really hard. Don’t be intimidated! If you work on the animation one part at-a-time, it is easier to think about and write the code for. I recommend that you work on this animation in several phases, rather than trying to do it all at once.

First, work on getting the road pattern drawn and animating correctly. For example:

The road pattern is really just alternating dark/light dray lines (or rectangles) that span the entire height of the canvas. If you zoom way up on the road, the pattern is simply:

You should use a for-loop to repeat this pattern on the road. You can either use lines or rectangles. Once this is working, then add in the road stripes:

Then, add the cars in, without worrying about tracking the mouse positions:

The last step should be making the cars follow the mouse position.

You must use the setup and draw functions, like we discussed in class. Also, start early! This assignment shouldn’t be super “hard”, but it will probably take much trial-and-error get the various patterns animating properly. You should start at least a few days before the deadline, ask questions, visit office hours, etc.

Name the program car_race.pde.

Matching Colors and Shapes

You should do your best to match the colors and sizes of the road and lane stripes, but they don’t need to be “pixel-for-pixel” perfect. You are welcome to customize the color and look/style of the finish line and the race-cars. However, the bottom car should be the one that wins.

The canvas should be between 600 and 800 pixels wide, and between 400 and 500 pixels tall.

Comments

Your program file should have a “header” comment at the top that has the following format:

//
// Author: Student Name
// Description:
//    A short description of what this program does!
// 

Even though this is a small program, it is important to get in the habit of commenting on your code. This is considered good programming style, and it even more helpful once you start writing larger programs.

Submission and grading

This was assigned on 9/15/2017. It is due on 9/22/2017 at 5:00pm.

Turn in each of the files described in the spec (just 1) the assignment 5 drop-box in D2L before the due date. Make sure to name the files exactly as this document specifies. In general, make sure to follow these instructions precisely. If you don’t, we will deduct points!!!