In this learning project, you will be learning to:
if statement and the if else statement.if statement and the if else statement.Before getting into the real action, we need to prepare our working file for Project 2. Log in to your p5.js web editor account. Open your p5.js file for Assignment 1 Part A. Duplicate it, change the file name to Project 2, and save it.
It is actually very simple in terms of coding to make the sailboat move around on the canvas in response to your mouse. But the challenging part is that it involves making an innovative change in the Computational/Mathematical thinking. At the moment, the line of the code making the sailboat stay where it is staying, is myText('⛵', 0, -60). If we want to place the sailboat at a different location, we just change (0, -60) to something else, say (-150, -200), and it is done. The trouble is that you cannot keep changing the code in response to every move of the mouse. It is not only physically impossible but also contradictory: how can you change the code while someone else is playing the code.
To get out of the trouble comfortably, we need to change our Computational/Mathematical thinking from the world of constants (or fixed numbers) to the world of variables (or numbers that vary).
Variables are a very powerful idea of Mathematics and have an extensive range of applications in computer programming. In our current task of making the sailboat move around the canvas, we know that we only need one line of code (i.e., myText()) to display the sailboat but we need many, many, many different, ever-changing x- and y-coordinates to be passed into myText() to make the sailboat dynamically change its location in response to the move of the mouse. For this reason, we should pass into myText() variables, instead of constants, as the sailboat's x- and y-coordinates. More specifically, we need a first variable that changes its value according to the x-coordinate of the mouse, and a second variable that changes its value according to the y-coordinate of the mouse.
In p5.js, these two variables are already provided for you: myMouseX and myMouseY. myMouseX stores the current x-coordinate of the mouse and myMouseY stores the current y-coordinates of the mouse. Here I use the verb "store" to bring out the image that a variable is like a container that stores a value as its content. We all know that the content stored in the container can be easily changed without destroying the container, like putting different food into your same lunch box every day. Because the mouse can move around and continuously changes its x- and y-coordinates, the values stored in myMouseX and myMouseY change accordingly. This is why we call myMouseX and myMouseY variables -- their values (i.e., the content) vary.
In order to use myMouseX and myMouseY in your code, you must remember to use the command myMouse() in advance, like the following example:
myMouse(); myText('⛵', myMouseX, myMouseY);Replace the relevant code in your file with the example above. You will have the sailboat sailing in no time.
It feels so good to sail the boat, doesn't it? But somehow it feels quite strange that you sail it onto the land and even high up to the sky. Worst of all, you sail it out of the canvas! Well, we surely need to learn how to be a responsible Captain to sail under the constraint of the ocean.
A constraint is a limitation or restriction. For a more realistic design, the sailboat should be limited or restricted to only move within the boundaries of the ocean. From the perspective of coding, this means that myText('⛵', myMouseX, myMouseY) needs to be modified to restrict the sailboat from appearing at any locations outside the ocean.
Currently, the command myText('⛵', myMouseX, myMouseY) causes the sailboat to be displayed at the location of (myMouseX, myMouseY). However, variables myMouseX and myMouseY are not under constraint and can thus store any values as far and remote as the mouse can reach. This is the reason why the sailboat sails onto the land and sky, following wherever the mouse goes.
In p5.js, the command constrain() can be implemented to restrict the value of a variable between a minimum and a maximum. The general form constrain(variable, min, max) indicates that there are three parameters variable, min, and max required for the correct use of the command:
variable refers to the particular variable that needs to be put under constraint.min refers to a minimum value that the variable under constraint is allowed to store.max refers to a maximum value that the variable under constraint is allowed to store. After the previous analysis, we conclude that the sailboat's x-coordinate needs to be constrained between the minimum value of -400 and the maximum value of 400. Meanwhile, the sailboat's y-coordinate needs to be constrained between the minimum value of -250 and the maximum value of 0.
As myMouseX is the variable for the sailboat's x-coordinate, it should be replaced with constrain(myMouseX, -400, 400). As myMouseY is the variable for the sailboat's y-coordinate, it should be replaced with constrain(myMouseY, -250, 0). Therefore, the current command myText('⛵', myMouseX, myMouseY) should be modified to become:
myText('⛵', constrain(myMouseX, -400, 400), constrain(myMouseY, -250, 0))Take your time reading this new command carefully for a few times as there are plenty of brackets and commas. It is very easy to get confused and make mistakes when you have a line of code this long and complicated. Once you are confident that you understand the meaning of the command and have no problem writing it out by heart, go type it into your file and you will have a sailboat sailing responsively and responsibly in no time.
Although the sailboat is now sailing appropriately as we successfully constrain it only to move within the boundaries of the ocean, the code to achieve this result is not without its problem. The problem with our code is that the x- and y-coordinates of the sailboat are referred to as constrain(myMouseX, -400, 400) and constrain(myMouseY, -250, 0), respectively. They are too long to remember and too complicated to type without running a high risk of making errors. A good computer programmer should always seek ways to improve the readability of their code and to reduce the risk of typing errors.
To solve this problem, we should instead give very simple reference names to the x- and y-coordinates. We can achieve this by declaring two new variables: boatX and boatY, and then set their stored values to be constrain(myMouseX, -400, 400) and constrain(myMouseY, -250, 0), respectively. The following three lines of code demonstrate an example:
1 var boatX, boatY;2 boatX = constrain(myMouseX, -400, 400);3 boatY = constrain(myMouseY, -250, 0);As for line 1, var is short for variable; it is a key word in p5.js (or JavaScript). var is used to declare (meaning to create or to define) variables such as boatX and boatY in the example. Remember that we mentioned earlier an analogy that a variable is like a container that can store a value as its content. The stored value can vary, which is why its called variable. You can declare multiple variables using a single var, but remember to separate each variable with a comma (,). As always, the var command line should end with a semi-colon (;) like any other command line in JavaScript.
As for line 2, variable boatX is set to store the value of constrain(myMouseX, -400, 400). In p5.js (or JavaScript), the assignment operator (=) is used to assign what is on the left-hand side of the operator (which is always a variable) with what is on the right-hand side of the operator (which may be a constant or a variable). You should be advised not to confuse the assignment operator in coding with the equal sign in Mathematics. Although they look exactly the same, they have very different meanings and should not be mistaken for each other.
As for line 3, variable boatY is set to store the value of constrain(myMouseY, -250, 0). As always, line 2 and 3 both end with a semi-colon (;).
Now that we have assigned boatX and boatY with constrain(myMouseX, -400, 400) and constrain(myMouseY, -250, 0), we can simplify the relevant part of our code to:
... myText('⛵', boatX, boatY); ... myText('👪', boatX+35, boatY+10);As you can see in boatX+35 and boatY+10, numerical operators (e.g., +) can work together with variables, just like with constants or fixed numbers.