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: