# Draw images (not movie)

**URL:** <https://discourse.processing.org/t/draw-images-not-movie/7740>\
**Category:** Coding Questions\
**Created:** [January 22, 2019, 2:56pm UTC](https://discourse.processing.org/t/draw-images-not-movie/7740 "2019-01-22T14:56:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Renaud](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@Renaud](https://discourse.processing.org/u/Renaud)\
**Post date:** [January 22, 2019, 2:56pm UTC](https://discourse.processing.org/t/draw-images-not-movie/7740/1 "2019-01-22T14:56:13Z")

</div>

Hi everyone,

Very easy question I guess…

I am new to Processing and am trying the example codes proposed on [Processing.org](http://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

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

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 22, 2019, 3:27pm UTC](https://discourse.processing.org/t/draw-images-not-movie/7740/2 "2019-01-22T15:27:10Z")

</div>

> [@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](https://processing.org/reference/noLoop_.html)**
>
> Stops Processing from continuously executing the code within draw(). If loop() is called, the code in draw() begin to run continuously again. If using noLoop() in setup(…

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

```auto
</>

```

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…

```auto
// 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:  
 ![2019-01-23_11-03-52_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3ac9b92ef5e11497c39678f8f9ccaaf7177debc4.png)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 23, 2019, 6:29pm UTC](https://discourse.processing.org/t/draw-images-not-movie/7740/3 "2019-01-23T18:29:25Z")

</div>

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:

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Renaud](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@Renaud](https://discourse.processing.org/u/Renaud)\
**Post date:** [January 24, 2019, 8:49am UTC](https://discourse.processing.org/t/draw-images-not-movie/7740/4 "2019-01-24T08:49:23Z")

</div>

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