Motion Parallax

Ben Dicken

Summary Info

Summary If you've ever stared out the window of a fast-moving vehicle on a road trip, you've probably experienced the effect of motion parallax. While staring out the window as the car moves, objects closer to the vehicle, such as a bush near the edge of the road, appear to zoom by your field of vision. However, objects farther away, such as a distant mountain range, appear to move across your field of vision rather slowly. Why does this happen? This effect is know as parallax.

Motion Parallax is a programming assignment (PA) in which students create a scene that emulates the effect of motion parallax. The task is to write a program that draws a landscape scene on a canvas. As the mouse is moves across the canvas, the perspective of the scene should change using parallax principles.
Topics
 A solution to this PA would utilize math, loops, random, functions, parameters, and graphics.
  • Usage of math operators should be used to get the motion parallax effect to occur.
  • Loops would be potentially needed for several tasks, including the draw loop, drawing the grass, and drawing the birds.
  • Functions and parameters, because the spec requires students to organize their code into functions and params.
  • Graphics is a significant emphasis. There is no console based input or output required.
  • Random, because the color of each of the mountains should be assigned randomly
Audience
 The audience for this PA is CS 1, but it could probably also be used for CS 0.
Difficulty
 If given in CS 0, medium - hard. If given in CS 1, medium.
Strengths
  • The PA is customizable, but I can talk about this later.
  • This PA allows the students to add creative additions to their solutions. Students can be given some creative liberty in adding to the landscape that is drawn. If this PA is accepted for a nifty assignment, I could show some of the interesting creative solutions that students submitted.
  • This PA should really get students more comfortable with graphics. They need to draw a number of shapes, and implement the motion correctly (both the parallaxing motion and the motion of the birds).
  • This PA does not require the students to directly use data structures. Thus, it could be given as an assignment in the first half of a CS 1 course, before data structures are introduced.
Weaknesses
  • Manual grading by instructors or teaching support may be necessary.
  • There ends up being quite a bit of math to get a solution to this assignment to work correctly. students may find this tedious
  • The time investment involved in scaffolding to prepare students to begin this PA.
Dependencies
 My solution to this PA depends on a graphics module (graphics.py) that I wrote. Though, other instructors may use either a different custom graphics module, or have their students use standard ones (TKinter with Python, JavaFX for Java). I have also included a link to graphics.py later on this page.
Variants
 This PA could be modified so that students draw something other than just a landscape. For example, students could be required to draw a cityscape, seascape, or replicate the scene from a famous painting. The instructor could also give students the freedom to come up with a scene of their choice, so long as they fit within the instructors requirements.

Even when sticking with a particular scene (such as the landscape show in the provided spec), students can be given room to add custom elements to the scenes that they draw.

Resources

The writeup of the PA specification is available here.

This PA was given in CSc 110 at the University of Arizona. Python is the language used in this class. For the graphical component, students were supposed to use the graphics.py module, which is a library that I wrote, and this module uses TKinter. If the course you'd like to use this PA for is python-based, you are welcome to use graphics.py. You could also have students use TKinter directly. This could still be used as a PA for a course that uses a different language, just determine which library you'd like your students to use.

In CSc 110, students are supposed to follow the code style guidelines. You may reference this also, if you'd like.