# Nested loops and asterisk patterns

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

thanks for help!

1 Like

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.

``````*
**
***
****
*****
******
``````

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 !

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

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

my horrible code!

1 Like

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

``````</> code tag
``````

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

as a start please note that
usually, we use the

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

structure

and also from the beginning please use variables

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

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

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

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.

``````var i, j;

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

Here you go.

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

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

lining up to 0,0 corner:

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

1 Like

Change text asterisk to rect - simple is beautiful

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

3 Likes