Draw images (not movie)

[Renaud]

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.

Thanks in advance for your time and help.

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;
  // Convert it to radians
  theta = radians(a);
  // 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();
  }
}

[kll]

@Renaud

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 ?

see

noLoop() / Reference

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
  theta = radians(a);                                       // Convert it to radians
  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:

[Kevin]

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.

[Renaud]

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