code-for-a-living March 16, 2021

Level Up: Creative coding with p5.js – part 1

In the second edition of our Level Up series, we explore how to create shapes, animations, and art using p5.js.

Programming isn’t just about building websites and applications. It can also be a medium for expressing our thoughts and creativity. We’re working with Codecademy to introduce learners to the world of creative coding with p5.js, an open-source JavaScript library. 

p5.js was developed by the artist and programmer Lauren McCarthy with support from the Processing Foundation. It was inspired by Processing, a flexible software sketchbook created by Casey Reas and Ben Fry that allows users to program visualizations using the Java programming language. p5.js was created as a version of Processing for the web. First released in 2014, it has since grown in popularity as a tool that makes programming accessible for artists, designers, educators, beginners, and anyone else!

The goal of creative coding is to create something expressive. It’s like drawing, but with code! The kinds of creative work you can code is limitless. You can make generative visualizations using shapes and text, data visualizations, immersive experiences, and interactive films. p5.js is a good place to start regardless of how much coding experience you have because of its convenient developer environment, extensive documentation, and active community.

The Codecademy Live: Creative Coding series will be hosted by Jiwon Shin, a Curriculum Developer at Codecademy and creator of the Learn p5.js course. She is also an adjunct professor at New York University where she teaches web development and creative coding.

The live series will start by learning how to use p5.js to draw 2D primitive shapes and work our way up to turning our drawings into animations. We then learn how to add user interaction to our visual programs and utilize media assets such as images and videos within our drawings.

Throughout the series, 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. We’ll be live at 4pm EST today. If you want to join, you can find the video here.

In the first session of the live series, we’ll start by examining the file structure of a p5.js project. We’ll talk about the canvas element and how we can use p5.js built-in variables and functions to create 2D drawings. We will move on to the Wall Drawing project in the first module of our p5.js course to create a digital wall drawing inspired by the artist Sol LeWit (1928-2007).

Relevant Stack Overflow questions:

How does the p5 setup() function work?

Trying to get responsive window & shapes using p5.js

Tags: , , , , ,
Podcast logo The Stack Overflow Podcast is a weekly conversation about working in software development, learning to code, and the art and culture of computer programming.

Related

series of stacked circles
code-for-a-living April 13, 2021

Level Up: Creative Coding with p5.js – parts 4 and 5

Part 4 In this session, we will make our p5.js sketches interactive! Together with Morgan, we will work on the Generative Art Creator project using the p5.js web editor! We will make a tool to create, control, and combine generative works of art inspired by early media artists, such as John Whitney and Vera Molnar.…
series of stacked circles
code-for-a-living April 27, 2021

Level Up: Creative Coding with p5.js – part 7

Machine learning might sound complicated, but with the help of p5.js, we can make interactive visualizations to help wrap our head around these algorithms. In this session, we make a visualization of the popular K-Nearest Neighbor algorithm. Join us as we discuss how this algorithm can be applied to real data and track down bugs…
series of stacked circles
code-for-a-living May 8, 2021

Level Up: Creative Coding with p5.js – part 8

In our last session, we will learn how to create audio visualizations with the p5.sound.js library. We will start by learning how to upload and play a sound file in the p5.js web editor. We will first talk about what amplitude is and how we can program a p5.js sketch to react to the amplitude…