walldrawinglook-proffishmod

mySketch
xxxxxxxxxx
 
function setup() {
  createCanvas(400, 400);
  noStroke();
}
​
function draw() {
  
  background(255);
  //half width is like where it stops horizontally
  let halfWidth = width / 2;
  let halfHeight = height / 2;
  let numLines = 15;
​
​
​
  // Top right box red
  fill('white'); // Red
​
​
  //i want to make it quads i call box 
  quad(0, 0, 400, 0, 400, 200, 0, 200); //red box
  //my for loop 
  for (let o = 0; o < numLines; o++) {
    for (let i = 0; i < width; i += halfWidth) {
      stroke('rgb(0,0,0)') //whithin red box
​
      strokeWeight(2)
      //to understand lines --> line (x1, y1, x2, y2)
      line(100 + i * 2, o * 30, 200, 200); //x2 is how far horizonally the point is 
      //that starts the lines spreading out,  y2 is which point on y axis(how tall)
​
      stroke('rgb(208,0,0)')
      //to understand lines --> line (x1, y1, x2, y2)
      line(50 * o, 105 * i, i * 200, 200); //combining o and i (halfwidth and numLines)
​
​
      stroke('white') //stroke again so it wont make all the sections black
      // Bottom Left
      stroke('purple')
      line(50 * o, 15 + i * 200, i * 200, 200); //at first this code was towards 
      //the bottom, so it was showing the stroke on top of the blue box. 
      //once i put this code above where i start 'fill' for the blue quad,
      //it doesnt appear on top of blue, but instead below. 
​
​
      stroke('white')
​
      //'fill' is like where the new lines appear seperately for the box you identify first
      //such as quad 
      fill(0, 0, 255); // Blue box
​
​
      //rect(0, 100, halfWidth, 300);
      quad(0, 0, 200, 200, 200, 400, 0, 400)
    }
  }
​
  for (let o = 0; o < numLines; o++) {
    for (let i = 0; i < 200; i += halfWidth) {
      stroke('rgb(241,253,255)')
      strokeWeight(2)
      line(100 + i * 2, 100 + o * 30, 200, 200); //x2 is how far horizonally the point is 
      //the second integer x,(y), x, y
      //thefirst ('y') is where the edge of the ray will end vertically
      //plus + o (numbLines) timea number
​
​
​
​
      fill('white'); // Yellow box
​
      // Bottom Right
      quad(200, 200, 400, 200, 400, 400, 200, 400)
    }
  }
​
  //combining o and i (halfwidth and numLines)
  for (let o = 0; o < numLines; o++) {
​
    for (let i = 0; i < 400; i += halfWidth) {
      stroke('rgb(82,196,89)')
      strokeWeight(2)
      line(200 + i, o * 30 + 200, 200, 400); //200,400 for lines' direction
      stroke('white')
​
​
    }
  }
}