Use of for-loop to create a stair of ellipses

p5.js Coding Questions
36

Hello, @yoyo, and welcome to Processing Foundation Discourse!

It is best to post code as text, rather than as an image capture. Code, as text, is easy for others to copy and paste, so that they can test and experiment with it.

Please also format code when you post it, so that it is easy for others to read. For information on all of this, see Guidelines—Asking Questions.

Following is your code as text, formatted for posting, and with the names the variables i and j changed to x and y, respectively:

function setup() {
  createCanvas(400, 400);
  background(0);
  for (let x = 0; x <= 20; x++) {
    for (let y = 0; y <= x; y++) {
      circle((x + 0.5) * 20, (y + 0.5) * 20, 20);
    }
  }
}

function draw() {
}

Examining the code, including the ranges of the values of the loop variables and the size of the canvas, do you think some circles are being drawn that are outside the canvas? How can you find out?

To figure out how to draw the staircase as you would like it, consider how the values of x in the outer loop should be used to control the range of values of y in the inner loop. Consider what values of y are needed when x is 5 or 15, for example. How can you modify the code to make that happen? Think about the inner loop.

1 Like