Getting Started with Creative Coding: An Introduction to p5.js

Today, we’ll dive headfirst into the universe of creative coding, with a spotlight on p5.js. One of the most approachable platforms for newcomers to creative coding, p5.js uniquely bridges the gap between simplicity and power, making it an ideal choice for beginners and experts alike.

What is p5.js?

p5.js is a javascript library specifically designed to make coding accessible for artists, designers, educators, beginners, and anyone else who wants to learn and experiment with code in an artist-friendly environment. It’s like a paintbrush for code, helping you to create your interactive masterpiece (or happy little trees if you are a Bob Ross fan).

Why p5.js? The Power of Simplicity

So, why choose p5.js over other creative coding platforms? The answer lies in the simplicity of p5.js. It’s designed to be easy to use, with a syntax that’s intuitive and easy to understand, even if you’re new to coding.

However, don’t let its simplicity fool you. While p5.js is incredibly user-friendly, it’s also incredibly powerful, boasting a broad range of features that can cater to complex projects. From basic shapes and colors to animations, interaction, and even 3D graphics, p5.js has got you covered.

The Power of Community

Another awesome thing about p5.js is its community. With an active and supportive community, you’re never alone on your creative coding journey. You can find a ton of tutorials, examples, and projects from the community that can inspire and guide you along the way. Definitely don’t miss The Coding Train, one of the absolute best places to learn!

Getting Hands-On with p5.js

Talking about p5.js is great, but the real fun begins when we start creating with it. Let’s dive into a simple interactive sketch using p5.js. We’ll use the p5.js web editor, a browser-based coding environment, so no installation is required. Just open it up, and you’re ready to code.

Interactive Circles

In this activity, we’ll create a sketch where circles of different colors appear wherever you click on the canvas. Here’s how to do it:

  1. Open the p5.js web editor.
  2. Inside the setup() function, initialize the canvas size with the following command: createCanvas(windowWidth, windowHeight);.
  3. Change the background color by using background(220); in the setup() function. Doing this here will set the background color once and avoid refreshing it at every frame, thus allowing us to see all the circles we draw.
  4. Now, let’s implement the mousePressed() function. This is a special function in p5.js that automatically gets called whenever a mouse click occurs.
  5. Within the mousePressed() function, use fill(random(255), random(255), random(255)); to set a random color for the circle that we’ll draw. The random(255) part will generate a random value between 0 and 255 for each of the RGB color channels.
  6. Still within the mousePressed() function, use the ellipse() function to draw a circle where the mouse was pressed. Use ellipse(mouseX, mouseY, 50, 50); to draw a circle at the mouse location with a width and height of 50 pixels.
  7. For completeness, include an empty draw() function. While we don’t need it for this specific activity since we’re not continuously updating anything on the canvas, it’s good practice to include it, especially if you plan on adding more interactivity or animation later on.

Your code should look like this:

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(220);
}

function draw() {
  // nothing here (yet)
}

function mousePressed() {
  fill(random(255), random(255), random(255));
  ellipse(mouseX, mouseY, 50, 50);
}

Now, click anywhere on the canvas. A colored circle should appear at your cursor’s location. Here is mine with a bunch of circles, I got a little wild!

Wrapping Up

Congratulations, you’ve just created your first interactive sketch with p5.js! It’s a simple start, but the possibilities with p5.js are endless. As you grow more comfortable with the library, I encourage you to experiment, get creative, and most importantly, have fun. After all, that’s what creative coding is all about.

Resources

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.