Learning to code in P5.js and getting jammed up with for loops

I am still relatively new to P5 and coding in general. I wanted to figure out how to create a series of rotating and shrinking rectangles. I got it figured out but I coded it one shape at a time. Was pretty proud of myself until I tried to update the sizes and realized it really could become very tedious. So, I know this can be done cleaner with a for loop or a nested for loop but I cannot get my head around it.

Could someone take a look and offer up some guidance?

Here is the like to the code: https://editor.p5js.org/Rico2022/sketches/AYXKzSwpm

After I figure out and practice creating more, I want to see if I can make every other shape rotate in the opposite direction but that is for a different day

Thank you in advance!

I've watched and tried the examples from "Coding Train" and a couple other videos. I can follow along with the examples and they make total sense. I know I need more practice and it will "click". I am just stuck in my own head and could use a little help.

I think the first concept to learn here is functions. You think of creating a function when you have a repeated sequence of instructions with only a few values that are different. The sequence of code will become the function body and the varying values will be the parameters.

That's what I did here with your code, factoring 9 repeated lines of code to the function drawSquare of parameter w

var randomColor;
var angle = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(random(255, 70));
  noFill();
  angleMode(DEGREES);
  rectMode(CENTER);
  frameRate(4);
}

function drawSquare(w) {
  push();
  randomColor = color(random(255, 50));
  stroke(randomColor);
  strokeWeight(3);
  translate(windowWidth / 2, windowHeight / 2);
  rotate(angle);
  fill(randomColor);
  rect(0, 0, w, w);
  pop();
}

function draw() {
  background(220);

  //------------------Centered Rotating Shrinking Squares - each shrinking by 25 with a random greyscale fill-----
  drawSquare(125);
  drawSquare(100);
  drawSquare(75);
  drawSquare(50);
  drawSquare(25);
  drawSquare(10);
  drawSquare(6);
  angle += 6;
}

After that, you may think of further simplifying the code using a for loop. Since the values of the square widths don't exactly
follow a mathematical formula (at least the last two don't), you can
define an array and loop through that array:

function draw() {
  background(220);
  const square_widths = [125, 100, 75, 50, 25, 10, 6];
  for(let i = 0; i < square_widths.length; i++){
    drawSquare(square_widths[i]);
  }
  angle += 6;
}

full sketch link

As stated in the comment, the direction and speed with which the figure rotates is controlled by angle += 6; the sign is the sense and the value relates to the speed - I'm sure you'll figure it out.

Edit As per George Profenza's message, an interesting alternative to the array solution above, is using the function map:

function draw() {
  background(220);
  for (let i = 0; i < 7; i++) {
     drawSquare(map(i, 0, 6, 125, 6));
  }
  angle += 6;
}

Now, the values returned by the function map in this scenario are not exactly the values you created initially - they are even better! These values make an equally-spaced sequence of 7 numbers (of course you can generate as many as you need) that starts at 125 and ends at 6 (125, 105.16666666666667 85.33333333333334, 65.5, 45.66666666666667, 25.83333333333333, 6).

This solution is especially valuable because it is a good pattern one can follow to create equally spaced values in a loop, something one would need sooner or later - you already do; the equally spaced data cover the space you wanted covered in a more efficient way than a sequence of manually defined values.

I hope I'm not pushing too much in this post, but this opens the discussion on how I knew those values: a very basic technique to debug your code - using the function console.log:

function draw() {
  background(220);
  for (let i = 0; i < 7; i++) {
    let w = map(i, 0, 6, 125, 6);
    if (angle === 0) {
      console.log(w);
    }
    drawSquare(w);
  }
  angle += 6;
}

The console.log(w) call displays in the console area below the p5 editor the values of w (from where I copy-pasted them). It is guarded by an if(angle===0) so it only prints the values of w for the first time the function draw runs (when angle is zero); it's quite obvious the values will be the same every time it runs, and we don't need to fill up the console continuously with the same data - only once is enough.

An important note: we use console.log calls to get some information we're not sure about. After we found out how things are, we don't need that call any more, so it is good practice to delete that part from our code as soon as we got the information; it should never make it to the final product

Here's the sketch I saved.