/LearningProgramming

A syllabus and curriculum for learning to program using p5js

LEARN TO PROGRAM CURRICULUM

Teaching Outline

Lesson Sessions Topics & Skills Project
Introductions 1 Routines and Expectations N/A
What is programming? 1 Algorithms and computational thinking Algorithm
Hello P5 1 Programming environment setup and workflow HelloWorld
Animation 2 Program flow, functions, variables, JavaScript objects Project 1
Interaction 2 Conditional statements. Loops (while and for) Project 2
Functions: the basics 3 Calling vs. defining functions, arguments and parameters, reusing functions, return types Project 3
Objects and Arrays 3 Object literals (properties, functions, 'this'), declaring and initializing an array, arrays and for loops, constructor function, arrays of objects Project 4
DOM: events and callback functions 2 Events (mousePressed, keyPressed), DOM elements, callbacks, style(), low-key intro to CSS Project 5
Data 1-2 JSON and APIs (and more on callbacks!), word counting, tabular data Data Project
Video & Sound * 1+ p5.sound, live capture, movie playback Video Assignment
Mobile * 1+ workflow and process (running a sketch on a mobile device), touch, using phone sensors Mobile Sketch
Hardware * 1+ p5.serial, using arduino with javascript Game Controller

Lesson 1. Introduction and Drawing

  • What is programming?
  • What is P5JS?

Lesson 2. Animation

  • Program flow (what's a function?)
    • Setup, draw, and other events
    • Variation: mouseX and mouseY
  • More about variables
    • make your own variables (numbers and strings)
    • JS objects (variables inside variables)

Lesson 3. Interaction

  • Conditional Statements
    • Boolean expressions
    • if statement
    • relational operators
    • Case study: bouncing ball
    • else, else if, and, or
    • buttons, rollovers, switches
  • Loops (while and for)
    • while and for
    • nested loops

Lesson 4. Functions: the basics

  • Calling vs. defining
  • Modularity
  • Arguments and parameters
  • Re-usability
  • Return types
  • Recursion
  • Functions inside objects
  • Homework: TBA (but something like use a function to draw a design different ways, multiple times. Make a previous sketch modular.)

Lesson 5. Objects and Arrays

  • Review object literals:
    • properties - name/value pairs
    • functions inside objects
    • this keyword
  • What is an array?
    • declaring, intializing
    • numeric indices
    • arrays and for loops
    • length property
  • An array of objects!
  • Constructor function!
  • Adding and deleting from an array, push() and splice()
  • Multiple JS files
  • Clicking on objects
  • Checking objects intersecting with other objects
  • Loading images for objects

Lesson 6. DOM: Events and Callbacks

  • Review events -- mousePressed, keyPressed
  • Beyond the Canvas, using p5.dom
  • Intro to HTML/CSS basics
  • DOM elements - p5.dom reference
    • createP()
    • createButton()
    • createSlider()
  • Callbacks
    • button.mousePressed(callback);
  • style() -- low key intro to CSS
  • CSS Reference

Lesson 7. Data

  • Loading external data with p5.js
  • Data and APIs
  • JSON and APIs (and more on callbacks!)
  • Word Counting

Lesson 8. Video and Sound *

Lesson 9. Mobile *

Lesson 10. Interfacing with Hardware *

*optional material