ICM: Assignment 2

Here’s a link to my sketch: https://editor.p5js.org/ryrotella/sketches/-mgdKe2OW

I feel very comfortable with variables, and I had no problem with the homework. I did come across the rotate() function in the reference page. I really wanted to make a shape that rotated around the position of my mouse cursor. I researched online, and there were some solutions that included for-loops and cos/sin functions. That seemed more advanced than we were dealing with so I didn’t venture too much in trying that out yet.

---

For the assignment sheet, I tried the challenge on 3d.

This challenge took some time, mainly because I wrote each circle with separate variables for x and y. I did this so they would behave differently.

I am curious as to how this can be written more efficiently with less lines of code and less repetitive steps. How can that be done?

Link to sketch: https://editor.p5js.org/ryrotella/sketches/YpmkcDSfw

Code:

let x;
let oneX;
let twoX;
let threeX;
let fourX;
let fiveX;
let sixX;


//eight circles total

let y;
let twoY;
let threeY;
let fourY;
let fiveY;
let sixY;



function setup() {
  createCanvas(700, 400);
  
  //first circle - move right (oneX, y)
  oneX = width/2;
  y = height/2;
  
  //second circle - move left (twoX, y)
   twoX = width/2;

  
  //third circle - move up (x, oneY)
  x = width/2;
  oneY = height/2;
  
  //fourth circle - move down (x, twoY)
    twoY = height/2;

  //fifth circle - move diagonally right top (threeX, threeY)
  
  threeX = width/2;
  threeY = height/2;
  
  //sixth circle - move diagonally left top (fourX, fourY)
  
  fourX = width/2;
  fourY = height/2;
  
  //seventh circle - move diagonally down right (fiveX, fiveY) 
  
  fiveX = width/2;
  fiveY = height/2;
  
  //eigth circle - move diagonally down left
  //(sixX, sixY)
  
  sixX = width/2;
  sixY = height/2;
  
  
}

function draw() {
  background(220);
  
  
  //part 0 - move circle to the right
  circle(oneX, y, 50);
  oneX++;
  
  //refresh to center
  if (oneX >= width){
    oneX = width/2;
  }
  
  //part a - Add 3 more, 1 moving left, 1 moving up, 1 moving down.
  
  //circle moving to left
  
  circle(twoX, y, 50);
  
   twoX--;
  
  //refresh to center
  if (twoX <= 0){
    twoX = width/2;
  }
  
  //circle moving up
  
  circle(x, oneY, 50);
  oneY--;
  
  //refresh to center
  if (oneY <= 0){
    oneY = height/2;
  }
  
  //circle moving down
   circle(x, twoY, 50);
  twoY++;
  
  //refresh to center
  if (twoY >= height){
    twoY = height/2;
  }
  
 //part b - Add 4 more, each moving towards each of the 4 corners of the canvas.
  
  //slope between center and corner
  
  //top right corner will always be (width, 0)
  //center is width/2, height/2
  //slope = rise/run == y2 - y1 / x2 - x1
  //0 - height/2 divided by width - width/2
  
  
  let riseTRTwo = 0;
  let riseOne = height/2;  
  
  let runTRTwo = width;
  let runOne = width/2;
  
  let slopeTRX =  runTRTwo - runOne;
  let slopeTRY = riseTRTwo - riseOne;
  
  let slopeTRXrate = slopeTRX / 100; //percentage of increase? don't understand how this math works, per se
  let slopeTRYrate = slopeTRY /100;
  
  //console.log(slopeTRXrate);
//   console.log(slopeTRY);
  
//   console.log(slopeTRY/slopeTRX);
  
  //circle moving diagonally upper right - x++, y--
  circle(threeX, threeY, 50);
  threeX+= slopeTRXrate/2; //divided by 2, just slows it down
  threeY+= slopeTRYrate/2; // already negative
  
  // console.log(threeY)
  
    //refresh to center

   if (threeY <= 0){
    threeY = height/2;
     threeX = width/2;
  }
  
  //circle moving diagonally upper left - x--, y--
  circle(fourX, fourY, 50);
  
  //left top corner - (0, 0)
  
   let riseTLTwo = 0;
  // let riseOne = height/2;  
  
  let runTLTwo = 0;
  // let runOne = width/2;
  
  let slopeTLX =  runTLTwo - runOne;
  let slopeTLY = riseTLTwo - riseOne;
  
  let slopeTLXrate = slopeTLX / 100; //percentage of increase? don't understand how this math works, per se
  let slopeTLYrate = slopeTLY /100;
  
   fourX+=slopeTLXrate/2;
  fourY+= slopeTLYrate/2;
  
    //refresh to center
   if (fourY == 0){
    fourY = height/2;
     fourX = width/2;
  }
  
  //circle moving diagonally down right - x++, y++
  circle(fiveX, fiveY, 50); 
  
  //dr corner - width, height  
   let riseDRTwo = height;
  
  let runDRTwo = width;
  
  let slopeDRX =  runDRTwo - runOne;
  let slopeDRY = riseDRTwo - riseOne;
  
  let slopeDRXrate = slopeDRX / 100; //percentage of increase? don't understand how this math works, per se
  let slopeDRYrate = slopeDRY /100;
  
  fiveX+=slopeDRXrate/2;
  fiveY+=slopeDRYrate/2;
  
  
  //refresh to center
   if (fiveY >= height){
    fiveY = height/2;
    fiveX = width/2;

  }
  
  //circle moving diagonally down left - x--, y++
  
  //part c - move ten times faster than overs
  circle(sixX, sixY, 50);
  
    //DL corner - (0, height)
  
   let riseDLTwo = height;
  
  let runDLTwo = 0;
  
  let slopeDLX =  runDLTwo - runOne;
  let slopeDLY = riseDLTwo - riseOne;
  
  let slopeDLXrate = slopeDLX / 10; 
  let slopeDLYrate = slopeDLY /10;
  sixX+=slopeDLXrate/2;
  sixY+=slopeDLYrate/2;
  
  if (sixY >= height){
    sixY = height/2;
    sixX = width/2;

  }
  
  
}