*A process modified from the PRIMM approach (official website)
Steps to start practicing reading and interpreting the code before running sketches:
- Predict • Before you run the sketch, look at the code and decide what it
will do.
- Read through the code as if "you" were executing it like the computer, line by line.
- What elements will appear? What will they look like, and how will they behave?
- How many are there? Are they related to one another? How?
- What's the logic or flow structure?
- If it helps, draw what you think the output will be.
- Run • Run the sketch and test your prediction(s). Is the output what you expected?
- Investigate • Go back to the code and map the individual lines or blocks
of code to the output features that you observed when you ran the sketch. If
it helps to test/reinforce your understanding, try:
- Logging the values of variables and operations to the Console instead of
calculating them in your head, i.e.
console.log(some variable or operation)
- Changing function parameters and variable values in substantial ways, i.e. make some numbers really big or really small
- Commenting out parts of the code to see what happens or to help you focus on smaller sections at a time.
- Write tracing statements to test the order in which statements are executing.
- Consulting the resources for the assignment if you see anything new.
- Logging the values of variables and operations to the Console instead of
calculating them in your head, i.e.
- Annotate • Duplicate the sketch into your own p5 account, and comment the
code to explain what the different parts do, i.e. can you tell the story of
the program?
- If you need to, annotate each line, especially those with functions, syntax, and techniques that are new to you.
- For example: describe how a function's parameters work, e.g. instead of // draws a circle, include the how: // the x parameter is the circle's distance from the origin of the canvas.
- If you get stuck, write yourself a question to return to later.
- Modify • Use your understanding of the code to change it and make it do
different things. Make it your own; modify the code in some way to make it
distinct from the original. If there’s something tricky that you’re still
wrapping your head around, use that as a starting point. For example, try:
- Changing the appearance by playing with scale, speed, color, etc.
- Reordering lines or blocks of code.
- Simplifying or extending the sketch, e.g. removing code or adding more functionality.
- Make it interactive!