Use of for-loop to create a stair of ellipses

Sorry to be such a pain.

let’s say one for-loop says

  • put a circle at 1st column of row 1, then
  • a circle at 2nd column of row 1 and
  • 3rd of row 1…

You fill ONE row this way.

How many times must you repeat this for-loop??

As many rows you want to have!!

BUT how do you repeat this for-loop?

By copying it in your Code several times…??

NO… But by using a 2nd for loop!!!

1 Like

Hi @Jayda,

Execute the code below. Though it will not draw your pattern, it exemplifies a common pattern regarding nested loops that may serve as a hint.

function setup() {
  for (let i = 1; i <= 4; i++) {
    alert("row " + i + " . . .");
    for (let j = 1; j <= i; j++) {
      alert("i = " + i + ", j = " + j);

Note from the details of the code and the output how the outer loop controls the inner loop.


my code

int w = 20, scl = 20;
for(int j = 0; j < w; j++) {
  for(int i = 0; i < j; i++) {
    ellipse( (i+0.5)*scl, (j+0.5)*scl,scl,scl);


You can also do something like this:

int w = 10, scl = 20;
for(int j = 0; j < w; j++) {
  for(int i = 0; i < j*2; i++) {
    ellipse( (i+0.5)*scl, (j+0.5)*scl,scl,scl);

edit: or this!

int w = 30, scl = 20;
for(int j = 0; j < w; j++) {
  for(int i = 0; i < j/2; i++) {
    ellipse( (i+0.5)*scl, (j+0.5)*scl,scl,scl);

1 Like

btw how to tag a post as spoiler? I don’t want to show the code directly if the OP doesn’t want

1 Like

Haha! Good point! I think the OP solved it.

But anyway you can leave your posts like they are.

For future posts: the idea is that this is an educational forum so we encourage others to find their solution.

So normally we won’t post full code solutions.

Especially when it’s homework and not hobby

But as I said it’s okay here!

So thank you!

Impressive work that you do by the way in your projects, especially Lissajous!

Warm regards,


1 Like

When I was just staring coding after seeing the coding train youtube channel I didn’t know too much. The videos that were not “introductions to xyz” were too hard for me. So I wanted to see it from actual examples. It is the fastest way to learn for me since I am self-tought. Whenever I posted a post on this forum I wanted an actual solution instead of hints. And my english was far worse than what it is now so I couldn’t really understand the hints. I kept in mind what I wanted so I am posting the whole code. Well somebody reccomended to create my own page where I’ll post all my creations.

Btw what do you think when you said Lissajous was impressive? The project was far below and took me far less time than things like FloodIT. I don’t really understand.


I liked Lissajous because it looked so cool, the different types on one page! Just great!

well it’s just the usual lissajous tables. I’ve seen the coding train making it in a grid too

1 Like

Below is a portion of a solution in p5.js that utilizes the translate, push, and pop functions to simplify the math. To complete the draw function, you’ll need to precede this code with an assignment to the diam variable to specify the size of the ellipses, and an initial call to translate in order to make sufficient room along the top and left margins.

See the comments for explanations.

  // draw the stair of ellipses
  for (let row = 0; row < 20; row++) {
    push(); // save coordinate system at beginning of row
    for (let col = 0; col <= row; col++) {
      ellipse(0, 0, diam);
      // position coordinate system for next column in current row
      translate(diam, 0);
    pop(); // restore coordinate system from beginning of row
    translate(0, diam); // position coordinate system for next row

Edited on December 16, 2020 to insert an additional comment into the code.

1 Like

Below is code for a variant of the project that uses a different approach. It is written for the Processing Python Mode .

Note that the code does not contain any for loops. Instead, it uses recursion, whereby a function calls itself. The concept behind this approach is that we can build a large object from smaller versions of itself. For example, to build a staircase of n steps, we can build a large step, then build a smaller staircase of n - 1 steps on top of that step. The smallest staircase is one that consists of only one step.

Here’s a picture of the result:

The code is below. See the comments for explanations. As a challenge, try to draw the above by translating the code into p5.js.

Also see Wikipedia: Recursion.

def setup():
  size(440, 440)
  fill(0, 0, 0, 48)
def draw():
  # Draw a staircase with 16 stairsteps composed of
  # round building units with a diameter of 40.
  diam = 40
  dimension = 10
  draw_staircase(diam, height - diam, diam, dimension)

# Three recursive functions follow.
# A recursive function is one that calls itself.
# Each recursion consists of ...
#   a recursive case wherein the function calls itself.
#   a base case wherein the function does not call itself.

# To avoid an infinite recursion, the recursive calls must ultimately resolve to the base case.

# Within the three recursions here ...
#   The recursive cases build features from smaller versions of themselves.
#   The base cases draw the smallest versions of the features.

def draw_building_unit(x, y, diam):
  if diam > 5:
    # Recursive case: 
    # First, draw a smaller round building unit.
    draw_building_unit(x - diam // 16, y - diam // 16, diam * 3 // 4)
    # Then enclose it in a full-size ellipse.
    ellipse(x, y, diam, diam)
    # Base case: simply draw a small ellipse
    ellipse(x, y, diam, diam)

def draw_step(x, y, diam, dimension):
  # First, draw a round building unit.
  draw_building_unit(x, y, diam)
  # If <dimension> > 1, extend the step toward the right 
  # by a smaller step with <dimension - 1> round building units.
  if (dimension > 1):
    draw_step(x + diam, y, diam, dimension - 1)
def draw_staircase(x, y, diam, dimension):
  # First, draw a step of <dimension> circles.
  draw_step(x, y, diam, dimension)
  # If <dimension> > 1, draw a smaller staircase
  # of <dimension - 1> steps on top of it.
  if dimension > 1:
    draw_staircase(x, y - diam, diam, dimension - 1) # recursive case
    pass # Base case; do nothing

So cool !
I try it on P5.js