Camille Utterback
Geoffrey Drake-Drockman, Factum Arte, Janet Echelman, Miral Kotb
So far we’ve been using the builtin functions preload(), setup() and draw(). We’ve also covered event functions like mousePressed() and keyPressed(). Our programs are starting to get longer. And we’re starting to use if statements to create more complex program flows.
With increased functionality, our programs could become harder to organize. If our draw() loop is one giant block of code, it’s quite difficult to debug. Almost all programming languages add an ability to make a modular unit block of packaged code. This can sometimes be called a subroutine. In p5.js and most modern languages, we call a named block of code a function.
example
//defines the createPlanet function
function createPlanet(){
fill(random(255),random(255),random(255));
ellipse(random(width),random(height),20,20);
}
//below this is the place that actually calls
//(runs) our createPlanet function block
createPlanet();
Why do we create our own custom functions?
All functions have always had a pair of twin parenthesis () after their name. This is where we can pass in variables to be used by a function.
When we use a built-in function like drawing a rectangle, the function expects to receive 4 pieces of data: x-position, y-position, width, height.
When we can a custom function we can create a temporary variable that will hold any passed in value. Then we use that variable in our function. When it’s called in the function, it will substitute in the passed in value. This might become clearer with some examples:
Example
function helloPerson(name){
print("Hello "+name);
}
helloPerson('Rebecca');//prints 'Hello Rebecca'
helloPerson('Jerome'); //prints 'Hello Jerome'
Note that the quotes are necessary around the names passed in above. Without the quotes it assumes Rebecca and Jerome are variable names and will spit out an error in the console saying that Rebecca and Jerome are undefined.
function helloPerson(name){
print("Hello "+name);
}
helloPerson(Jerome);//error: Jerome is not defined
Create a face function that is called when you click a button. Choose a random color background, add eyes and a mouth. Each face generated should be slightly different. Pass in parameters for the x, y position, color, and anything else you’d like to add.
Example code for Don’t Worry Be Happy face function
Go back and “refactor” your bouncing ball and Pong code. To refactor means to reorganize your code. Break your code into manageable functions that you can “call” from your draw() function.
Warning before we start! Don’t crash your browser. Don’t put save or SaveCanvas in your draw loop!
Save the current canvas as an image. The output depends on the Browser you are using for whether it automatically downloads to a folder or prompts a pop-up dialog.
save and saveCanvas
example:
saveCanvas('myCanvas', 'png')
example:
function keyTyped() {
if (key === 's') {
save('photo', 'png');
}
}
Fonts are a type of media and loaded similar to loading images with a key difference.
Calling loadFont() inside preload() guarantees that the load operation will have completed before setup() and draw() are called.
Steps:
textSize(18); and display text with text("my words",x,y);let f; //don't use font as a variable name
function preload(){
f = loadFont("my-font-name.ttf");
}
function setup(){
createCanvas(400,400);
textFont(f);
textSize(24);
textAlign(CENTER,CENTER);
text("Hello!",width/2,height/2);
}
Note that fill and stroke affect your fonts!
You can specify a width and height parameter to display text inside a box.
More info in the reference.
Chapter 9 - Functions
Function parameters and arguments
Functions and returns (new)
Part B - due October 3
Final Requirements