I migrated into Notion, to try it out and look for better organization of my courses while in ITP. All right, here are some of the challenge codes I’ve made for this week.

This is Q1, I believe I was able to tackle this on without any issues, I draw the rectangles in 3 different ways.

let x = 100;
let y = 40;
let w = 80
let h = 200

function setup() {
  createCanvas(400, 400);
  background(255,255,9);
  // Arguments for rect 1
  // e.g. rect(topRightX, topRightY, bottomLeftX, bottomLeftY);
  fill(0);
  rect(width/2, height/2, width/2, height/2);
  // Arguments for rect 2
  fill(245,90,100);
  rect(300,200,x,y);
  // Come up with as many as you can think of!
  fill(200,245,23)
  rect(x, y, w, h);
  ////////
  rect();
  rect();
  rect();
  rect();
}

For Q2, I had to draw a Rectangle in the center that can be resized when changing the width and height of the canvas.

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

function draw() {
  background(0);
  rectMode(CENTER); // leaves the rect in the center
  fill(255);
  rect(width / 2, height / 2, width / 2, height / 2); // sets the dimensions as half of the width and height in a way that can be easily changed
}

In Q3, I draw a random rectangle that could be resized when changing the width and height of the canvas.

//declare left side line points
let leftSideX1;
let leftSideY1;
let leftSideX2;
let leftSideY2;
//declare right side line points
let rightSideX1;
let rightSideY1;
let rightSideX2;
let rightSideY2;
//declare upper side line points
let upSideX1;
let upSideY1;
let upSideX2;
let upSideY2;
//declare downwards side line points
let dwnSideX1;
let dwnSideY1;
let dwnSideX2;
let dwnSideY2;

function setup() {
  createCanvas(400, 400); //canvas size
  // left side points initialize
  leftSideX1 = width / 7; // this line connects the width of the canvas 
  leftSideY1 = height / 7;// this line connects the height of the canvas
  leftSideX2 = leftSideX1;
  leftSideY2 = leftSideY1 * 2;
// right side points initialize
  rightSideX1 = leftSideX1 * 4;
  rightSideY1 = leftSideY1;
  rightSideX2 = leftSideX1 * 4;
  rightSideY2 = leftSideY2;
//up side points initialize
  upSideX1 = width / 7; // this line connects the width of the canvas
  upSideY1 = height / 7; // this line connects the height of the canvas
  upSideX2 = upSideX1 * 4;
  upSideY2 = upSideY1;
  //down side points initialize
  dwnSideX1 = upSideX1;
  dwnSideY1 = upSideY1 * 2;
  dwnSideX2 = upSideX2;
  dwnSideY2 = dwnSideY1;
}

function draw() {
  background(220);

  //drawing the lines by using the variables
  stroke(0, 0, 255);
  strokeWeight(3);
  line(leftSideX1, leftSideY1, leftSideX2, leftSideY2);
  line(rightSideX1, rightSideY1, rightSideX2, rightSideY2);
  line(upSideX1, upSideY1, upSideX2, upSideY2);
  line(dwnSideX1, dwnSideY1, dwnSideX2, dwnSideY2);
}

For Q4, I think I managed to do almost everything except for the Challenge point. When I resized the width, I didn’t achieved for the corner circles to move to the actual corners of the canvas. I am sure there’s something lacking in my algorithm for this to be achieved, I am just not sure what it is.

//defining every circle x and y coordinates
let circRightX;
let circRightY;

let circLeftX;
let circLeftY;

let circUpX;
let circUpY;

let circDwnX;
let circDwnY;
//Corner circles defining x and y coordinates
let cirUpperLX;
let cirUpperLY;

let cirDwnLX;
let cirDwnLY;

let cirUpperRX;
let cirUpperRY;

let cirDwnRX;
let cirDwnRY;

function setup() {
  createCanvas(800, 800);

  circRightX = width / 2;
  circRightY = height / 2;

  circLeftX = width / 2;
  circLeftY = height / 2;

  circUpX = width / 2;
  circUpY = height / 2;

  circDwnX = width / 2;
  circDwnY = height / 2;

  cirUpperLX = width / 2;
  cirUpperLY = height / 2;

  cirDwnLX = width / 2;
  cirDwnLY = height / 2;

  cirUpperRX = width / 2;
  cirUpperRY = height / 2;

  cirDwnRX = width / 2;
  cirDwnRY = height / 2;
}

function draw() {
  background(220);

  noStroke();
  fill(200, 255, 70);
  //right circle behaviour
  circle(circRightX, circRightY, 50);
  circRightX++;
  //left circle behaviour
  circle(circLeftX, circLeftY, 50);
  circLeftX--;
  //up circle behaviour
  circle(circUpX, circUpY, 50);
  circUpY--;
  //dwn circle behaviour
  circle(circDwnX, circDwnY, 50);
  circDwnY++;

  //upper left corner circle behaviour
  circle(cirUpperLX, cirUpperLY, 50);
  cirUpperLX--;
  cirUpperLY--;
  //dwn left corner circle behaviour
  circle(cirDwnLX, cirDwnLY, 50);
  cirDwnLX--;
  cirDwnLY++;
  //upper right corner circle behaviour
  circle(cirUpperRX, cirUpperRY, 50);
  cirUpperRX++;
  cirUpperRY--;
  //dwn right corner circle behaviour
  circle(cirDwnRX, cirDwnRY, 50);
  cirDwnRX+=10;
  cirDwnRY+=10;
}

Sin título.mp4

Sin título (1).mp4