Fanjie Jin – Project 05 – Wallpaper

53

//Fanjie Mike Jin
//Section C
//rpai@andrew.cmu.edu
//Project-05

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

function draw() {
    background(100);
    drawGrid();
    drawSquare();
    drawCircle();
    noLoop();
}

function drawSquare() {
//nested loop for drawing the Squares
    for(var a = 1 ; a < 20; a ++){
      for(var b = 1 ; b < 20; b ++){
//change color transparency
        fill(255 - 7 * a, 255 - 2 * a, 200, 150);
        if(a % 2 == 0){
          strokeWeight(1);
          stroke(60, 211, 206, 90);
          rect(a * 20, b * 20, 20 - b , 20 - b);
        }else{
//odd columns that has a bigger square
          strokeWeight(1);
          stroke(255, 211, 206, 90);
          rect(a * 20, b * 20,  1 / 2 * b, 1 / 2 * b);
        }
      }
    }
}

function drawCircle(){
//nested loop for drawing the circles
    for(var a = 1 ; a < 20; a ++){
    for(var b = 1 ; b < 20; b ++){
      fill(255 - 2 * a, 255 - 2 * a,  100, 200);
      if(a % 2 == 0){
        strokeWeight(1);
        stroke(60, 211, 206, 90);
//color gradient
        ellipse(a * 20, b * 20, b , b);
      }else{
// odd columns
        strokeWeight(1);
        stroke(255, 211, 206, 90);
        ellipse(a * 20, b * 20, 20 - b, 20 - b);
      }
    }
  }
}

function drawGrid(){
//grids
    for(var c = 1 ; c < 20; c ++){
        stroke(255, 50);
        line(c * 20, 0, c * 20, height);
        line(0, c * 20, width, c * 20);
    }
}

I have experimented with using color transparency to create the perceptions of layerings in this wallpaper assignment. I aim to use some repetitive pattern to create some visually intriguing composition. From top to bottom, the size of the circle and square is either becoming larger or smaller. This process is enjoyable and I have gained much more familiarity with nested loop.