JavaScript Programming Basics - For Loops and ForEach Loop

JavaScript Programming Basics - For Loops and ForEach Loop

In this JavaScript programming basics tutorial, we'll be covering the for loop and the forEach loop.

In this tutorial with JavaScript, we'll be covering the for loop and the forEach loop.

In this OOP with JavaScript tutorial, we're going to work with our new Blob object to create a bunch of blobs to all be doing their thing in the canvas. Code up to this point:

<html>
    <body>

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

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

            class Blob {
                constructor(color, size){ //this is your init
                    this.x = Math.random() * canvas.width
                    this.y = Math.random() * canvas.height
                    this.color = color
                    this.size = size
                    this.xChange = 1;
                    this.yChange = 1;
                }

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

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

                    this.x += this.xChange;
                    this.y += this.yChange;
                }

                //dont wanna clear per blob draw.
                draw(){
                    context.beginPath();
                    context.arc(this.x, this.y,this.size, 0, 2*Math.PI);
                    context.fillStyle = this.color;
                    context.fill();
                    context.stroke();
                }
            }

            const newBlob = new Blob("green",25)
            newBlob.draw();
            newBlob.move();
            newBlob.draw(); // ...etc.

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

Now, we'd like to create many blobs, and save them to an array. One way we could do this is manually, like defining an arrray at the top near the canvas and context:

            let blobs = new Array();

Then, after our Blob class, we could do something like:

            const newBlob = new Blob("green",25);
            const newBlob2 = new Blob("red",25);
            const newBlob3 = new Blob("blue",25);

            blobs.push(newBlob);
            blobs.push(newBlob2);
            blobs.push(newBlob3);

Then, we could make a quick function for drawing the blobs and moving them:

            function canvasDraw(){
                context.clearRect(0, 0, canvas.width, canvas.height);
                blobs.forEach(function(obj){
                    obj.draw();
                    obj.move();
                })
            }

Notice that, in this function, we are clearing the rectangle. Then, we're making use the forEach loop within javascript. There are quite a few ways to do loops with javascript. One I quite enjoy is the forEach loop. With this loop, you apply it to an iterable, like an array in our case, and do something "forEach" thing in that array. In this case, the "thing" we wish to do is actually a function that we quickly define. In the forEach loop, the "each" is the object... and that object is whatever "each" points to. In our case, we're passing the blobs array that we've populated with blob object. So in this case, that "obj" is a blob!

So, with each blob, we draw and then move the blob.

Now, we can set everything in motion with:

            setInterval(function() {
              canvasDraw();
            }, 10);

Giving us:

This is cool, OBVIOUSLY, but we can do even better here. The blob creation bit is super ugly and not scale-able. We can use a for loop here too.

Rather than doing

            const newBlob = new Blob("green",25);
            const newBlob2 = new Blob("red",25);
            const newBlob3 = new Blob("blue",25);

            blobs.push(newBlob);
            blobs.push(newBlob2);
            blobs.push(newBlob3);

Let's instead do:

            for (let i = 0; i<5; i++){
                let newBlob = new Blob("green",25);
                blobs.push(newBlob);
            }

This loop might be a little more complicated to look at, but, basically, it's a question of for (THESE_CONDITIONS).

So the conditions are: (let i = 0; i<5; i++), which means:

i starts at zero. while i < 5...and add 1 to i every loop.

For each iteration of the above condition, we do the thing in the curly braces.

In our case, this is creating the new blob, and pushing it to our array. We could even save a line and just do:

            for (let i = 0; i<5; i++){
                blobs.push(new Blob("green",25));
            }

Now, the only remaining issue is... this only makes green blobs. I'd like an assortment of colors. To do this, let's just make a random choice from an array of options. Up at the top with our other constants, let's add:

const colors = new Array("red","green","blue","yellow","orange","purple","pink");

To pick a random color from this array:

let randColor = colors[Math.floor(Math.random() * colors.length)];

Basically, we're picking a random index in order to pick a random color here. I can look at this code and follow it...but I think this really should be in a function. I know it's simple, but if I am quickly reading through code, I'd have to do more than just glaze over it. To help with this, I am going to just make a function. I think it will help with legibility, but this is definitely coder preference.

            function randomChoice(arr){
                return arr[Math.floor(Math.random() * arr.length)];
            }

Then we'd just do:

                let randColor = randomChoice(colors)

If we run this, we find that everything works as intended, but I am finding that the blobs are still just a bit too uniformly moving for my tastes. For this reason I would also like to change the xChange and yChange attributes to be:

                    this.xChange = Math.random();
                    this.yChange = Math.random();

Full code is now:

<html>
    <body>

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

        <script>
            const canvas = document.getElementById('myCanvas');
            const context = canvas.getContext('2d');
            const colors = new Array("red","green","blue","yellow","orange","purple","pink");

            let blobs = new Array();

            class Blob {
                constructor(color, size){ //this is your init
                    this.x = Math.random() * canvas.width
                    this.y = Math.random() * canvas.height
                    this.color = color
                    this.size = size
                    this.xChange = Math.random();
                    this.yChange = Math.random();
                }

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

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

                    this.x += this.xChange;
                    this.y += this.yChange;
                }

                //dont wanna clear per blob draw.
                draw(){
                    context.beginPath();
                    context.arc(this.x, this.y,this.size, 0, 2*Math.PI);
                    context.fillStyle = this.color;
                    context.fill();
                    context.stroke();
                }
            }

            function canvasDraw(){
                context.clearRect(0, 0, canvas.width, canvas.height);
                blobs.forEach(function(obj){
                    obj.draw();
                    obj.move();
                })
            }

            function randomChoice(arr){
                return arr[Math.floor(Math.random() * arr.length)];
            }

            for (let i = 0; i<10; i++){
                let randColor = randomChoice(colors)
                let newBlob = new Blob(randColor,25);
                blobs.push(newBlob);
            }

            setInterval(function() {
              canvasDraw();
            }, 10);

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

javascript web-development programming developer

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

JavaScript Web Developer Bootcamp - Complete Guide to Become JavaScript Developer

In this Video we will learn these concept and there are almost 10+ Project in javaScript. One Video For becoming web developer. This video will teach you web development from scratch.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Web App Development Company | Web Application Development Service

Web development company in India & USA offers different types of web application development services with the best result oriented, clients all specifications, different technologies, etc with a cost-effective rate. Get a free quote.