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);
}
}
}
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);
}
}
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?
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!
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)
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);
}
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
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/
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.
