Conditionals - JavaScript basics Tutorial Part 4

Published May 10, 2019, 12:39 a.m.

In this JavaScript basics tutorial, we're going to be covering conditional statements. In our case, we want to be able to handle for when our blob has gone off of the visible canvas.

Code up to this point:

<html>
    <body>

        <canvas id="myCanvas" width=200px height=200px style="border:1px solid #000000;"></canvas>

        <script>
            const canvas = document.getElementById('myCanvas');
            const context = canvas.getContext('2d');

            let x = 50;
            let y = 50;

            function blob(x_loc, y_loc, size, color){
              context.clearRect(0, 0, canvas.width, canvas.height);
              context.beginPath();
              context.arc(x_loc, y_loc,size,0,2*Math.PI);
              context.fillStyle = color;
              context.fill();
              context.stroke();
            }

            setInterval(function(){
              blob(x, y, 25,"green")
              x++;
              y++;
            },10)

        </script>
    </body>
</html>

To start, we need to decide what we want to happen when the blob does go off of the screen. I personally would like to see the blobs just bouncing around, so thats what I want to happen. To make this happen, we're going to go ahead and set some variables for the change that we want to apply to both x and y:

            let xChange = 1;
            let yChange = 1;

Then our setInterval function needs to reflect changing according to that variable:

            setInterval(function(){
              blob(x, y, 25,"green")
              x += xChange;
              y += yChange;
            },10)

Running this gives us the same result as before, but allows us to modify the direction of the blob logically. Under what condition should we reverse the xChange for this blob? If the x position is greater than the canvas.width, we should turn around. The same is true for yChange and the canvas.width.

With JavaScript, we can handle this conditional with something like:

              if(x >= canvas.width){
                xChange = -1
              }

So the question is if(thing is the case){do this!}. To test a thing, we use comparison operators. Here's a list of comparison operators:

(x == y) Equality
(x != y) inequality
(x === y) identity (matches value and data type)
(x!==y) non-identity
(x < y) less than
(x > y) greater than
(x <= y) less than or equal to
(x >= y) greater than or equal to

Now we want to do the same thing with the yChange, making our whole setInterval block:

            setInterval(function(){
              blob(x, y, 25,"green")
              x += xChange;
              y += yChange;

              if(x >= canvas.width){
                xChange = -1
              }

              if(y >= canvas.height){
                yChange = -1
              }

            },10)

The result here:

So now, we have to handle for when the x and y are less than 0. To do this, we could have yet another 2 if-statements, but can we do better? In this case, when the blob exceeds any boundary, our goal really is to just go the other way. Reverse. Flip. Whatever you want to call it. What we can do instead is multiply our changes by -1, and this would achieve the same result.

So, if the x is less than or equal to 0, OR if its greater than the canvas width, then we want to flip the xChange. Code to reflect this:

              if(x >= canvas.width || x <= 0){
                xChange *= -1
              }

The || signifies an "or." The xChange *= -1 is the same as doing xChange = xChange * -1.

Full code up to this point:

<html>
    <body>

        <canvas id="myCanvas" width=200px height=200px style="border:1px solid #000000;"></canvas>

        <script>
            const canvas = document.getElementById('myCanvas');
            const context = canvas.getContext('2d');

            let x = 50;
            let y = 50;

            let xChange = 1;
            let yChange = 1;

            function blob(x_loc, y_loc, size, color){
              context.clearRect(0, 0, canvas.width, canvas.height);
              context.beginPath();
              context.arc(x_loc, y_loc,size,0,2*Math.PI);
              context.fillStyle = color;
              context.fill();
              context.stroke();
            }

            setInterval(function(){
              blob(x, y, 25,"green")
              x += xChange;
              y += yChange;

              if(x >= canvas.width || x <= 0){
                xChange *= -1
              }

              if(y >= canvas.height || y <= 0){
                yChange *= -1
              }

            },10)

        </script>
    </body>
</html>

Result:

Now, if we want to make the bouncing slightly less uniform, we can just make our canvas less uniform:

<canvas id="myCanvas" width=200px height=137px style="border:1px solid #000000;"></canvas>

This isn't the only way we can do this, we can also make the movement non-uniform. We can set changes in decimals, so later we could maybe make a random choice or something between 0.5 and 1 for the x and y change variables. For now, good enough!

So what's next? I would like to have many blobs, each of which should have their own movement. How might we do that? That will be the discussion of our next tutorial!

The next tutorial:

Introduction to programming with JavaScript tutorial
Functions and more Canvas - JavaScript Basics Part 2
Running functions on an Interval with setInterval - JavaScript basics Tutorial Part 3
Conditionals - JavaScript basics Tutorial Part 4
(currently viewing)
Object Oriented Programming in js - JavaScript Basics Part 5
Looping with Objects and OOP with JS - JavaScript Basics Part 6