# Nested loops and asterisk patterns

**URL:** <https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015>\
**Category:** Coding Questions\
**Created:** [June 12, 2019, 11:37am UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015 "2019-06-12T11:37:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![otorp2](https://avatars.discourse-cdn.com/v4/letter/o/67e7ee/32.png) [@otorp2](https://discourse.processing.org/u/otorp2)\
**Post date:** [June 12, 2019, 11:37am UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/1 "2019-06-12T11:37:53Z")

</div>

hi i know this isn’t very appealing visually but I’m trying to learn how to control nested loops - whats a good way to use nested loops and text to create asterisk patterns (simple triangle, diamond etc). ![02%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4b53c6f43256085edc4cf8b3c838f53f98b77588.png)

thanks for help!

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 12, 2019, 12:26pm UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/2 "2019-06-12T12:26:13Z")

</div>

Hey There!

So you would like to make patterns with the symbols ?

First it be important to try and make the patterns in console. And then translate the logic into a X and Y canvas. So if you want a triangle patterns let’s see what defines it.

```auto
*
**
***
****
 *****
 ******

```

We can see simply that the triangular pattern is created by having a star print on a line and the next line has +1 of the last line. How do you do it with 2 for loops ?

Figure it out !

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [June 12, 2019, 1:30pm UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/3 "2019-06-12T13:30:34Z")

</div>

```auto
Var radius = 10;
Var theta = 360/corners;
Var a =0;
Var corners =5;

For(var i=0;i<no_of_stars_per_line+a;i++){
For(var j=0;j<lines;j++){

For(var k=0;k<corners;k++){

Var x = i + radius * cos(theta * k);
Var y = j + radius * sin(theta * k);

Drawshape(0+i * x_spacing,0+j * y_spacing,x,y);

a ++;
}}}

```

That should be the basic jist of it. Of course the drawshape function is supposed to have your triangle code, otherwise you could simply use

```auto
Line(0+x_spacing * i,0+y_spacing * j,x,y);

```

You’d need to define your spacing.

Sorry code isnt formatted im using my phone  
Also my star icon doesnt seem to work so i used hash # instead just add them in to the right places as they’re you’re multipliers.

---

<div class="post-metadata">

**Author:** ![otorp2](https://avatars.discourse-cdn.com/v4/letter/o/67e7ee/32.png) [@otorp2](https://discourse.processing.org/u/otorp2)\
**Post date:** [June 13, 2019, 3:12am UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/4 "2019-06-13T03:12:43Z")

</div>

![32%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cb83e5ebbd9f546ecd633e9a50c0af489a835571.png)

my horrible code!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 13, 2019, 4:42am UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/5 "2019-06-13T04:42:58Z")

</div>

please not post code as image ( unless you combine it with the resulting canvas? )  
use in the post editor the

```auto
</> code tag

```

looks like:  
```  
type or paste code here  
```

* * *

as a start please note that  
usually, we use the

```auto
setup(){}
draw(){}

```

structure

and also from the beginning please use variables

```auto
int mx = 100;
int my = 100;

void setup() {
  size(400,400);
}

void draw() {
  background(200);
  fill(0);
  for(int x = 0; x < mx; x+=10) {
    text("*",x,10);
    for(int y = my; y>0; y -=10) {
      text("^",0,y);
    }
  }
}

```

ok, that is still the same as your code,  
just formatted…

* * *

now to the nesting for loop question,  
actually you execute the inner for loop 10 times  
( by the outer for loop )  
but printing the same / at the same position

not make much sense,  
if you would use like

```auto
text("^",x,y);

```

the nesting makes more sense, but possibly is far from what you wanted?

---

<div class="post-metadata">

**Author:** ![otorp2](https://avatars.discourse-cdn.com/v4/letter/o/67e7ee/32.png) [@otorp2](https://discourse.processing.org/u/otorp2)\
**Post date:** [June 14, 2019, 11:58am UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/6 "2019-06-14T11:58:05Z")

</div>

Thank you all for your help. I have researched a few days and I have found a javascript code that does what i want. I need to convert this from js to java for processing. What would be the equivalent in Processing? Thanks so much - I have already learned a great deal.

```auto
var i, j;

for(i=1;i<=5;i++){
  for(j=1;j<=i;j++){
    document.write("*");
  }
  document.write('<br/>');
}

```

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [June 14, 2019, 12:57pm UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/7 "2019-06-14T12:57:46Z")

</div>

> [@otorp2](#):
>
> I need to convert this from js to java for processing

Here you go.  
Check the attached screenshot, please.

```auto
void setup() {
  size(200,200);
}

void draw() {
  background(200);
  fill(0);
  
  int i, j;
  for(i=1; i <= 10; i++) {
    for(j=1; j <= i; j++) {
      text("*", i*10, j*10);
    }
  }
}

```

![53](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/99e68db87159f13cba15d6d043e0c967a1d34e07.png)

---

<div class="post-metadata">

**Author:** ![otorp2](https://avatars.discourse-cdn.com/v4/letter/o/67e7ee/32.png) [@otorp2](https://discourse.processing.org/u/otorp2)\
**Post date:** [June 14, 2019, 1:29pm UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/8 "2019-06-14T13:29:00Z")

</div>

Thank you so much! I will work with this for awhile and post my findings here for my own reference and other beginners who wish to learn about nested loops.

many thanks! - otorp2

---

<div class="post-metadata">

**Author:** ![otorp2](https://avatars.discourse-cdn.com/v4/letter/o/67e7ee/32.png) [@otorp2](https://discourse.processing.org/u/otorp2)\
**Post date:** [June 14, 2019, 5:49pm UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/9 "2019-06-14T17:49:34Z")

</div>

lining up to 0,0 corner:

```auto
int i, j;
void setup() {
  size(190,200);
  background(200);
  fill(0);

  for(i= 0; i <= 9; i++) {
    for(j=0; j <= i+1; j++) {
    text("*", i*10, j*10);
      }
   }
}

```

 ![58%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f0b1cd645474076ebe570256370697bf7a5b386d.png)

---

<div class="post-metadata">

**Author:** ![otorp2](https://avatars.discourse-cdn.com/v4/letter/o/67e7ee/32.png) [@otorp2](https://discourse.processing.org/u/otorp2)\
**Post date:** [June 14, 2019, 6:09pm UTC](https://discourse.processing.org/t/nested-loops-and-asterisk-patterns/12015/11 "2019-06-14T18:09:32Z")

</div>

Change text asterisk to rect - simple is beautiful

```auto
int i, j;
void setup() {
  size(190,200);
  background(200);
  fill(0);

  for(i= 0; i <= 9; i++) {
    for(j=0; j <= i+1; j++) {
    //text("*", i*10, j*10);
      noFill();
      rect(0,0,i*10,j*10);
      }
   }
}

```

 ![02%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/ba6b388ac07498194f5805b0448323365bc291b4.png)