Lesson 3 // Functions

We go back to the book. This one should not be that hard, since I already watched the tutorial videos... twice :D. Here I go.

Functions are important, because they will make our lives easier, when our codes become more complex. The two main reasons or advantages are:

Modularity: Functions break down a larger program into smaller parts, making code more

manageable and readable.

Reusability: Functions allow us to reuse code without having to retype it.

You can define your functions anywhere in the code outside of setup() and draw().

However, the convention is to place your function definitions below draw().

I found this explanation really important, in order to understand the structure of the funtion better. And here are some rules:

Return Type

I continued on reading. I will do the Excercises later, but first I want to absorb the information. I had already seen on the tutorial videos what void is, so to me this was nothing new. But this is a very nice explanation on the structure of the function and what what means and so on:

---

Now is the time to try the things I learned about Functions.

I decided to start with the corona virus and just try and bounce it around. This is what I did:

First I wrote the functions to my corona. This was easy:

The next steps were actually very hard. I made a plan of what I wanted to animate. Firts I wanted to ping pong the corona virus. Then I wanted to make it bigger and smaller using the keyPressed method. And at last I wanted to try the last code on the google doc.

The first task was way harder to understand than I thought. I hade a 1-on-1 session on Monday and it really helped a lot. In the end it really worked, but it was very hard and I also realized how important is to use the println function in order to understand the values better.

This is the code:

int speed = 3;

float body = 100;

float arms1 = 20;

float arms2 = 12;

float x=80;

float y=80;

// Use different variables for the speed in x- and y-direction

float speedX = 2;

float speedY = 3;

void setup()

{

size(700, 700);

}

void draw()

{

background(255);

move();

bounce();

drawCorona();

println("x = "+x+", y = "+y);

}

void move()

{

x = x + speedX;

y = y + speedY;

}

// In bounce it is sensible to not change x or y themselves but only the

// numbers that are being added to them.

// I have added the "70" to make the result even more pleasing to the eye.

// The virus then does not run into the border...

void bounce()

{

if ((x > width-75) || (x < 75))

{

speedX = -speedX;

}

if ((y > height-75) || (y < 75))

{

speedY = -speedY;

}

}

void drawCorona()

{

//body of corona

stroke(185, 20, 0);

strokeWeight(2);

fill(255, 115, 0);

ellipse(x, y, body, body);

// corona arms, there are two different sizes, so I just switched between the two of them

stroke(185, 20, 0);

strokeWeight(2);

fill(255, 60, 0);

ellipse(x, y, arms1, arms1);

ellipse(x-25, y-15, arms2, arms2);

ellipse(x-35, y+27, arms1, arms1);

ellipse(x+30, y+15, arms2, arms2);

ellipse(x+35, y-35, arms1, arms1);

ellipse(x+45, y+45, arms2, arms2);

ellipse(x-65, y, arms1, arms1);

ellipse(x-35, y+55, arms2, arms2);

ellipse(x, y+65, arms1, arms1);

ellipse(x, y-65, arms2, arms2);

ellipse(x+65, y, arms1, arms1);

ellipse(x-45, y-45, arms2, arms2);

}

---

We also had a second coding session, where we also had this example. There it was more clear why we had to have for example two speeds, one for x and one for y.

And the code was also way easier:

void setup() {

size(800, 800);

}

int speedX=4, speedY=3,x, y;

void draw() {

background(111);

x=x+speedX;

ellipse(x, y, 30, 30);

if (x>width) {

speedX = speedX*-1;

}

if (x<0) {

speedX=speedX*-1;

}

y=y+speedY;

if(y>height || y<0){

speedY=speedY*-1;

}

}

---

The next task was to make the corona bigger and smaller. This also worked, what I learned is, when you use the keyPressed function, it scales using the upper left corner of the shape you want to scale.

This is the code to that:

float d_global=1.0f;

float x=200;

float y=200;

float body = 100;

float arms1 = 20;

float arms2 = 12;

void setup()

{

size(500, 500);

ellipseMode(CENTER);

}

void draw()

{

background(255);

drawCorona();

}

void drawCorona()

{

translate(0, 0);

scale(d_global);

//body of corona

stroke(185,20,0);

strokeWeight(2);

fill(255, 115, 0);

ellipse(width/2,height/2,body,body);

// corona arms, there are two different sizes, so I just switched between the two of them

stroke(185,20,0);

strokeWeight(2);

fill(255,60,0);

ellipse(width/2,height/2,arms1,arms1);

ellipse(width/2-25,height/2-15,arms2,arms2);

ellipse(width/2-35,height/2+27,arms1,arms1);

ellipse(width/2+30,height/2+15,arms2,arms2);

ellipse(width/2+35,height/2-35,arms1,arms1);

ellipse(width/2+45,height/2+45,arms2,arms2);

ellipse(width/2-65,height/2,arms1,arms1);

ellipse(width/2-35,height/2+55,arms2,arms2);

ellipse(width/2,height/2+65,arms1,arms1);

ellipse(width/2,height/2-65,arms2,arms2);

ellipse(width/2+65,height/2,arms1,arms1);

ellipse(width/2-45,height/2-45,arms2,arms2);

}

void keyPressed()

{

if (key=='b')

{

d_global=d_global+0.1f;

}

if (key=='s')

{

d_global=d_global-0.1f;

}

}