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 p5js 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?
So far, our 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.
We create a temporary variable name that will hold any passed in value. Then we use that variable name in our function somewhere. 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.
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
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);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.
Software like Adobe Photoshop appears at first to have infinite possibilities. In actuality it is constrained and specific. You can only do what the software allows you to do.
As long as artists have been making art, they have been inventing, designing, and altering their tools.
Becoming a programmer is often equated in our culture to developing magical powers or unlocking new abilities. Let’s embody this idea with the challenge to create our own art-making tools. For this assignment, consider what we have learned this semester, as well as the history of artist’s software tools.
In the p5js web editor, create your own custom art-making tool. Consider color, brushes, images, buttons, text.
To be complete, it must have:
EXTRA CREDIT:
Concept:
Remember, to be considered complete, the code works, all buttons and other interactivity work. And the program documentation contains title, description, screenshots, walkthrough documentation of screenshots and text or ivideo, a save function, example artwork created with your program.