Soapy bubbles...

By clicking here, you will find a preview of what we are going to code. In fact, you just saw the solution to the challenge! Is it cheating? Not at all! Reading the code of more advanced devs is a big part of learning!

This code contains multiple functions. Functions are used to give instructions to the computer and they are very useful to avoid repeating the same instructions. You already use a lot of functions in your programs. color(), for example, is a function that allows the creation of a colour thanks to the p5.js library ellipse() is a function that draws an ellipse (or a circle, if the height and width are equal). Do you remember the function do draw a line?

Yup, it's line().

You may have noticed that when we talk about functions, we add parentheses () after the name of the function. Functions can take parameters , which we are going to put it in between the parentheses. Here is an example:

              
                textSize(50);
              
            

Between the brackets, I added the number 50. This number represents the size of my text. If, on the other hand, I had coded

              
                textSize(100);
              
            

my text would be twice as large! Parameters are important because they can make a big difference to the result of my function.

Some functions take multiple parameters:

              
                ellipse(150, 130, 100);
              
            

Here, there are three parameters 150, 130 and 100. Finally, some functions take no parameters:

              
                noStroke();
              
            

The function noStroke() does not take parameters, but we still keep the parentheses to indicate that if the function took parameters, this is where they would go. And then, for us devs, it is a good clue that points to the fact that it is a function (and not a variable, for example).

Most of the time, we use functions that exist already in the p5.js library. color(), noStroke(), ellipse(), etc. are all functions that exist already!

You can always check if a function exists in the p5.js library by searching in the documentation (the documentation, it's like a dictionary that holds all the functions of the p5.js library).

In the documentation, you can click on each function individually to see its description and also some examples.

Starting now, you should always have a tab open on your browser with the p5.js documentation. It's suuuuuuuper useful!

307/5000 Sometimes, we want to code our own functions because they don't exist in the p5.js library or in JavaScript. In this case, we must first define our function using the keyword ... careful ... it will be very surprising ... the keyword function !

              
                function drawBubble(positionX, color, letter) {
                fill(color);
                ellipse(positionX, 130, 100);

                // lettre
                textStyle(BOLD);
                textSize(50);
                fill(0,0,0);
                text(letter, positionX-15, 145);
              }
            
          

Here, I defined the function drawBubble () with three parameters (positionX, color and letter. I then opened the braces {} and inside them I put the instructions of my function. Note how I also used other functions inside my drawBubble() function 🤯

After this long intro, let's go back to our sheep 🐑 🐑 🐑 🐑! Our code contains multiple functions. Sixteen (16) to be precise! Can you find them all? Insert them in the form below and click on Verify.

To give a bit of pep to our animation, we will add an image as a background. Here are the steps:

1. find an image on the internet;
2. download the photo on your pc;
3. import the image file in your p5.js project;
4. insert the photo in your code.

To find a nice image (for free!), you can go to the website Unsplash and type soap bubbles.

If you were so inclined, you could also find an image by going through a search engine of your choice. Download the image on the Desktop of your computer, for example.

To import the image file in your p5.js project, you create a folder in "assets":

In the assets folder, upload your image.

Last step: the JavaScript! In your code, add the following lines:

            
              let img;

              function preload() {
                img = loadImage('assets/XXXX');
              }

              function setup() {
                createCanvas(400, 400);
                image(img, 0, 0);
              }
            
            

If the image is too large, you can change its size with the function resize():

          
            function setup() {
            createCanvas(400, 400);
            img.resize(400, 0);
            image(img, 0, 0);
          }
          
          

Remember, that you can also change the size of the canvas thanks to the createCanvas() function.