At this age and time that we live in, coding is simply invaluable. It has the power to uplift your career, your future prospects and even your intellectual capacity. Computation is driving one of the largest capital expansions in history and there has never been a better time to learn coding than now. 

But learning how to code can be challenging. It is hard to find good resources that are relevant, practical and engaging at the same time. This course teaches coding from scratch using the vastly popular programming language JavaScript. Using JavaScript and a programming library called p5.js, you will learn how to code in a highly engaging and visual manner.

Find out more at: www.codingforvisuallearners.com

Coding for Visual Learners: Learning JavaScript with p5.js

## For Loop

One of the things that computers are great at are repetitions. Imagine having to create 1000 shapes on screen with varying parameters. It would take us an unreasonable amount of time to do so with our current programming knowledge. For this kind of cases where we want to repeat our code as it is or with variations we can leverage a programming structure called *loops*. A loop allows us to execute a block of code over and over again.

We are already familiar with the idea of a loop in p5.js. If you think about it, the **draw** function is a continuous loop that gets executed over and over again until we exit the p5.js program. In this chapter, we will learn how to build this kind of loops ourselves.

There are a couple of different kinds of loop structures in JavaScript, but a *for loop* is by far the most popular. It allows us to repeat an operation for a given amount of times. A *for loop* has four parts. Here is an example of how a *for loop* is constructed.

```javascript
	for (var i = 0; i < 10; i = i + 1) {
		//do something
	}
```

In the first part, we initialize a variable that would keep track of the number of times that the loop gets executed - let’s call this a counter variable. 

```javascript
	var i = 0;
```

By convention, inside the *for loop*, we usually tend to use short variable names like **i** or **j**, especially if that variable is only in use for controlling the flow of the *for loop*. But feel free to use other names as well if it makes sense for your use case.

In the second part, we define a test condition for our loop which gets evaluated each time the loop is about to start. In this example, we are checking to see if our counter variable is smaller than the number 10.

```javascript
	i < 10;
```

In the third part, we define a way to update the counter variable which gets evaluated at the end of the loop. In this example, we get the current value of the variable **i** and add one to it.

```javascript
	i = i + 1;
```

Finally, inside curly braces we write the code that we want to have repeated. Once the counter variable doesn’t satisfy the test condition, the loop terminates, and the program returns to its normal evaluation. 

If the test condition never fails, then we would have a loop that would end up creating an *infinite loop*, a loop that doesn’t have an exit condition so that it keeps going on and on until the program is terminated by external means. The **draw** function in p5.js is in an infinite loop; it keeps drawing to the screen until we close the browser window.

Even though infinite loops are a valid use case, loops are most commonly used for executing an operation for a known amount of times. Let’s create a loop that will draw given number of ellipses to the screen using a *for loop*.


# For Loop

One of the things that computers are great at are repetitions. Imagine having to create 1000 shapes on screen with varying parameters. It would take us an unreasonable amount of time to do so with our current programming knowledge. For this kind of cases where we want to repeat our code as it is or with variations we can leverage a programming structure called *loops*. A loop allows us to execute a block of code over and over again.

We are already familiar with the idea of a loop in p5.js. If you think about it, the **draw** function is a continuous loop that gets executed over and over again until we exit the p5.js program. In this chapter, we will learn how to build this kind of loops ourselves.

There are a couple of different kinds of loop structures in JavaScript, but a *for loop* is by far the most popular. It allows us to repeat an operation for a given amount of times. A *for loop* has four parts. Here is an example of how a *for loop* is constructed.

```javascript
	for (var i = 0; i < 10; i = i + 1) {
		//do something
	}
```

In the first part, we initialize a variable that would keep track of the number of times that the loop gets executed - let’s call this a counter variable. 

```javascript
	var i = 0;
```

By convention, inside the *for loop*, we usually tend to use short variable names like **i** or **j**, especially if that variable is only in use for controlling the flow of the *for loop*. But feel free to use other names as well if it makes sense for your use case.

In the second part, we define a test condition for our loop which gets evaluated each time the loop is about to start. In this example, we are checking to see if our counter variable is smaller than the number 10.

```javascript
	i < 10;
```

In the third part, we define a way to update the counter variable which gets evaluated at the end of the loop. In this example, we get the current value of the variable **i** and add one to it.

```javascript
	i = i + 1;
```

Finally, inside curly braces we write the code that we want to have repeated. Once the counter variable doesn’t satisfy the test condition, the loop terminates, and the program returns to its normal evaluation. 

If the test condition never fails, then we would have a loop that would end up creating an *infinite loop*, a loop that doesn’t have an exit condition so that it keeps going on and on until the program is terminated by external means. The **draw** function in p5.js is in an infinite loop; it keeps drawing to the screen until we close the browser window.

Even though infinite loops are a valid use case, loops are most commonly used for executing an operation for a known amount of times. Let’s create a loop that will draw given number of ellipses to the screen using a *for loop*.


Coding for Visual Learners

07 - Loops

For Loop