This is what I’m working on, on the second week of ICM, I realize I could utilize figma to pick colors and some axis, it helps but sometimes it is not :(

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

function draw() {
  background(221, 236, 209);// R, G, B
  noStroke ()
  fill (228,93,93) // R, G, B
  rectMode (CENTER)
  rect(width/2, height/2, width/2, height/2)
}

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

function draw() {
  background(221, 236, 209);// R, G, B
  
  //line style
  stroke (228, 93, 93);
  strokeWeight (3);
  
  //line
  line(width/4, height/4, height*3/4, height/4);// top line
  line(width/4, height*3/4, width*3/4, height*3/4)// bottom line
  line(width/4, height/4, width/4, height*3/4)// left line
  line(height*3/4, height/4, width*3/4, height*3/4)// right line
}

The drawing below surprisingly is the most challenging one, I figure how to move it on the X and Y axis, but when it comes to other direction I just experiment, and still can’t figure why combining ”- -” and “+ +” could give us different direction

let circleX = 200;
let circleY = 200;
let circleC = 200;
let circleD = 200;
let circleE = 200
let circleR1 = 200
let circleR2 = 200
let circleL1= 200
let circleL2= 200
let circleF1=200
let circleF2=200
let circleG1=200
let circleG2=200
let s = 50;

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

function draw() {
  frameRate(24);
  background(221, 236, 209); // R, G, B
  noStroke();
  fill(228, 93, 93); // R, G, B

  //Circle moving to the right fastest
  circle(circleX, height / 2, s);
  circleX = circleX + 10;

  //Circle moving to the left
  circle(circleY, height / 2, s);
  circleY--;

  // Circle moving up
  circle(width/2, circleD, s);
  circleD--;
  
  // Circle moving down
  circle(width/2, circleE, s)
  circleE++
  
  // Circle moving right up corner
  circle(circleR1, circleR2, s)
  circleR1++
  circleR2--
  
  // Circle moving left up corner
  circle(circleL1, circleL2, s)
  circleL1--
  circleL2--
  
  // Circle moving left down corner
  circle(circleF1, circleF2, s)
  circleF1--
  circleF2++
  
  //circle moving right down corner
  circle(circleG1, circleG2,s)
  circleG1++
  circleG2++
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(221, 236, 209); // R, G, B
  
}

function draw() {
  frameRate(24);
  background(221, 236, 209); // R, G, B
  noStroke();
  fill(228, 93, 93); // R, G, B
  ellipse (mouseX+20, mouseY, 30, 30)
  fill (119, 198, 206)
  ellipse (mouseX, mouseY+40, 30, 30)
  fill (249, 141, 206)
  ellipse (mouseX*3/4, mouseY+15, 30, 30)
  
}

<aside> 💡

I post question regarding this, please answer it :)

</aside>

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

function draw() {
  background(221, 236, 209);// R, G, B
  
  //line style
  stroke (228, 93, 93);
  strokeWeight (3);
  noFill()
  rect (mouseX, mouseY, width/2, height/2)
  
  // is this the right thing to do? LoL since it basically the same right? :3

}