What if coding could be used to express ourselves? How would that make us rethink what coding is? Explore the world of creative coding with p5.js, an open-source JavaScript library. We’ll create drawings, animations, and video sculptures in this beginner-friendly series.
Our Curriculum Developers will walk you through the new Learn p5.js course, leading you through a journey of creative coding with p5.js. We’ll be streaming live on Tuesdays at 4pm ET from March 9 through April 27, 2021.
We’ll start learning how to draw 2D primitive shapes and work our way up to turning our drawings into animations. We’ll then learn how to add user interaction to our visual programs and utilize media assets such as images and videos within our drawings. During the second half of our series, we’ll go beyond the topics covered in the Learn p5.js course and apply object-oriented programming and fundamental concepts in machine learning to create modular visualizations. Lastly, we will learn how to create audio visualizations by analyzing sound data with the Fast Fourier Transform algorithm.
We’ll also have a guest, Cassie Tarakajian, who will join us to talk about the p5.js library, the open-source community, and the p5.js web editor.
How to watch
Every Tuesday at 4pm ET, we’ll be streaming our weekly session to YouTube, Twitch, Twitter, and Facebook. Each session will be approximately 1 hour. You can find out more about what will be covered in each of the sessions on the Codecademy Events Page. You can also add the events to your calendar so you don’t forget.
What We’ll Cover
We’ll be covering topics from the Learn p5.js course and beyond. Both the stream and the course are free to everyone! The stream will be a good complement to the content covered in the course — we recommend you follow along with the series while progressing through the course.
Check out the schedule below to learn more about what we’ll be covering each week.
Session #1: Intro to p5.js
March 9, 2021 at 4pm ET | LEARN MORE
We’ll start with the Wall Drawing project in our p5.js course. We’ll draw some patterns to create a digital wall drawing inspired by the artist Sol LeWit (1928-2007) using p5.js. We’ll use the built-in shape and style functions to write instructions for our computer to draw on the screen.
Session #2: Creating Bouncing Balls
March 16, 2021 at 4pm ET | LEARN MORE
In this session, we will work on the Bouncing Balls project together on the Codecademy platform. Using p5.js animation techniques, arrays and for-loops, we will create an animation of circles bouncing around the canvas. We will also look at how to randomize the position, speed, size and color of each bouncing ball using arrays.
Session #3: Exploring the p5 Web Editor with Cassie Tarakajian
March 23, 2021 at 4pm ET | LEARN MORE
In this session, Cassie Tarakajian will be joining us to talk all things p5.js, Processing Foundation, and creative coding. Cassie is a technologist, educator, and artist, currently working at Processing Foundation as the p5.js Web Editor lead and as an adjunct professor at Interactive Telecommunications Program (ITP) at NYU.
Session #4: Generative Art Creator
March 30, 2021 at 4pm ET | LEARN MORE
In this session, we’ll work on the Generative Art Creator project together using the p5.js web editor. We’ll make a tool to create, control, and combine generative works of art inspired by early media artists, such as John Whitney and Vera Molnar, using keyboard interactions.
Session #5: Interactive Video Sculpture
April 6, 2021 at 4pm ET | LEARN MORE
In this session, we’ll work on the Interactive Video Sculpture project together using the p5.js web editor. We’ll create an interactive video sculpture inspired by the artist Nam Jun Paik. Together, we’ll load and draw videos to create a digital sculpture on the canvas using p5.js.
Session #6: Object-Oriented Programming
April 13, 2021 at 4pm ET | LEARN MORE
In previous sessions, we made bouncing balls using enormous lists. We’re going to take those fundamental principles and learn how to adapt them to fit within in an object-oriented approach. By the end of this session, we’ll have a Ball class that has its own attributes and methods.
Session #7: Machine Learning Visualized
April 20, 2021 at 4pm ET | LEARN MORE
In this session, we’ll dip our toes into the world of Machine Learning as we use p5 to visualize the K-Nearest Neighbors algorithm. We’ll spend the first part of the session learning how the KNN algorithm works, and then stretch our creative coding muscles to make an interactive visualization of the algorithm.
Session #8: Audio Visualizations with p5.sound.js
April 27, 2021 at 4pm ET | LEARN MORE
In our final session, we’ll create audio visualizations using the p5.sound.js library. We’ll learn how to load sound files to our p5.js sketches and talk about analyzing sound with FFT (Fast Fourier Transform). Using amplitude values along the frequency spectrum, we will create an animation that reacts to sound.
