Week4

Question 3: Create a grid of 100 cells that turn red when you hover over them.

The solution is straight forward, using two nested for loop to have a 10x 10 grid to create 100 cells. 

let boxSize;

function setup() {
  createCanvas(500, 500);
  boxSize = width / 10;
}

function draw() {
  background(0);
  noStroke();

  //test
  // noStroke();
  // fill('red');
  // rect(0, 0, boxSize, boxSize);

  for (let r = 0; r < 10; r++) {
    for (let c = 0; c < 10; c++) {
      if (mouseX > r * boxSize && mouseX < (r + 1) * boxSize && mouseY > c * boxSize && mouseY < (c + 1) * boxSize) {
        fill('red');
        rect(r * boxSize, c * boxSize, boxSize, boxSize);
      }
    }
  }
}

Question 4: Create a checkerboard grid of 100 cells.

I developed the code for this question on top of Question 3. The only difference is to determine when to color black or white. So I did a quick sketch to figure out the rule. I found that the sum of x and y of each cell can determine the color. All the odd numbers share the same color.

let boxSize;

function setup() {
  createCanvas(500, 500);
  boxSize = width / 10;
}

function draw() {
  background(220);
  noStroke();

  for (let r = 0; r < 10; r++) {
    for (let c = 0; c < 10; c++) {
      if ((c+r) % 2 == 0 ) {
        fill('white');
        rect(r * boxSize, c * boxSize, boxSize, boxSize);
      }
      else{
        fill('black');
        rect(r * boxSize, c * boxSize, boxSize, boxSize);
      }
    }
  }
}

Question 5:

Inspired by the shampoo algorithm:

1. Wet hair.

2. Apply shampoo to wet hair

3. Scrub shampoo into hair

4. Rinse shampoo out of hair

The last step and the first step are essentially the same.

If a function can call itself, it will work like a loop. And then give it an if statement to limit how many times it will loop within the function; it will work as a for loop. I created a function call move, which adds a number to the parameter and returns a new value. Then I made another function call display, which will create a circle. However, I also called the display function itself to generate circles until the if statement is no longer true.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  display(20, height/2, 30);
}

function move(start) {
  let end = start + 40;
  return end;
}

function display(x, y, d) {
  fill('blue');
  noStroke();
  ellipse(x, y, d);
  if (x < width) {
    display(move(x), y, d);
  }
}

Drawing

For this week’s project. The first thing that came to my mind is the MIT Media Lab logos designed by Michael Bierut. He created a grid system and then designed logos for each MIT Media Lab department with it.

So I was thinking of making a 3x3 grid within the 10x10 grid. Each of the 10x10 cells will host a smaller 3x3 grid to generate some logo or mark. The challenge was to figure out coordinates for each of the smaller cells. I figured each of the smaller cells is just how many smaller cells to the right of the larger cell. Say a larger cell with x, y, and width w. Smaller cells are x + ( a ) * width / 3. “a” is the smaller cell order.

This is the version with outlines on each larger cells.

function setup() {
  createCanvas(900, 900);
}

function draw() {
  background(255);
  for (let x = 0; x < 10; x++) {
    for (let y = 0; y < 10; y++) {
      // stroke('white');
      // strokeWeight(2);
      // noFill();
      // rect((x * width / 10), (y * height / 10), width / 10, height / 10);
      for (let c = 0; c < 3; c++) {
        for (let r = 0; r < 3; r++) {
          if (r <= random(-1, 2) || c <= random(-1, 2)) {
            noStroke();
            fill(0);
            rect((x * width / 10) + (c * width / 10 / 3), (y * height / 10) + (r * height / 10 / 3), width / 10 / 3, height / 10 / 3);
          }
        }
      }
    }
  }
  noLoop();


}

I was also inspired by a childhood drawing tool. Like this: So I wanted to create a drawing that rotates a circle 360 times.

It started like this.

Somehow I mixed 360 degrees and 365 days a year together. Haha. I even wanted to change the color of each circle to have a gradient effect. So I had two nested loops that ended up crashing my browser. Because 365*255 = 93,075 times of computing. I didn’t think it thought before running the program.

Another problem I found is that circles are not distributed evenly. There are some circles a lot closer than the others. I tested with fewer circles and found that they are gradually further and further apart. After examining the code, I realized that every time the loop draws a circle and rotates it a degree, it would also turn every circle drawn before. So I added push and pop, so it only rotates one circle at a time. And the result is I got evenly distributed drawings!

Not posting the sketch…because it might crash the browser as well…oh well…

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
}

function draw() {
  background(70,120,200);
  translate(width / 2, height / 2);
  noFill();
  
  for (let x = 0; x < 360; x += 1) {
    push();
    rotate(x);
    strokeWeight(1);
    stroke(20, 40, x, 100);
    circle(70, 0, 400);
    pop();
  }

}

You can visit the sketch here