Unit 4: Programming in P5.js

Alright, alright, alright! That's a line from one of my favourite movies. If I weren't a computing science teacher, I would definitely pursue a career as Matthew McConaughey. Ha ha! No seriously, I love teaching this stuff, and I can't wait to get back into coding in P5.js.  - Codey

Length

  • 13 classes

Topics

  • Conditionals
  • Boolean logic
  • Intro to functions

Description

This unit focuses mostly on conditional statements and Boolean logic with some introduction to functions (aka procedures).  

Experienced teachers will likely question why these materials do not include work with FOR and WHILE loops.  This is a legitimate critique and I often do work with them for a day or two in Year 1.  However, as the DRAW function in P5.js is a looping function, I have decided to focus my students on using the loop rather than writing their own.  FOR loops and WHILE loops then become a major component towards the end of the course and for the AP CSP exam, students should be familiar with the unusual syntax used for loops on the exam.

Setup Notes

For the first unit of Programming in P5.js, I primarily used the https://editor.p5js.org/ for all our code.  For the second unit, I switched to using replit.com.

Starter code for Examples 1-3 of the second unit was provided for them in a full working project. Some images were also provided with the starter project. The complete starter file is available through our resources and is called Unit 4 STARTER PROJECT.

Students interacted with an index.html file that would add to each day in such a way as to direct to the most recent JavaScript files.  The first two examples below are the HTML file  (end of unit) and the CSS file that governs the styles used.

Unit Quick Links