1. We're going to start by setting up a basic P5 sketch with a black background. Remember, because this is interactive, we have a 'setup()' function to run setup commands once at the start, and a 'draw()' function to repeatedly run commands every frame.
We'll just make a black bakcground and draw a circle in the center of it. Nothing special just yet.
function setup(){
createCanvas(400, 400);
}
function draw(){
background(0, 0, 0);
ellipse(200, 200, 25, 25);
}
2. Not very exciting, right? Let's add a little interaction by making the mouse move the circle. This is actually quite simple. Just replace the x and y coordinates of the circle with the commands
mouseX and
mouseY.
function setup(){
createCanvas(400, 400);
}
function draw(){
background(0, 0, 0);
ellipse(mouseX, mouseY, 25, 25);
}
3. We can play around with mouseX and mouseY in other ways. Let's draw a second ellipse to the screen, but with mouseX and mouseY flipped. What happens now?
function setup(){
createCanvas(400, 400);
}
function draw(){
background(0, 0, 0);
ellipse(mouseX, mouseY, 25, 25);
ellipse(mouseY, mouseX, 25, 25);
}
4. So, we've got shapes responding to the mouse. But it's not much of a 'paint' program, since we're not leaving any marks. That's because, in our draw() function, we're drawing the background every single frame, covering over any ellipses we've drawn in the past. Let's move the
"background(0,0,0);" code up into the setup() function, so it only draws the background once, and then all of our ellipses will remain visible on the screen as we drag the mouse about.
function setup(){
createCanvas(400, 400);
background(0, 0, 0);
}
function draw(){
ellipse(mouseX, mouseY, 25, 25);
ellipse(mouseY, mouseX, 25, 25);
}
5. Things are starting to look pretty cool! Let's try adding some random elements. The command
"random(255)" will spit out a random number between 0 and 255. (You can replace 255 with any number you want, of course.) Let's use this command, combined with the
fill() command, to put a random color inside our ellipse. We'll also use
noStroke(); to make our shapes blend together better, with no outlines.
I'm going to give the other ellipse a fill() command, too. For this one, let's try putting in mouseX and mouseY for the red and green values. You can use mouseX and mouseY
anywhere to have a value respond to mouse movement.
function setup(){
createCanvas(400, 400);
background(0, 0, 0);
}
function draw(){
noStroke();
//fill shapes with a random red,
//random green, and random blue color
fill(random(255), random(255), random(255));
ellipse(mouseX, mouseY, 25, 25);
//fill shapes with color where red is
//affected by mouseX and green by mouseY
fill(mouseX, mouseY, 0);
ellipse(mouseY, mouseX, 25, 25);
}
6. One thing that this painting program is missing is use of the mouse button, and the ability to sometimes NOT be painting. We're going to add this functionality by adding an 'if statement.' Basically, we can tell Processing to ONLY perform certain commands IF a certain condition is true (like, for instance, the button being pressed!). We'll wrap all of our code for drawing those ellipses in an
if(mouseIsPressed) statement.
function setup(){
createCanvas(400, 400);
background(0, 0, 0);
}
function draw(){
if(mouseIsPressed){
noStroke();
fill(random(255), random(255), random(255));
ellipse(mouseX, mouseY, 25, 25);
fill(mouseX, mouseY, 0);
ellipse(mouseY, mouseX, 25, 25);
}
}
7. Lastly, let's experiment with a few more shapes to see what other possibilities there are.
Let's add an ellipse thats position is locked to the middle, but which has mouseX and mouseY in its width and height commands.
And let's add some 'sprinkles' to the painting by drawing squares at a random position around the mouse. Notice how we can give
random() two numbers. This will generate a number within that range. In this case, we'll generate a random number between -20 and 20, to draw the rectangle somewhere in the range of 20 pixels to the right or left of the mouse.
function setup(){
createCanvas(400, 400);
background(0, 0, 0);
}
function draw(){
fill(255,255,255,10);
ellipse(200, 200, mouseX, mouseY);
if(mouseIsPressed){
noStroke();
fill(random(255), random(255), random(255));
ellipse(mouseX, mouseY, 25, 25);
fill(mouseX, mouseY, 0);
ellipse(mouseY, mouseX, 25, 25);
fill(random(255), random(255), mouseY);
rect(mouseX + random(-20, 20), mouseY + random(-20, 20), 10, 10);
}
}
All right! So we've made a pretty funky little painting program, with a few random, out-of-control elements in it. Now it's your turn to make your own painting program that is a little bit more 'mischievous' and that, hopefully, makes things look a bit less like a pile of rainbow worms.