# Generate a Text / ASCII Pyramid

**URL:** <https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830>\
**Category:** programming\
**Created:** [December 29, 2022, 8:49pm UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830 "2022-12-29T20:49:49Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 29, 2022, 8:49pm UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/1 "2022-12-29T20:49:49Z")

</div>

This is a companion discussion topic for the original entry at [https://www.kirupa.com/codingexercises/ascii\_pyramid.htm](https://www.kirupa.com/codingexercises/ascii_pyramid.htm)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 29, 2022, 8:50pm UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/2 "2022-12-29T20:50:43Z")

</div>



---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 6, 2022, 3:12am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/3 "2022-12-06T03:12:15Z")

</div>

![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/8/6/86618c03c8ab0b341b4744d9959f3f02d5ec46c5.png)

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?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 6, 2022, 4:34am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/4 "2022-12-06T04:34:34Z")

</div>

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**?

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 6, 2022, 5:26am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/5 "2022-12-06T05:26:00Z")

</div>

I’m using only javascript for this.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 6, 2022, 6:19am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/6 "2022-12-06T06:19:22Z")

</div>

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

Coding on the phone is a hassle!

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 6, 2022, 6:43am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/7 "2022-12-06T06:43:03Z")

</div>

```auto
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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 6, 2022, 6:28pm UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/8 "2022-12-06T18:28:33Z")

</div>

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

```auto
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);
}

```

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/2/9/295b3f61a550b8a288ece970309d7e3f08e01fbf.png)

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 7, 2022, 2:58am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/9 "2022-12-07T02:58:14Z")

</div>

thank you.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 7, 2022, 6:09am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/10 "2022-12-07T06:09:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 7, 2022, 6:37am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/11 "2022-12-07T06:37:36Z")

</div>

it’d be great to have explanation!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 8, 2022, 4:36am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/12 "2022-12-08T04:36:39Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/9/7/97149dca3e63f9e058e4cf09cec645a352c149ea.png)

**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:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/a/d/adc4b4b7b172aaeb0c10e364964785960370483c.png)

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`:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/b/d/bd6b2c67c87dab84510e64057f7c45a37418647f.png)

(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:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/c/c/cca04fc8111754024201515f225b70089bc69348.png)

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:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/d/8/d8dc32adb638edf5245e28b214aa4d046d492165.png)

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

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/e/f/effd3c14c277d68d528f57ac220e7a73989f3bc5.png)

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 9, 2022, 3:03am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/13 "2022-12-09T03:03:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 9, 2022, 5:39am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/14 "2022-12-09T05:39:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 9, 2022, 5:49am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/15 "2022-12-09T05:49:12Z")

</div>

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 😀)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 11, 2022, 2:52am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/16 "2022-12-11T02:52:47Z")

</div>

Ok - I couldn’t help it! Here is the coding exercise on this topic: [Generate a Text / ASCII Pyramid](https://www.kirupa.com/codingexercises/ascii_pyramid.htm)

@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 😛

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/d/b/db0eaa6241567da5c1bfbd9e9e5e8ddfcbd4a617.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 17, 2022, 5:42am UTC](https://forum.kirupa.com/t/generate-a-text-ascii-pyramid/655830/17 "2022-12-17T05:42:14Z")

</div>

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

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/f/4/f45eb288ab7aeece2c2766a8bf41614af5ad7e69.jpeg "Create a Text / ASCII Pyramid") ](https://www.youtube.com/watch?v=meJVXTvgVwQ)