Creating your own Functions and Shapes

Introduction to Functions

The 'Function' function in p5 is like your own editable piece of code that lets you do pretty much anything, but in a much more organised and cleaner fashion. It creates functions for you, this may seem confusing, but it will make more sense soon!

As with most of coding, functions make much more sense when you get your hands dirty and try creating your own. Here is an example of a simple function that I've made.

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

// Remember to include comments to describe your code.

function draw() {
  background(220);
  ellipseThing(60, 60, 50);
}
function ellipseThing(xPos, yPos, radius) {
	
ellipse(xPos, yPos, radius*2);
ellipse(xPos, yPos, radius);

}

Here, all I've done is created my very own function called 'ellipseThing'. I know, creative name. In my function, I've told it to do two things, the first is to make a circle with the function 'ellipse(x, y, w, [h])' with double the radius I input, and the second thing is another circle with the same coordinates and with the original radius.

How They Work

Functions have a list of parameters that you can make and change. Within a function, you decide what happens and what goes in, so how they work is really dependent on what you as a programmer want to happen.

When you create you own function, p5 reads whatever is in the function as a list of instructions, i.e.:Make an ellipse with twice the radius. Make another ellipse, but with normal radius.

Why use them?

Besides the convenience of having one line of code do multiple things, creating your own functions can be very useful and time saving when dealing with changing values. When you have a hundred ellipse functions in your code and decide you want to change the value of all of them from 50 to 40, instead of changing each and every ellipse function, you just change the one in the function you've created and badabing badaboom they're all changed.

function setup() {
	createCanvas(400, 400);
}
							  
function draw() {
	background(220);
	ellipseThing(60, 60);
	ellipseThing(70, 50);
	ellipseThing(80, 40);
	ellipseThing(90, 30);
	ellipseThing(100, 20);
}
	function ellipseThing(xPos, yPos) {
	// Right here you'd change the value 50 to 40, and all 
	// the 'ellipseThing' functions above change their radius value too
	ellipse(xPos, yPos, 50);
}

Parameters in Functions

Since you are creating your own functions, you control what parameters should be able to be changed. Unlike a default function like the line() function where the parameters include the x & y position of the beginning and end of that line, you can change which values the function controls and which will remain unchangeable. This may seem confusing now, differentiating between default functions and the functions you create, but the more exmaples you do, the easier it gets.

function setup() {
	createCanvas(400, 400);
}														  
function draw() {
	background(220);
		// Here we only put in the x & y positions
		ellipseThing1(60, 60);
		// Whereas here we also put in the radius
		ellipseThing2(60, 60, 50);
	}
function ellipseThing1(xPos, yPos) {
	// This is the first function we've made, where the parameters only include the x & y positions
	ellipse(xPos, yPos, 50);
}
function ellipseThing2(xPos, yPos, radius) {
	// This is the second function where we also have the parameter radius
	ellipse(xPos, yPos, radius);
}
					

Now try creating your own Functions!

Try making the image below using the information we just learnt

Get creative! Don't forget a list of all the functions are on p5js.org/reference

Hot Tips!

• Make sure the function you create is outside of the draw function.
• Make sure to name your functions around what it does or how it works to avoid confusion later on.
• Keep in mind the ordering of the functions you have inside your created function, imagine the layers of a cake, things you apply later will be "on top".
• You can have functions in functions and Nested Loops in functions if you layer them correctly!

Quick Solution

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	rectMode(CENTER);
}
				
function draw() {
					
	for (i=0; i < width; i+=200) {
	squareThing(width/8 + i, height/4, 50, 50);	
	}
	for (m=0; m < width; m+=200) {
	circleThing(width/8 + m, (height/4)*3, 50);
}
}
				
function circleThing(xPos, yPos, radius) {
				
	ellipse(xPos, yPos, radius*2);
	ellipse(xPos, yPos, radius);
}
				
function squareThing(xPos, yPos, width, height) {
				
	rect(xPos, yPos, width*2, height*2);
	rect(xPos, yPos, width, height);
}
				

Introduction to Shapes

Creating shapes are best done with the functions 'beginShape()', 'endShape()' and 'vertex()'. A simple square could be created with the following lines of code.

function setup() {
	createCanvas(400, 400);
}														  
function draw() {
	background(220);
	beingShape()
	vertex(30, 20);
	vertex(85, 20);
	vertex(85, 75);
	vertex(30, 75);
	endShape(CLOSE);
}
				

Here the function 'endShape()' has value 'CLOSE' to close off the shape. These values can be found on p5js.org/reference.

Different Values for beginShape() & endShape()

• beginShape()
• beginShape(POINTS)
• beginShape(LINES)
• beginShape(TRIANGLES)
• beginShape(TRIANGLE_STRIP)
• beginShape(TRIANGLE_FAN)
• beginShape(QUADS)
• beginShape(QUAD_STRIP)
• endShape()
• endShape(CLOSE)

How They Work

The beginShape() & endShape() functions work by having the 'vertex(x, y)' function determine the points of the shape. Lines connecting the points are automatically created in the order in which the vertex() function was written.

Think of the beginShape() & endShape() functions as a sandwich, and the vertex() function as the ingredients. You can have as many ingredients as you'd like, but you must always begin and end with the bread

Why Use Them

The shape function is useful when dealing with irregular shapes that cant easily be created with pre-existing functions. Try making a rhombus without this function!

It also allows you to easily generate a random amount of vertices in a shape using one function, this is very useful for your assessment!

Try Creating your own Shapes

Now try making the image below. [Hint: use nested for loops!]

Hot Tips!

• Remember that the x & y values start from the top left of the screen and go right and down respectively.
• Keep in mind the ordering of the vertex() function, remember the cake analogy, when creating the shape itself.
• Use push() & pop() when translating your shape. You'll thank yourself when transforming other things later on.

Quick Solution

function setup() {
	createCanvas(windowWidth, windowHeight);
}
				  
function draw() {
	background(220);
				  
					
for (i=0; i < width - 50; i+=50) {
	for (m = 0; m < height - 50; m+=30) {
					  
	push();
					
	translate(20 + i, 20 + m)
	beginShape();
	vertex(0, 0);
	vertex(30, 0);
	vertex(20, 20);
	vertex(-10, 20);
	endShape(CLOSE);
	pop();
 }
}
				  
}

Extension Work

For more detailed explanations on functions, shapes and p5 in general, check out 'The Coding Train'.