Nested loops and asterisk patterns

[otorp2]

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!

[InferNova]

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 !

[paulgoux]

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.

[otorp2]

my horrible code!

[kll]

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?

[otorp2]

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/>');
}

[philipplehmann]

@otorp2

I need to convert this from js to java for processing

Here you go.
Check the attached screenshot, please.

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

[otorp2]

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

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

[otorp2]

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