How can I create an interactive sketch using p5.js?

How can I create an interactive sketch using p5.js?

To create an interactive sketch in p5.js, you can use mouse or keyboard events. Start by setting up your canvas in the setup() function and then use the draw() function to render your sketch.

Can you give me an example of using mouse events?

Sure! Here's a simple example:

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

function draw() {
  background(220);
}

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

This code creates a canvas and draws a red circle where you click.

What if I want to change the color of the circle?

You can use a variable to store the color and change it based on user input. For example:

let circleColor = 'red';

function mousePressed() {
  circleColor = circleColor === 'red' ? 'blue' : 'red';
  fill(circleColor);
  ellipse(mouseX, mouseY, 50, 50);
}

That sounds great! How do I learn more about p5.js?

You can check out the official p5.js website, which has a lot of tutorials and examples. Additionally, there are many online courses and communities that focus on creative coding with p5.js.