FRI | Functions

FRI | Functions

  • October 4, 2024
  • 9:15–12:00
  • Room 2420 (Marsio)

Inspiration #

Summary as an AI Podcast #

I am trying out something new this time. I used NotebookLM to generate a podcast based on the course materials on this page, YouTube videos from the Coding Train, and p5.js tutorial about Functions.

Månsteri · NotebookLM Deep Dive | Functions in p5.js

Let me know if you feel that it is helpful and I can keep on making more of them from the other topics. Or better yet, learn how to use NotebookLM yourself.

Functions #

So far, we have written functions that are part of the p5.js library.

The functions I listed above are the ones that we actually write out in the code and the program decides when to call them. For example, setup() is called once when the program starts, draw() gets called 60 times per second, mousePressed() when a person presses the mouse etc. Check the reference for more functions that behave in similar ways. Most of them are in the Sructure, Mouse or Keyboard sections.

Other type of functions we have been using from the p5.js library are functions that we don’t have to write/define in our code. We just call them by using them.

You can see how the library looks like by opening this link that is the actual code of the p5.js library (version 1.4.2). Or a more friendlier version is the actual source code on GitHub. If you are interested, you can dig into them to see how the library works under the hood.

We can also create our own functions that will work in the sketches/programs we create!

Creating Functions #

Creating functions in p5.js (or JavaScript) is quite straightforward. You come up with a name for it and just write it.

function myFunction(){
  // your code here
}

Our example in the last class drew a simple face on the screen. We could make that code into a function.

function drawFace(){
  point(0,0);
  circle(0,0,100);
  circle(-20,-20,20);
  circle(20,-20,20);
  line(-20,20,20,20);
}

And use it by calling the function.

drawFace();

Then we can use the 2D Transformations to decide where we draw the face.

Using push() and pop() we can draw it in multiple places.

Or we can draw 100 random faces:

Passing parameters to a function #

Using the drawFace() function seems to be quite similar to using circle() or any other built-in function. However, with circle we are able to define directly where to draw the shape by using parameters. How could we use those? It’s also quite simple, you just define what kind of parameters your function should be expecting.

We could decide that our function needs two values passed to it. One value for x and one for y. We use push(), translate() and pop() inside the function.

function drawFace(x,y){
  push();
  translate(x,y);
  point(0,0);
  circle(0,0,100);
  circle(-20,-20,20);
  circle(20,-20,20);
  line(-20,20,20,20);
  pop();
}
Note that you don’t need to use let when you define the expected parameters.

Returning values from a function #

Functions do not necessarily have to draw something. They could also do some calculations, process other values, or in some other way provide you with return value. We use these types of functions all the time. For example, random() returns a random value, map() scales values from one range to another. Here is how to create these types of functions.

// this function returns the squared value of the one passed to it
function squareValue(n){
 let result = n * n;
 return result;
}

// this function checks which of the values is larger and returns that
function checkLarger(a,b){
 if(a>b){
  return a;
 }else{
  return b;
 }
}

Both of these functions already exist in p5.js sq() and max() so there is no need to re-invent them. These were just used to illustrate how the return values could work.

Here are two handy functions that do not directly exist in p5.js:

// this function checks if the mouse is inside a circle
function insideCircle(x,y,s){
  let result;
  let d = dist(mouseX,mouseY,x,y);
  if(d < s/2){
    result = true;
  }else{
    result = false;
  }
  return result;
}

// this function checks if the mouse is inside a rectangle
function insideRectangle(x,y,w,h){
  let result;
  if(mouseX>x && mouseX<x+w && mouseY>y && mouseY<y+h){
    result = true;
  }else{
    result = false;
  }
  return result;
}
These functions can be written in a shorter/more efficient way, but we are creating these in a way where it should be very obvious to you what is happening.

Example: Clock #

Let’s try to draw a clock using functions and 2D Transformations. p5.js comes with functions to get the system time.

let h = hour();
let m = minute();
let s = second();

text(h + ":" + m + ":" + s);

That looks like a clock to me. We are done, right?
No, I meant an analog clock.

References and More Information #

Homework #

Make a new type of clock that visualizes time using color, shapes, movement, sound, images, text etc. Something that is not so literal as a normal clock.

Requirements:

  • You need to use at least hour(), minute() and second()
  • You need to create a separate function for drawing each value (like we did in the example: drawHour(), drawMinute(), drawSecond())
  • For extra challenge, you can also use the date
  • The time does not have to be necessarily readable

Inspiration #