# Week 9

## This Week

## Neat Places on the Internet

randomselectioninrandomimage.com

Mr. Doob, *Checkboxes Ball*

bazazas.com/blogs/stories ← Dots are generated via JavaScript, then sized and placed according to time of day.

heeeeeeeey.com

donottouch.org ← Crowd-sourced music video

rikukissa.github.io/falling ← Be sure to open your console!

Parallelograms (and Linked by Air on Parallelograms)

o-o-o-o.co.uk

## Nested Loops

Using nested loops, we can describe rows and columns, i.e., an x and y coordinate system.

```
// start counting at min
var min = 1;
// we want an 8x8 square grid
var max = 8;
// rows
for ( var row = min; row <= max; row++ ) {
console.log( 'ROW --- ', row );
// columns
for ( var col = min; col <= max; col++ ) {
console.log( 'col', col );
}
}
```

## Inspiration

*Example 1:* Using math and logical operators to target alternating squares. (view fullscreen or view full source)

There are several ways to describe a range. To target numbers between `5`

and `8`

, you could write:

```
if ( number >= 5 && number <=8 ) {
// run this code
}
```

This statement is *inclusive*, meaning it includes the numbers `5`

and `8`

. You could also say ...

```
if ( number > 4 && number < 9 ) {
// run this code
}
```

This statement is *exclusive* in that it excludes `4`

and `9`

, but allows all numbers *between* `4`

and `9`

(so: `5`

, `6`

, `7`

, `8`

).

The repeatable unit code assumes there are 16 units each with CSS `width: 25%`

, thus we have 4 rows with 4 units each, or: `( 16/4 ) * 4`

. To target each row, we could describe its range:

row 1 = 1–4

row 2 = 5–8

row 3 = 9–12

row 4 = 13–16

```
var min = 1;
var max = 16;
// first and third rows
if ( number <= 4 || number >= 9 && number <= 12 ) {
// if it's an odd number ...
if ( number % 2 != 0 ) {
// do something ...
}
}
// second and fourth rows
if ( number >= 5 && number <= 8 || number >= 13 ) {
// if it's an even number ...
if ( number % 2 == 0 ) {
// do something ...
}
}
```

Or we could use math:

```
var min = 1;
var max = 16;
// first and third rows
if ( number <= max/4 || number > max/2 && number <= (max/4)*3 ) {
// if it's an odd number ...
if ( number % 2 != 0 ) {
// do something ...
}
}
// second and fourth rows
if ( number > max/4 && number <= max/2 || number > (max/4)*3 ) {
// if it's an even number ...
if ( number % 2 == 0 ) {
// do something ...
}
}
```

row 1 = any number `<= max/4`

row 2 = any number `> max/4`

and `<= max/2`

row 3 = any number `> max/2`

and `<= (max/4)*3`

row 4 = any number `> (max/4)*3`

This only makes sense when we can safely assume a 4×4 square grid based on 16 units. Under different circumstances, you can use `Math.sqrt(number)`

to get the square root of a number: `Math.sqrt(16)`

is equal to `4`

.

*Example 2:* Using range mapping and inline CSS to set the size of an element on a scale of 0–100%. (view fullscreen or view full source)

Excerpt from `script.js`

file

```
var min = 1;
var max = 16;
// 1. number of steps between min and max
var range = ( max - min ) + min;
// 2. ratio based on a scale of 0 to 100
var ratio = 100 / range;
for ( number = min; number <= max; number++ ) {
// 3. multiply the incremented number by the ratio
var diameter = number * ratio;
...
}
```

- Get the number of steps between the
`min`

and`max`

. Since`min = 1`

and`max = 16`

, there are 16 steps between`min`

and`max`

. In this example,`range = 16`

. - Divide 100 by the
`range`

to get a ratio. We will use this ratio to map each step between`min`

and`max`

to its equivalent position on a scale of 0–100. In our case,`ratio = 6.25`

. - Within a loop where we count from
`min`

to`max`

: multiply the counter (in our case`number`

) by the ratio. In our case,`diameter`

will increase proportionately for each of the 16 steps until it reaches 100.

## Assignment

*Project 04: Repeatable Unit Deluxe.* Recreate a set of patterns using your classmates' functions and CSS classes.

## JavaScript Resources

*Logic & Patterns*, Week 5*JavaScript Operators*, Week 7- jsforcats.com ⟵ So easy, your cat can do it!
- www.w3schools.com/js/js_comparisons.asp ⟵ Comparison & Logical Operators