Lab Exam 1 Study Guide

On Tuesday, September 22nd, you will have your first lab exam. This is a study guide for your benefit, so read the whole thing, and if you don’t understand the concepts, read over the lecture notes, go over the reference material like your textbook, or google it. Seriously. Then, as the very last resort, ask an instructor or TA at office hours or on Piazza.

A note about the exam itself

The lab exam will consist of simple programming assignments that you will submit to Autolab for grading. You must be in your lab section on time to take the exam and you may use your laptops. However, the only pages you may have open are sketch.jsindex.html, and Autolab for when you are submitting your exam at the end.

You may not be on any other window during this exam and you definitely cannot look at p5.js examples, your code from previous assignments, or someone else’s code. If you try any method of cheating, your name will be taken down and you will be held accountable for violating CMU’s policies of academic integrity.

That said, we will provide a simple cheat sheet and you can still ask your TA questions during the exam if you can’t understand a question. You may not ask questions like “How should I do this?” That is the whole point of the exam.

If you get stuck on a question, try these steps:

  • Read the instructions very carefully. Dwell on them as if they were hints, because they practically are.
  • Draw out what you need to do by hand
  • Implement what you need to do in order. Don’t try to skip ahead and confuse yourself.
  • If your code is looking way too complicated, take a step back and remember the different techniques you learned in class. Your code must be efficient.
  • Use print statements and other debugging techniques if your program is not working like you want it to.
  • Take a deep breath

Also remember to maintain good style, but we do understand that you are in a pressured environment. In addition, it would be silly to lose points because you submitted the exam project wrong, so give yourself time to submit it correctly and double-check if it works. Alright, now for the study guide.

Things you should be able to answer

No, this is not a written test, but these questions are fundamental to your understanding of how to solve a problem using code.

General

  • What are the functions setup() and draw() and how should you use them?
  • How does noLoop() affect those two functions? What about frameRate()?
  • How do you create a canvas and how do the variables width and height relate to that function?
  • Where on the canvas is the value (0, 0) and where is the value (width, height)?
  • How do you declare a variable and when would you want to declare it globally as opposed to locally? What does scope mean in relation to all this?
  • How do you assign or re-assign a value to a variable?
  • How do you use the parameters for functions like ellipse(), rect(), triangle(), point(), line(), and triangle() in order to draw simple geometric shapes?
  • How do fill(), stroke(), and strokeWeight() affect things that you draw?
  • How do you make a color and what are the values specific to color?
  • How do you change the rectangle or ellipse mode and how does that affect how you draw shapes?
  • What do the variables mouseX and mouseY do and how is this useful? (Think back to your mouse follow and mouse detection assignments.)
  • What do the functions min(), max(), and constrain() do and how would you use them to limit a variable? How is this useful?
  • What does the random() function do and how do we give the function a lower or higher bound? How did you use this in your assignments?
  • How do use print to debug your code?
  • How do you make a string from an integer so that you can print it?
  • What does it mean to concatenate strings and why is this useful?

Conditionals

  • What is an if statement? What does it allow you to do with your code?
  • Why does an if-statement use curly braces instead of semi-colons?
  • An if-statement takes a conditional. What the heck is a conditional and why is it necessary for an if-statement?
  • How do you check if a variable is greater than, equal to, lesser than, or not equal to another variable or number in a conditional statement?
  • What does && and || mean and how do you use it to combine conditional statements?
  • What is an else statement and how is it used with an if-statement? Can it be used separately from an if-statement?
  • What is an else if statement and how is this different/useful?
  • How have you used conditionals in your assignments?

Iteration

  • What is a for loop? What does it allow you to do with your code?
  • What does iteration mean and how do for loops let you solve a problem with iteration easily?
  • Why does a for loop use curly braces instead of semi-colons?
  • The three parts of a for loop include three expressions: initialization, a test statement, and an iteration statement. What do these parts do/mean and how do you write them in code? How does the test statement use a conditional? (Check out this reference for help.)
  • Why do computer scientists zero-index things?
  • How do you compute multiple/different things using the iteration variable?
  • When would you want to use a nested for loop?
  • What is the difference of drawing multiple things using draw() as opposed to a for loop?

Moving Objects

  • What function is the most important for allowing you to animate things in p5.js?
  • What does translate() do and how do you use it?
  • What does rotate() do and how do you use it?
  • Why does rotate automatically set (0, 0) as its rotation point? How do you rotate an object at it’s center rather than the upper left corner of the screen?
  • How can you convert a degree measurement so that rotate accepts it?
  • What do push() and pop() do? How are they used and which functions do you use with them?
  • How do you get an object to move across the screen just using variables????!!!!! (Check out this reference to bounce a ball)

Other Things

  • What is mousePressed() and how do you use it?

Exercises to prepare

Even if you think you understand all these concepts, the key is to be able to use them together as tools. Here are some exercises that may help you study.

  • Make a square in the center of the screen. When you click on it, it needs to do several things:
    • Change to a random color
    • Change to a random size within the canvas bounds
    • Change to a circle on every even click and change back to a square on every odd click.
  • Draw 10 lines so that, for each line, one endpoint is on the mouse. The other endpoints must be evenly spaced along the bottom of the screen. You must use for loops.
  • Draw a black circle on the upper left of the screen and a large square in the center of the screen. Animate your circle so it moves in the downward right direction at the rate of 1 pixel per frame. If the circle’s center is within the square, the circle must be white. Otherwise, it must return to black.

Reference videos from Dan Schiffman

https://vimeo.com/channels/learningp5js/138935676 (conditional statements)
https://vimeo.com/channels/learningp5js/138935678 (if / else if)
https://vimeo.com/channels/learningp5js/138935675 (bouncing ball)
https://vimeo.com/channels/learningp5js/139013336 (while and for loops)
https://vimeo.com/channels/learningp5js/139013372 (nested for loops)
https://vimeo.com/channels/learningp5js/139587733 (functions)

Good luck everyone!