5.7e_translate_for_loop

// Translate 4 rectangles

// Practicing using map(), translate(), and print()

​

// HSB color mode

// using "translate" to move the origin four times

// by the same distance, drawing 4 offset squares

​

function setup() {

  createCanvas(200, 200);

  colorMode(HSB);

  background(0);

}

​

function draw() {

  for (let i=0; i < 4; i++) {  // loop 4 times

    let hue = map(i, 0, 3, 0, 40); // map(incoming value, start1, stop1, start2, stop2,) *

    print(hue); // See what fill colour is being generated

    fill(hue, 255, 255, 0.5); // fill with 0, then 13.3, the 26.6, then 40.

    translate(20, 20); // move the starting point of the rectangle 20 px to the right, and 20 px down.

    rect(0, 0, 100, 100);

  }

}

​

// *

// Mapping function parameters:

// 1) incoming value: the incoming value to be converted

// 2) start1: lower bound of the value's current range

// 3) stop1: upper bound of the value's current range

// 4) start2: lower bound of the value's target range

// 5) stop2: upper bound of the value's target range

​

// Experiment:

// Change start2 and/or stop2. What happens? Why?

// Change the parameters in the translate function. What happens? Why?

​