Code! Programming with p5.js
Hopefully if you make it to the end you’ll be able to explain how computational media is different from traditional media, demonstrate an understanding of computer programming, and learn how to learn the tools they need to accomplish the projects that interest them in computational media.
Trailer12 Apr 2019
Programming for Beginners with p5.js05 Sep 2018
In this video, I talk about the p5.js basics course, what I hope you will learn and the goals of the course.
p5.js Web Editor06 Sep 2018
In this video, I cover getting set up with and using the p5.js Web Editor.
Shapes & Drawing07 Sep 2018
In this video, I start writing code and cover the basics of coordinates systems, shapes, and drawing in p5.js.
Color10 Sep 2018
In this video I discuss how color works: RGB color, fill(), stroke(), and transparency.
Errors & Console10 Sep 2018
In this video, I take a look at the p5.js console and error messages.
Code Comments11 Sep 2018
In this video, I cover code comments indicated with a “//”.
Variables in p5.js (mouseX, mouseY)04 Sep 2015
In this video, I introduce the concept of variables in p5.js. The setup() and draw() functions are covered as well as mouseX and mouseY.
Variables in p5.js (Make your own)04 Sep 2015
In this video, I look at how to create your own variables and how to use them to animate elements of your p5.js sketches.
The map() Function04 Sep 2015
This video covers the map() function in p5.js – how to take a value from a given range and map it to a new range.
The random() Function04 Sep 2015
In this video, I teach you how to generate random numbers with the random() function in p5.js.
createGraphics()13 Feb 2019
In this video, I cover createGraphics() in p5.js in order to demonstrate how to draw some shapes with trails and some without.
Introduction to Conditional Statements10 Sep 2015
This video introduces the idea of a boolean expression and conditional logic in programming.
The Bouncing Ball10 Sep 2015
This video continues the discussion of conditional statements and looks at a classic scenario – a circle that bounces off the edges of the canvas.
Else and Else If, AND and OR10 Sep 2015
This video covers the “else” and “else if” control structures as well as the logical operators AND (&&) and OR (II).
Boolean Variables10 Sep 2015
This video covers the boolean variables in p5.js. I first look at mouseIsPressed, and also discuss creating your own boolean variable to track the state of a button.
while and for Loops11 Sep 2015
This video examines the while and for loop in p5.js. I look at drawing multiple copies of the same shape with a loop.
Nested Loops11 Sep 2015
This video looks at loops nested in loops. What does it mean to have a for loop in the draw() loop? How do you draw a grid of shapes with two loops?
Function Basics17 Sep 2015
Function Parameters and Arguments17 Sep 2015
This video looks at re-usability and functions. How does defining a function with parameters allow a function to be re-used?
Functions and Return17 Sep 2015
This video covers what it means for a function to return a value.
Introduction to Object-Oriented Programming with ES606 Oct 2017
This video covers constructor arguments for ES6 classes and the p5.js library. This is one technique for creating multiple objects from the same class with variation.
What is an array?02 Oct 2015
Arrays and Loops02 Oct 2015
Arrays and loops go together. Why? How? This video covers how to iterate over the contents of an array using a for loop.
Array of Objects10 Oct 2017
How can you duplicate a single object and make many of them in an array? This video looks at doing this with ES6 classes. I cover for loops as well as the Array function push().
Mouse Interaction with Objects16 Oct 2017
How can an object interact with the mouse? This video looks at how you can implement basic mouse interaction (rollover, mousePressed) with your own code and HTML5 canvas.
Removing Objects from Arrays17 Oct 2017
This video covers the “splice” function to delete / remove objects from an array.
Object Communication Part 113 Dec 2017
This video covers how to determine if two circles are overlapping (intersecting) in a p5.js sketch. The functionality is demonstrated with an object-oriented approach.
Object Communication Part 214 Dec 2017
This is a continuation of my previous video where I explore shape intersection with object-oriented programming. Here, I demonstrate how to use a nested loop to check every object’s position against every other object.
Objects and Images16 Dec 2017
This video explores how to load and display images as objects with p5.js.