Intro

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

• Felipe

  • Teacher: Physics, TDSB, secondary
  • Coding: Self-taught (I mention this not to undermine anyone's confidence in the resources that follow, but merely to show that the barriers to doing physics with code are not as great as they may at first appear to be.¹)

• p5.js

  • JavaScript is a programming language used by all modern browsers to perform tasks (e.g. computational, aesthetic, responsive, etc.). p5.js makes using JavaScript easier and more intuitive.
  • p5.js is a project of the non-profit processing foundation: "Our goal is to 'empower people of all interests and backgrounds to learn how to program and make creative work with code, especially those who might not otherwise have access to these tools and resources".
  • The p5.js online editor is amazing.

• Goals

  • Deeper understanding of kinematics through code.
  • Fun, start?

Coding!

• Modelling Motion Tutorial 1 Live!    (async)
• Modelling Motion Tutorial 2 Live!    (async)

Classroom Applications

• Assignment: Creative Representation of Speed

• Using this template, make a creative representation of the object's speed.

• Practice: Ask and Answer with Simulations and Code

• Sims, maybe?

  PhET simulations are great - ever wanted to change some small thing? Ever needed a sim you can't find?

  Maybe you're ready to make your own...

Light Clocks




• More sims by Felipe

Modelling Motion Tutorial 3

• Sneak Peak

We'll work our way up to creating something like this:

Plus more classroom applications!

Logistics

• Create p5js.org account, save sketches, share link with students / embed in Google Sites, Brightspace, etc.


Or



• Save sketches locally, share code with students, share link to p5js.org editor, students paste code in editor.

Links to All Resources

• p5.js: homepage | community statement | download | editor | reference | widget
• Modelling Motion Tutorial 1: Live! | async
• Modelling Motion Tutorial 2: Live! | async
• Classroom Applications: Sketches (p5js.org)
• Classroom Applications: Sample Forms (Google)
• Felipe: homepage | sims

---

¹ Modified from "Filthy Lucre" by Joseph Heath, 2009, p.17. Original: "I mention this not to undermine anyone's confidence in the arguments that follow, but merely to show that the barriers to economic literacy are not as great as they are sometimes made out to be." back ↑