Code! Programming in JavaScript with p5.js for beginners.

In this video, I talk about the p5.js basics course, what I hope you will learn and the goals of the course.

In this video, I cover getting set up with and using the p5.js Web Editor.

In this video, I start writing code and cover the basics of coordinates systems, shapes, and drawing in p5.js.

In this video I discuss how color works: RGB color, fill(), stroke(), and transparency.

In this video, I take a look at the p5.js console and error messages.

In this video, I cover code comments indicated with a “//”.

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.

In this video, I cover how to create your own variables and to use them to animate elements of your p5.js sketches.

In this quick aside, I discuss coding short hand for incrementing variables (“incrementation operators”).

In this video, I explore the random() function in p5.js and how it can be used for “parametric design.”

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.

This video introduces the idea of a boolean expression and conditional logic in programming.

This video continues the discussion of conditional statements and looks at a classic scenario – a circle that bounces off the edges of the canvas.

This video covers the “else” and “else if” control structures as well as the logical operators AND (&&) and OR (II).

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.

This video examines the while and for loop in p5.js. I look at drawing multiple copies of the same shape with a loop.

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?

This video covers the basics of writing your own functions in JavaScript. What does it mean to define and call your own function? How can this make a program more modular?

This video looks at re-usability and functions. How does defining a function with parameters allow a function to be re-used?

This video covers what it means for a function to return a value.

Welcome to Object-Oriented Programming in JavaScript!

This video introduces Object-Oriented Programming in JavaScript with ES6 classes and the p5.js library.

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.

In this video, I look at how to organize your code into multiple JavaScript files in the p5.js web editor.

This video covers the basics on using arrays in JavaScript. What do they look like, how do they work, when should you use them?

Arrays and loops go together. Why? How? This video covers how to iterate over the contents of an array using a for loop.

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().

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.

This video covers the “splice” function to delete / remove objects from an array.

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.

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.

This video explores how to load and display images as objects with p5.js.