# Draw images (not movie)

Hi everyone,

Very easy question I guess…

I am new to Processing and am trying the example codes proposed on Processing.org.
I have tried the recursive tree which I find very nice. To make it a bit funnier I wanted to introduce some stochasticity in the algorithm: I added a line using the random() function so that the lengths of the branches are randomly sampled. And it works…

But when I run the “play” button, instead of drawing one single tree, new trees are produced all the time one after the other, as if the script was read one time after the other.

I would like to draw an image, not a movie. In that case what can I do so that my script is played only once ?

You can see the script below.

Renaud

float theta;

void setup() {
size(640, 640);
}

void draw() {
background(0);
frameRate(30);
stroke(255);
// Let's pick an angle 0 to 90 degrees based on the mouse position
float a = (mouseX / (float) width) * 90f;
// Start the tree from the bottom of the screen
translate(width/2,height);
// Draw a line 120 pixels
strokeWeight(120/20);
line(0,0,0,-120);
// Move to the end of that line
translate(0,-120);
// Start the recursive branching!
branch(120);

}

void branch(float h) {
// Each branch will be 2/3rds the size of the previous one
h *= 0.66;
float h2 = h*random(1.5);

strokeWeight(h/20);

// All recursive functions must have an exit condition!!!!
// Here, ours is when the length of the branch is 2 pixels or less
if (h > 2) {
pushMatrix();    // Save the current state of transformation (i.e. where are we now)
rotate(theta);   // Rotate by theta
line(0, 0, 0, -h2);  // Draw the branch
translate(0, -h2); // Move to the end of the branch
branch(h);       // Ok, now call myself to draw two new branches!!
popMatrix();     // Whenever we get back here, we "pop" in order to restore the previous matrix state

strokeWeight(h/20);

// Repeat the same thing, only branch off to the "left" this time!
pushMatrix();
rotate(-theta);
line(0, 0, 0, -h);
translate(0, -h);
branch(1.2*h);
popMatrix();
}
}
1 Like

see

but pls
-a- start again from the example,
-b- mark every line you added
-c- format with [ctrl][t]
-d- copy paste here ( in your above post / repair )
using the

</>

code formatter

i can not run your code here??

UPDATE ___________________________________
so i try to find it, start over and did my own variation,
but messing with a recursive code is not easy…
i show you this not for the function ( as it is different from your idea )
it is to understand documentation style…

//  https://processing.org/examples/tree.html
//  Recursive Tree by Daniel Shiffman.

float strk = 20, shrink = 0.66;             // kll TEST stroke width to make tree more natural
float theta;

void setup() {
size(640, 360);
}

void draw() {
background(0);
frameRate(30);
stroke(255);
float a = (mouseX / (float) width) * 90f;                 // Let's pick an angle 0 to 90 degrees based on the mouse position
translate(width/2, height);                               // Start the tree from the bottom of the screen
strokeWeight(strk);                    // kll
line(0, 0, 0, -120);                                      // Draw a line 120 pixels
translate(0, -120);                                       // Move to the end of that line
branch(120,strk);                                         // Start the recursive branching!
}

void branch(float h, float strk) {        // kll added stroke width as parameter
h    *= shrink;                                           // Each branch will be [shrink] the size of the previous one
strk *= shrink;                         // kll
//                                                        All recursive functions must have an exit condition!!!!
if (h > 2) {                                              // Here, ours is when the length of the branch is 2 pixels or less
pushMatrix();                                           // Save the current state of transformation (i.e. where are we now)
rotate(theta);                                          // Rotate by theta
strokeWeight(strk);                  // kll
line(0, 0, 0, -h);                                      // Draw the branch
translate(0, -h);                                       // Move to the end of the branch
branch(h,strk);                      // kll             // Ok, now call myself to draw two new branches!!
popMatrix();                                            // Whenever we get back here, we "pop" in order to restore the previous matrix state
//                                                      Repeat the same thing, only branch off to the "left" this time!
pushMatrix();
rotate(-theta);
strokeWeight(strk);                  // kll
line(0, 0, 0, -h);
translate(0, -h);
branch(h,strk);                      // kll
popMatrix();
}
}

or more play:

1 Like

By default the draw() function is called 60 times per second. This is handy for creating animations, but results in the behavior you’re seeing.

There are a few ways to get around this. One approach is to use noLoop() like @kll pointed out.

Another approach would be to generate your variables just once at the beginning, and then reusing them in your draw() function.

In other words, what you have is something like this:

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

void draw(){
background(32);

float x = random(0, width);
float y = random(0, height);
ellipse(x, y, 25, 25);
}

(Side note: in the future, please try to narrow your problem down to small example programs like this instead of posting your entire sketch.)

Instead, you want to do something like this:

float x;
float y;

void setup(){
size(500, 500);
x = random(0, width);
y = random(0, height);
}

void draw(){
background(32);
ellipse(x, y, 25, 25);
}

Or you could draw your scene to a PGraphics once, and then draw that PGraphics to the screen in your draw() function.

1 Like

All right, thank you. I will pay more attention to these rules next time !