Creative Computing

Index of /

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;

    ...

}
  1. 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.
  2. 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.
  3. 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