Generate a Text / ASCII Pyramid

[kirupa]

This is a companion discussion topic for the original entry at https://www.kirupa.com/codingexercises/ascii_pyramid.htm

[polaryeti]

I want this pattern, what’s the logic behind this one? There are lots of blogs online that show code but not teach technique. Share any blogs that you know that teach the logic behind it as well.

At i=1, j=5 should be printed as star, rest as white spaces

At i=2, j=4,6…

At i=3, j=3,5,7….

At i=4,j=2,4,6,8…

At i=5, j=1,3,5,7,9…

How do I convert this into logic?

[kirupa]

This is a great question and possibly my next coding challenge! Is the positioning handled by a space character? Or is it assuming that the stars are printed onto an HTML text element with the text-align CSS property set to center?

[polaryeti]

I’m using only javascript for this.

[kirupa]

Gotcha! I will get back to you tomorrow with a working snippet and explanation of what happens

Coding on the phone is a hassle!

[polaryeti]

for (i = 1; i <= 5; i++) {
  for (space = 1; space <= 5 - i; space++) {
    document.write("0");
  }
  for (j = 1; j <= i; j++) {
    document.write("X0");
  }
  document.write("<br>");
}

I’ve solved this by now. Well I didn’t solve it, tutorials helped me.

[kirupa]

Here is a slight variation on what you’ve done that prints to the Console:

let depth = 10;

for (i = 1; i <= depth; i++) {
  let output = "";
    
  for (space = 1; space <= depth - i; space++) {
    output += " ";
  }
    
  for (j = 1; j <= i; j++) {
    output += "X ";
  }
    
  console.log(output);
}

[polaryeti]

thank you.

[kirupa]

Do you need an explanation of how the code works? This is a fun exercise!

[polaryeti]

it’d be great to have explanation!

[kirupa]

If we had to start at the top, let’s look at an example and put it into rows and columns:

Quick Note: One of the biggest challenges is in getting our pyramid to look balanced. If we printed each X into an HTML element like a p or span, we can use CSS and center the text very easily. Because it is more interesting and challenging, let’s assume we are printing to the Console or textarea where there is no easy default centering built-in. It is up to us to manually figure out the spacing and centering capabilities

Getting back to our example, let’s give our rows and columns a number starting with 0:

If we had to call out some of the interesting details about our pyramid that has a depth of 5, they are:

• Row 0: The first x is at position 4
• Row 1: The x’s are at positions 3 and 5
• Row 2: The x’s are at 2, 4, and 6
• Row 3: The x’s are at 1, 3, 5, and 7
• Row 4: The x’s are at 0, 2, 4, 6, and 8

We should start to see a pattern emerging. The two types of characters we have are the space, which we will specify as an o and the x, which is an xo:

(To distinguish, o’s are purple and x’s are pink.)

This makes it more clear what happens at each row for each given depth:

• Row 0: 4 spaces, 1 x at position 4
• Row 1: 3 spaces, 1 x at position 3, 1 x at position 5
• Row 2: 2 spaces, 1 x at position 2, 1 x at position 4, and 1 x at position 6
• …and so on!

Let us switch over into code. If we had to just define our opening space characters, we would have the following:

let x = "xo";
let space = "o";

let depth = 5;

for (let i = 0; i < depth; i++) {
  console.log(space.repeat(depth - i));
}

We have our spaces printing appropriately. What about the x characters? When we look at our diagram, the number x’es that we see is related to the number of rows. At row 0, we have 1 x. At row 1, we have 2 x characters. At row 2, we have 3 x characters. Generalizing a bit, the number of x characters is 1 plus the row number.

This brings us to our revised and final code:

let x = "xo";
let space = "o";

let depth = 5;

for (let i = 0; i < depth; i++) {
  let spaces = space.repeat(depth - i);
  let xes = x.repeat(i + 1);

  console.log(spaces + xes);
}

The output here is now:

Now, what we can do is have our space character be a space and a x character be just an x. We can adjust the value for the x and space variables to pull that off:

let x = "x ";
let space = " ";

let depth = 5;

for (let i = 0; i < depth; i++) {
  let spaces = space.repeat(depth - i);
  let xes = x.repeat(i + 1);

  console.log(spaces + xes);
}

When we preview this, what we see is now:

Just for kicks, if give our pyramid a depth of 25, this is what we see:

Cool, right? Let me know if you have any questions and I can explain any part in more detail

[kirupa]

@polaryeti - I finally finished my explanation in the above response

[polaryeti]

I’ve bookmarked it because it’s too good. I’m reading it piece by piece, it’s long.

[kirupa]

I will try to have an article and/or video on this sometime in the next few days. I have to get the floating snowman/ghost think documented first (cc @AmiiboAmigos )

[kirupa]

Ok - I couldn’t help it! Here is the coding exercise on this topic: Generate a Text / ASCII Pyramid

@polaryeti - I had a bug in the code a few responses ago! I fixed it in the article. The right way to define the leading spaces is space.repeat(depth - i - 1). I forgot to take the 1 in my earlier responses!

Also, you got the first badge for completing this

[kirupa]

I had some free time, so I decided to make a video on this as well

Create a Text / ASCII Pyramid