# Two questions on for loops and randomize translate

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.

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

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

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

@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…)
``````
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();
}
}
}
//
``````
1 Like

I enjoyed the visual effect from your original code.

Small tweak:

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

`:)`

1 Like

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.

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?

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

and @Chrisir

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

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

1 Like

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

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 https://www.instagram.com/p/CDRRWtuhYAi/

@Chrisir

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

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

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

Thank you all!

Best regards!

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:

`:)`