# Two questions on for loops and randomize translate

**URL:** <https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567>\
**Category:** Coding Questions\
**Created:** [August 30, 2020, 5:09pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567 "2020-08-30T17:09:54Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [August 30, 2020, 5:09pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/1 "2020-08-30T17:09:54Z")

</div>

The first question is regarding this simple for loop on translate, What I am trying to achieve is to have a line appear in random places in the canvas with translate, but when I do a for loop, I get a constant line at the same coordinate on x and y. How can I fix that?

Second question is, if I want only 20 lines to appear, how do I achieve this?

I tried with a if Loop but i don’t got the proper syntax or order.

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

void draw(){

  for (float i=0; i < width ; i = i + (random(width))) {
    for (float j=0 ; j < height ; j = j + (random(height))) {
      translate(i, j);
      line(30,30,30,60);
    }
  }
 
}

```

Best regards!

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [August 30, 2020, 6:13pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/2 "2020-08-30T18:13:56Z")

</div>

Welcome to the forum.

First line is always drawn to 30,30,30,60 because loops always start with same values i=0, j=0. Translate changes the place of coordinate system and line is always 30 pixels down. I would just use random values for start and end point of the line. Like this

```auto
void setup(){
  size(500,500);
  frameRate(1);
}

void draw() {
  background(255);
  for(int i = 0; i < 20; i++) {
    float x = random(width);
    float y = random(height);
    line(x, y, x + random(60) - 30, y + random(60) -30);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 30, 2020, 6:23pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/3 "2020-08-30T18:23:22Z")

</div>

@SomeOne 's approach is better but translate effects line as well.

Works better with pushMatrix / popMatrix though

- (problem is we add big values to i and j and soon leave the screen with the position i,j…)

```auto

void setup() {
  size(500, 500);
  background(255);
  frameRate(9);
}

void draw() {
  background(255);
  for (float i=0; i < width; i = i + (random(width))) {
    for (float j=0; j < height; j = j + (random(height))) {
      pushMatrix(); 
      translate(i, j);
      line(30, 30, 30, 60);
      popMatrix();
    }
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 30, 2020, 8:24pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/4 "2020-08-30T20:24:21Z")

</div>

I enjoyed the visual effect from your original code.

Small tweak:

```auto
void setup()
  {
  size(500, 500);
  background(255);
  }

void draw()
  {
  for (float i=0; i < width ; i = i + (random(width))) 
    {
    for (float j=0 ; j < height ; j = j + (random(height))) 
      {
      if (j>0 && i>0)
        {
        translate(i, j);
        strokeWeight(2);
        stroke(random(0, 255));
        line(0,30, 0,60);
        }
      }
    }
  //println(frameRate);
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3637f9af13c803aea7de8b28a00500e15606be61.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [August 30, 2020, 9:08pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/5 "2020-08-30T21:08:06Z")

</div>

Thank you very much!  
Of course, so because there’s a line with the same coordinates it will always appear. Although I would like to have the same line’s properties appear everywhere.

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [August 30, 2020, 9:09pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/6 "2020-08-30T21:09:36Z")

</div>

I was just looking at the push and pop Matrix functions and try to wrap my head around, so basically they are like a “save state” of my drawing and moves on it’s own coordinate system? Like, for example, grouping lines in illustrator or blocks in autoCAD?

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [August 30, 2020, 9:26pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/7 "2020-08-30T21:26:50Z")

</div>

Glad you enjoyed it!  
I’m trying to replicate a plant that grows on a mountain that I saw near where I live. So I thought of maybe having a shape and just randomly scatter it around.  
The tweak you made looks like raining!  
It’s a cool vibe!

Using the logic proposed by @SomeOne

> [@SomeOne](#):
>
> oops always start with same values i=0, j=0.

and @Chrisir

> [@Chrisir](#):
>
> Works better with pushMatrix / popMatrix though

I mixed all the codes and added another if loop to determine the amount of lines instead of they going randomly to infinity.  
But I don’t know why it works. The For loops say START TRANSLATING, so they are repositioning my Lines everytime i and j are \< the canvas size, so that means that they will always appear on the canvas limit. The if function is saying that if j and i are above 0 then translate and lines and stop if x is above 30 lines drawn…  
I kinda…get it…but still don’t comprehend it. lol

```auto
int x =0; //amount of lines. 

void setup()
  {
  size(500, 500);
  background(255);
  }

void draw()
  {
 
  for (float i=0; i < width ; i = i + (random(width))) 
    {
    for (float j=0 ; j < height ; j = j + (random(height))) 
      {
      if (j > 0 && i > 0)
        {
          if (x < 30) //amount of lines 
          {
          pushMatrix();
        translate(i, j);
        strokeWeight(2);
        stroke(random(0, 255));
        line(0,0, 0,60);
        popMatrix();
        x++;
          }
        }
      }
    }
  println(frameRate);
  }

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 30, 2020, 9:34pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/8 "2020-08-30T21:34:54Z")

</div>

> [@Huno](#):
>
> they are like a “save state” of my drawing and moves on it’s own coordinate system

- pushMatrix saves the coordinate system. translate changes it. popMatrix restores the coordinate system.

@SomeOne 's approach is WAY better than mine.  
he just makes new random positions instead of adding them to variable (which brings you off the screen fast)

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [August 31, 2020, 4:44am UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/9 "2020-08-31T04:44:09Z")

</div>

I like images your code creates. They are simple, but pleasing. I did couple of modifications to the code just for fun and curiosity.

- There is no need to set I & j to zero at start of the for loops, it’s just the most common case. So I changed those values to start with a random number in range of 10-100.
- angle is a value from 0 to 2\*PI or 0 to 360 degrees. rotate() is like translate(), but it rotates coordinate system and direction of drawn things.
- noLoop()-function tells processing not to call draw() function anymore. It can be restarted with loop()-function. In this case it would be neater to move all code to setup()-function, because there is no need to loop again and again the draw()-function.

```auto
int x = 0; //amount of lines. 

void setup()
  {
  size(500, 500);
  background(255);
  }

void draw()
  {
 
  for (float i=(random(10)+1)*10; i < width ; i = i + (random(width))) 
    {
    for (float j=(random(10)+1)*10 ; j < height ; j = j + (random(height))) 
      {
        if (x < 30) //amount of lines 
        {
          float angle = random(TAU);
          pushMatrix();
          translate(i, j);
          rotate(angle);
          strokeWeight(2);
          stroke(random(0, 255));
          line(0,0, 0,60);
          popMatrix();
          x++;
        } else {
          noLoop(); //Stops running of draw()-function
        }
      }
    }
  println(frameRate);
}

```

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [August 31, 2020, 9:36pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/10 "2020-08-31T21:36:20Z")

</div>

oooh, I see.

Thanks for the good comments to all, I’m getting it now. I 'm glad y’all like it, I wanted to see if I could take a picture of the mountain but a friend just took a picture of it, here is his instagram, check picture no. 3 [@soint on Instagram](https://www.instagram.com/p/CDRRWtuhYAi/)

@Chrisir

> [@Chrisir](#):
>
> he just makes new random positions instead of adding them to variable

Oh! yeah, I see it’s easier to grasp!

> [@SomeOne](#):
>
> I did couple of modifications to the code just for fun and curiosity.

yes! be my guest, your explanations are amazing too, thank you!

> [@SomeOne](#):
>
> There is no need to set I & j to zero

This is something that always bugged me, like always initialize from 0 but never thought of changing it.

Thank you all!

Best regards!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 31, 2020, 9:53pm UTC](https://discourse.processing.org/t/two-questions-on-for-loops-and-randomize-translate/23567/11 "2020-08-31T21:53:44Z")

</div>

One of the best tools in a programmer’s tool chest is knowing the resources available to you and learning to navigate, filter, and use them.

A short list of resources to peruse:

> **Resources \< Click here to expand !**
>
> Explore the resources available here:
> 
> - The Processing _website_ has references, examples, tutorials, links to resources, etc.  
> [https://processing.org/](https://processing.org/)
> 
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the menu bar will reveal what is available; libraries, tools, local examples, and other goodies are in there.
> 
> - The Coding Train \< Experience the unbridled enthusiasm of Daniel Shiffman  
> [https://shiffman.net/](https://shiffman.net/)  
> [https://www.youtube.com/user/shiffman](https://www.youtube.com/user/shiffman)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> 
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> 
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)
> 
> - Explore Processing on GitHub:  
> [Processing Foundation · GitHub](https://github.com/processing)  
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java) \< Many of the Processing functions are here!
> 
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the menu.  
> In the education menu, there is a reference to the Coding Train.
> 
> - And the Internet. `:)`

`:)`