Getting Started with p5.js: A Fun Introduction to Creative Coding

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

Dive into the world of creative coding with p5.js, a nifty JavaScript library that makes coding visual and interactive! Ready to get your hands dirty with code that not only executes but also looks dazzling? Well, let's get this party started!

What is p5.js?

p5.js is a JavaScript library designed to simplify the process of creating graphical and interactive content. It's like a box of colorful crayons for coding, which opens up a whole new world of possibilities!

Hello, p5.js!

Let's start with creating a simple sketch in p5.js. This is going to be easier than making a peanut butter and jelly sandwich, promise!

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    ellipse(200, 200, 50, 50);
}

What did we just do here? We created a canvas (our playground) and drew a circle in the middle of it. The createCanvas function is used to set the size of the canvas, while background sets the background color. Finally, ellipse is used to draw a circle. This is a perfect example of the simplicity that p5.js brings to the table, allowing us to make cool stuff with minimal code.

Interactive Art with p5.js

With p5.js, you can add a sprinkle of interactivity to your creations and make them respond to user input. Let's make our circle follow the mouse cursor:

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    ellipse(mouseX, mouseY, 50, 50);
}

We replaced the fixed coordinates of the circle with mouseX and mouseY, which are built-in variables in p5.js that store the current mouse coordinates. Now, the circle follows the mouse pointer like a loyal puppy!

FAQ