Creative Coding with p5.JS: An inclusive javascript library

Jenaba Sow — Thu, 28 Jul 2022 15:06:00 +0000

Are you interested in coding but unsure where to start? Or you're a seasoned developer wanting a new challenge? Maybe even you're somewhere in the middle, searching for the joy in development again? That’s me, always searching for the joy! My joy comes from being creative. This is why I really enjoy creative coding with p5.JS, and I think you will too.

Even though stereotypically developers are strictly logical, I am a creative at heart. I grew up drawing, painting, sculpting, and as I grew so did technology! I harnessed technology as a tool for my creativity. My initial interest in computer science was born from the promise of creating with math and science. As I grow as a developer and creative, I've always held on to this centering ideal; with a computer my ideas are limitless. Throughout undergrad at Howard University I made it a priority to participate in hackathons and side projects, constantly tapping into my creative self.

Similarly, now as a software engineer at Asurion, I am still involved in side projects and pick up tasks that push me towards ideating, tech designing, and developing features that previously didn’t exist. For me p5.JS has been a great tool to stretch that creative muscle even further. I can use p5 to create animations, data visualization, graphic designs, chatbots, etc.

What is p5.JS ?

p5 is a FREE and open source javascript library for creative coding. “Using the metaphor of a sketch, p5.Js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.” p5.JS is made of prewritten functions. When a creative combines them into a program they can create some very cool visuals.

Quality resources makes p5.JS simple to use

The p5 community prides itself in inclusivity, by believing we are all learners. I recognize access to computers and therefore access to real time development is still a privilege in today’s world, which is why I appreciate p5 for trying to make using their library as simple to use as possible through their online home.

My favorite and most frequently used feature on p5's online home is the online editor. This is a super empowering tool! The online editor allows creatives to code on the left side and receive immediate output on the right side. You can edit, run, save, and browse all your programs online by making an account. No separate IDE or installs needed! This is really valuable for making a portfolio, coding anywhere/anytime creativity hits, and sharing out your projects.

My second favorite feature is the learn section. p5 created and complied tutorials covering all the basics. Whenever I need help getting started, or wanting a refresher, this has been a great spot to check out and recharge my skills.

My third favorite feature is the teach section. Teachers from all over the world are invited to submit their p5.JS lesson plans for the larger community's benefit. By sharing teaching materials, this empowers p5.JS learners to become teachers and inspire even more learners!

Let's start programming in p5!

To start programming in p5.JS you first need to understand some very important functions; setup(), draw(), createCanvas(), and background().

setup() - Think of this like a whiteboard. This is where you will determine your screen size, background color, and load any media. This function is usually only used once.

createCanvas() - This is best used as the first line inside of setup(). This functions allows you to control the size of your drawing canvas. Without using this function the canvas default size is 100x100.

background() - This function controls your background color. The default is transparent. To set your background color once, or only in your first frame use background() in setup(). If you want your canvas to clear at the start of each frame, use background() inside of draw(). background() can receive many different notation values (ie. hexadecimal or integer RGB etc.)

draw() - This is where you specify what your program will draw on your whiteboard! This function runs repeatedly, which is great when creating animations.

Now you are ready to explore the world of p5.JS! Checkout the Get Started guided coding section to try these functions out for yourself!

So wherever you are in your development journey, just starting out, further along, or somewhere in the middle, p5.JS has a promise for you; to make, “coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!”

Examples of cool projects

Black Lives Matter Chatbot

Project Description

Perspective

Project Description

Self Love

Project Description

Additional resources for learning

The Coding Train p5 Tutorials

Code Academy

p5.JS Overview