Create a function

With Day 5, complete I feel like I’m finally getting there. I’m still a little bit unsure of what I’m learning but I’m trying through practice to get a hold on the topic we learned.

On Friday, we learned how to create a function. In order to truly understand what we were creating we set a guideline for what we wanted our code to accomplish. From there we will create a function with whatever name we want. The name should be relevant to what it is were trying to do. When we create a function be sure not to create it in the setup or draw. The function needs to be its own entity in order for it work. In the function you will create commands for the code to execute. Once complete, you will type the name of the function underneath the draw function to display your work. Below you will find an example of a function that I created based on what I learned.

Today, I will be going over how you create a function.

The first step is to open a new P5.js canvas.

This automatically sets you up with the function setup and function draw commands.

We’re going to start from here.

So for this project, we want to create two functions. We want to assign specific functions that we want the shape to carry out.

In this case we want to do the following.

/* Create a function that draws a rectangle to the center of the screen, color the circle red, outline is white, thickness is 3. Create a second function that draws a triangle anywhere on the screen, color the triangle blue, outline is yellow, thickness is 5. */

So for these circumstances, I want to make the canvas a bit bigger. We are going to adjust the standard size from 400 x 400 to 600 x 450.

Let’s create our code, below I rewrote what we would be doing so that I don’t forget our goal.

/Create a function that draws a rectangle to the center of the screen, color the circle red, outline is white, thickness is 3. Create a second function that draws a triangle anywhere on the screen, color the triangle blue, outline is yellow, thickness is 5./

function setup() {
createCanvas(600, 450);

//adjusted canvas size from 400 x 400 to 600 x 450
}

function draw() {
background(220);
myRectangle();
//need to define function and add it to the draw. otherwise nothing will appear. It is better to create the function first before adding it up here due to conventional order.
myTrig();

}

function myRectangle() {
//we want to create a function name. In this case we are building a rectangle. I’m naming my Rectangle so that the coding doesn’t get confused with the rect command
fill(“red”);
/* if you know the short hand for the color your looking for in the reference you can type it inside the “” . Keep in mind that if this command isn’t exactly as it is in the reference it will not execute. You may be better off just entering the values in terms of the gray scale (R,G,B);
strokeWeight(3);/ strokeWeight(3); /this determines the thickness around our object. The higher the number the thicker the outline gets. / stroke(0); // changed thickness to no thickness rect(width / 2, height / 2, 100, 100); / called on the rect command. used the built in width command and height command and divided by 2. the width and height command are equivalent to x and y. They determine their value based on the cordinates in the canvas size. Plotted the ending points.
*/
}

function myTrig() {
// created a function for trianle and named it myTrig
fill(25, 99, 255);
// filled the triangle with colors based on they grey scale to create blue
strokeWeight(5);
// changed the thichness of the outline to thicker.
stroke(255, 204, 0);
// changed the stroke from black to yellow using the grey scale
triangle(width / 3, height / 3, 30, 30, 2, 150);
/* called on the triangle command used the built in width command and height command and divided by 3. the width and height command are equivalent to x and y. They determine their value based on the cordinates in the canvas size. plotted the ending points
*/

}

Now that we created our code, let’s see if this gives us what we are looking for.

After looking over the image it appears that we successfully created two functions that meet the requirements listed above.