Project 1

Set up the devlopment environment similar to how we did here or download these files.

If you download the files you will need to extract them from the .zip and open sketch.js in a text editor and index.html in a web browser. This is what your sketch.js file should look like.

// Example Comment
function setup() {
  createCanvas(500,500);
}

function draw() {
  background(151);
}                   

Remenber: A comment is any text after '//' Comments are for humans! I suggest you include comments in your code to make it easier to read; however, if you choose not to include them your code will still work just fine.

Lets add a circle to our sketch.

Using the ellipse() function we can draw a circle. The ellipse function needs four peices of infromation: x, y, width, and height. To draw a circle we need to make width and height the same.

Function call: ellipse(x, y, width, height)

function draw() {
  background(151);
  // ellipse(x, y, width, height)
  ellipse(100,100,20,20);
}                   

Lets add some color to our sketch.

Using the fill() function we can give our circle some color. The fill function need three peices of infromation: red value, green value, and blue value. The range of these values is from 0 to 255.

Function call: fill(r,g,b)

fill(255, 0, 0);       // All red
fill(0, 255, 0);       // All green
fill(0, 0, 255);       // All blue
fill(255, 255, 255);   // All white
fill(57, 213, 230);    // Use any number between 0 and 255 

When we add fill() to our program we want to call it before we draw our shape. Think of it like picking up a pencil before drawing.

function draw() {
  background(151);
  fill(100,255,100); // Pick up pencil BEFORE we draw!
  ellipse(100,100,20,20);
}                   

We will need to make variables to hold the circle's x and y location.

We can add a variables to our program by using the var keyword followed by a name.

We can assign values to those variables using the assignment operator: =

var red = 255;
var width = 200.00;
var age = 7;
var name = "Mikian"; 

Lets make a variable for the circle's x and y posistion. Then we can replace the "hard coded" values in the ellipse() function with our new variables.

var x = 100; // Create a var named X and set it to 100
var y = 100; // Create a var named Y and set it to 100

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

function draw() {
  background(151);
  fill(100,255,100);
  ellipse(x,y,20,20); // Replace the old values.
}                   

Lets make the circle follow your mouse.

To do this we will use the p5.js built in variables called mouseX and mouseY.

We will update the circle's x and y each frame by putting the assignment in the draw() function.

var x = 100;
var y = 100;

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

function draw() {
  background(151);
  fill(100,255,100);
  x = mouseX; // Assign x to the mouse's x
  y = mouseY; // Assign y to the mouse's y
  ellipse(x,y,20,20);
}                   

We are done! Congrats on finishing your first p5 project.

Today we learned:

1. What p5 is.
2. How to make a p5 sketch from scratch.
3. How to draw shapes to the screen.
4. How to use color in out sketches.
5. How to create and use variables.
6. How to use the mouse as input in our program.

Completing this project is worth 500 points. You can complete the challenges for up to 1000 bonus points.

Challenges are desgined to be hard! Don't worry if you cannot get it right away. Look at the hints if you get stuck or raise your hand and we can work on it together.

Challenge 1: Change the circle to a rectangle - 200 points

Change the shape that is following the mouse. We want to draw a rectangle instead of a circle. To do that you will have to find the function that draws a rectangle from the p5.js reference page.

Challenge 2: Use variables for the colors - 300 points

Eventually we will change the color of our shapes while the program is running. To do this we need to use variables to store the R, G, and B values.

This one is tricky. You should break it up into two steps.

1. Create and name the variables like we did here.

2. Replace the old values with the new variables like we did here.

Challenge 3: Make the colors change using the mouse - 500 points

We want to create an even more interactive sketch and change the color as we move the mouse.

To do that we will have to use the mouseX and mouseY variables again.