P5 Editor

 

Code! Programming with p5.js

This video series focuses on the fundamentals of computer programming (variables, conditionals, iteration, functions & objects) using JavaScript. In particular it leverages the p5.js creative computing environment which is oriented towards visual displays on desktops, laptops, tablets or smartphones. The series is designed for computer programming novices.

P5 Editor Brick And Balls

In this video, I cover getting set up with and using the p5.js Web Editor. Watch on YT: p5.js Web Editor To the Lesson: p5.js Web Editor #1.3. Shapes & Drawing 07 Sep 2018. In this video, I start writing code and cover the basics of coordinates systems, shapes, and drawing in p5.js. Don't worry, you can still learn all about p5.js at p5js.org. Thanks for Watching Use the links below to find out more about p5.js. P5-live-editor This extension let you code using p5js without leaving Visual Studio Code. There are other plugins that le you do the same but all have some troubles, so I decided to 'merge' them in order to create a more useful editor for my classroom lessons.

P5 Editor Login

Editor

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.

P5 Editor Library

  • #0.1

    Trailer

    12 Apr 2019

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

  • #1.1

    Programming for Beginners with p5.js

    05 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.

  • #1.2

    p5.js Web Editor

    06 Sep 2018

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

  • #1.3

    Shapes & Drawing

    07 Sep 2018

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

  • #1.4

    Color

    10 Sep 2018

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

  • #1.5

    Errors & Console

    10 Sep 2018

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

  • #1.6

    Code Comments

    11 Sep 2018

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

  • #2.1

    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.

  • #2.2

    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.

  • #2.3

    JavaScript Objects

    04 Sep 2015

    This video introduces the idea of objects in JavaScript using p5.js.

  • #2.4

    The map() Function

    04 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.

  • #2.5

    The random() Function

    04 Sep 2015

    In this video, I teach you how to generate random numbers with the random() function in p5.js.

  • #2.6

    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.

  • #3.1

    Introduction to Conditional Statements

    10 Sep 2015

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

  • #3.2

    The Bouncing Ball

    10 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.

  • #3.3

    Else and Else If, AND and OR

    10 Sep 2015

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

  • #3.4

    Boolean Variables

    10 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.

  • #4.1

    while and for Loops

    11 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.

  • #4.2

    Nested Loops

    11 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?

  • #5.1

    Function Basics

    17 Sep 2015

    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?

  • #5.2

    Function Parameters and Arguments

    17 Sep 2015

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

  • #5.3

    Functions and Return

    17 Sep 2015

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

  • #6.1

    Introduction to Object-Oriented Programming with ES6

    06 Oct 2017

    Welcome to Object-Oriented Programming in JavaScript!

  • #6.2

    Classes in JavaScript with ES6

    06 Oct 2017

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

  • #6.3

    Constructor Arguments with Classes in JavaScript with ES6

    09 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.

  • #6.4

    Adding JavaScript Files in p5.js Web Editor

    05 Oct 2018

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

  • #7.1

    What is an array?

    02 Oct 2015

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

  • #7.2

    Arrays and Loops

    02 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.

  • #7.3

    Array of Objects

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

  • #7.4

    Mouse Interaction with Objects

    16 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.

  • #7.5

    Removing Objects from Arrays

    17 Oct 2017

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

  • #7.6

    Object Communication Part 1

    13 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.

  • #7.7

    Object Communication Part 2

    14 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.

  • #7.8

    Objects and Images

    16 Dec 2017

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