# How do you make a function run the same way as draw()?

**URL:** <https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373>\
**Category:** Beginners\
**Created:** [November 10, 2019, 10:32am UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373 "2019-11-10T10:32:00Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![24stevek](https://avatars.discourse-cdn.com/v4/letter/2/edb3f5/32.png) [@24stevek](https://discourse.processing.org/u/24stevek)\
**Post date:** [November 10, 2019, 10:32am UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/1 "2019-11-10T10:32:00Z")

</div>

Hi, guys, I’m a Korean student who just started learning processing. My English might be awkward but please don’t be mad at it.

So, I am making this project that shows the moving of electrons. I made an animation of an ebonite rod being rubbed against a piece of fur inside “draw()”, but I need it to give a zooming effect and make another animation of electrons moving. When the rod is rubbed three times, I used noLoop() to stop the draw() and used while() to repeat another function. However, the second function inside while() doesn’t work well.

**Is there a way to make a function run the same way as draw()?**

Plz, help me:)

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 10, 2019, 10:40am UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/2 "2019-11-10T10:40:34Z")

</div>

You should not try to make a new function work like draw(). Instead, you should use draw() like normal, but do a different thing inside it depending on if you are animating the first thing or doing the second thing.

This means that you will need to remember (or otherwise determine) which thing you are doing. This is the concept of having different states for your program.

Do this:

```auto
int state = 0;

void setup(){
  size(...);
  state = 0;
}

void draw(){
  if( state == 0 ){
    // Draw animation.
    if( animation_is_done ){
      state = 1;
    }
  } else if( state == 1 ){
    // Do next thing.
  }
}

```

This draw() function will do the first thing while state is 0, and when the animation is done, it will switch to doing the next thing.

---

<div class="post-metadata">

**Author:** ![24stevek](https://avatars.discourse-cdn.com/v4/letter/2/edb3f5/32.png) [@24stevek](https://discourse.processing.org/u/24stevek)\
**Post date:** [November 10, 2019, 10:41am UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/3 "2019-11-10T10:41:53Z")

</div>

WOW I didn’t even think of that! Real thanks for that I’ll try immediately!!🙂

---

<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:** [November 10, 2019, 11:00am UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/4 "2019-11-10T11:00:40Z")

</div>

yes, similar idea as @TfGuy44  
just too slow as

> **example template**
>
> ```auto
> /*
> EASY START TEMPLATE for (3) STATES / SCREENS / LESSONS
> */
> 
> String my_Title = " My Sketch "; //___ canvas window title
> int my_w = 500, my_h = 300; // _____ my canvas window width height
> float r_set=120, r_act; // ___________ frameRate default 60
> boolean diag = true;//false; // ________ set diag
> 
> int screen = 0; // _____________________ now 0 = start with screen 0 .. 
> 
> void settings() { // ___________________ INIT CANVAS SETUP and select RENDERER
> size(my_w, my_h); // _________________ default JAVA2D 
> //size(my_w, my_h, FX2D); // __________ fast ( but not on all systems available )
> //size(my_w, my_h, P2D); // ___________ 2D graphics
> //size(my_w, my_h, P3D); // ___________ 3D graphics
> }
> 
> void setup() { // ______________________ INIT SKETCH SETUP
> frameRate(r_set);
> info();
> }
> 
> void draw() { // _______________________ DRAW LOOP
> header();
> if ( screen == 0 ) page_0();
> else if ( screen == 1 ) page_1();
> else if ( screen == 2 ) page_2();
> }
> 
> void keyPressed() { // _________________ OPERATION KEYBOARD
> if ( keyCode == RIGHT || keyCode == LEFT ) {
> if ( keyCode == RIGHT ) screen++; 
> if ( keyCode == LEFT ) screen--;
> screen = constrain(screen, 0, 8);
> if ( diag ) println("screen: "+screen);
> }
> 
> if ( key == 'd' ) {
> diag = ! diag;
> println("[d] diag toggle "+diag);
> }
> 
> if ( diag ) println("key "+key+" keyCode "+keyCode);
> }
> 
> void mousePressed() { // _______________ OPERATION MOUSE CLICK
> if ( diag ) println("click");
> }
> 
> void mouseWheel(MouseEvent event) { //_ OPERATION MOUSE WHEEL
> float e = event.getCount(); 
> if ( diag ) println(e);
> }
> 
> void info() { // _______________________ OPERATION INFO on CONSOLE by SETUP 
> println("key [d] toggle diag\n arrow LEFT / RIGHT for page");
> }
> 
> void header() { // _____________________ WINDOW HEADER 
> r_act = frameRate;
> if ( diag ) surface.setTitle( my_Title+ nf(r_act, 0, 1)+" FPS" ); 
> else surface.setTitle("<|== "+my_Title+" "+screen+" ==|>");
> }
> 
> void page_0() { // _____________________ SCREEN CONTENT
> background(200, 200, 200);
> textSize(20);
> fill(0);
> text("PAGE_0", 10, 20);
> }
> 
> void page_1() { // _____________________ SCREEN CONTENT
> background(200, 200, 0);
> textSize(20);
> fill(0);
> text("PAGE_1", 10, 20);
> }
> 
> void page_2() { // _____________________ SCREEN CONTENT
> background(0, 200, 200);
> textSize(20);
> fill(0);
> text("PAGE_2", 10, 20);
> }
> 
> /* template info:
> 
> original at file: .. /templates/JAVA/sketch.pde like under YOUR sketchbook path ( windows ) example:
> c:/Users/ < USER > /Documents/Processing/templates/JAVA/sketch.pde
>  
> also other pde ( or java files ) have to be there to be used at every 
> ++ PDE start
> ++ / File / New /
>  
> */
> 
> ```

little bit longer

* * *

by the way, Processing IDE comes up with a empty page

why?  
because the template is empty, but PDE has a template system!

so if you like to have your 5 line / 20 line / 100 line default sketch content  
each time you start a sketch  
you can save it ( like this above )

```auto
/* template info:
 original at file: .. /templates/JAVA/sketch.pde like under YOUR sketchbook path ( windows ) example:
 c:/Users/ < USER > /Documents/Processing/templates/JAVA/sketch.pde
 
 also other pde ( or java files ) have to be there to be used at every 
 ++ PDE start
 ++ / File / New /
 
 */

```

---

<div class="post-metadata">

**Author:** ![24stevek](https://avatars.discourse-cdn.com/v4/letter/2/edb3f5/32.png) [@24stevek](https://discourse.processing.org/u/24stevek)\
**Post date:** [November 10, 2019, 11:24am UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/5 "2019-11-10T11:24:23Z")

</div>

Thanks for that:) That must have took you some time!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2019, 12:16pm UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/6 "2019-11-10T12:16:25Z")

</div>

Nice template.

tbh, I didn’t get how I can make a template in the IDE. I save it in which folder? How?

---

<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:** [November 10, 2019, 12:21pm UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/7 "2019-11-10T12:21:34Z")

</div>

> [@kll](#):
>
> Processing/templates/JAVA/sketch.pde

if /Processing/ is your sketchbook dir there have sub-dirs like  
/libraries  
/tools  
/modes  
/examples  
/templates

so /templates dir exists but is empty

if use JAVA make inside sub-dir  
/Java/  
and there in store your template file as

> sketch.pde

for (edit) copy and save can NOT use the PDE, use your OS tools.

> **[Templates](https://github.com/processing/processing/wiki/Templates)**
>
> Source code for the Processing Core and Development Environment (PDE) - processing/processing

* * *

while windows also takes the /JAVA/  
linux is not so forgiving, dir name must be /Java/

 ![processing_template](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a18e76107dbb3490f16bb862f271bd5700dacbb3.jpeg)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2019, 12:36pm UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/8 "2019-11-10T12:36:25Z")

</div>

Thank you.

One remark for your template above:

To complete the approach with states you would also use state in keyPressed and in mousePressed. That means you can distinguish the different input situations per state. Eg in a splash screen the mouse does different things than in game state.

---

<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:** [November 10, 2019, 12:38pm UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/9 "2019-11-10T12:38:20Z")

</div>

or use the class template i asked you to check on  
[http://kll.engineering-news.org/kllfusion01/downloads/tut\_class.pde.txt](http://kll.engineering-news.org/kllfusion01/downloads/tut_class.pde.txt)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 10, 2019, 6:27pm UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/10 "2019-11-10T18:27:11Z")

</div>

Hello,

Something like the transitions in this?  
[https://www.youtube.com/watch?v=BZNEagMBy60](https://www.youtube.com/watch?v=BZNEagMBy60) (this is my work)

I posted a simple example of this in the Gallery that uses frameCount:

> [@Animation that transitions using frameCount](https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378):
>
> A very simple example that transitions through scenes over time: // Author: GLV // Date: 2019-11-10 // Description: // Animate over time using frameCount // A very simple example that: // Uses frameCount to keep track of time // Fades in and out by modifying alpha component of HSB color // Cycles through HSB colors int scene = 0; int sec = 60; float alpha = 0; void setup() { size(500, 500); textSize(36); textAlign(CENTER, CENTER); colorMode(HSB, 360, 100, 100, 100); } void draw()…

References:

> **[frameCount / Reference](https://processing.org/reference/framecount)**
>
> The system variable frameCount contains the number o frames displayed since the program started. Inside setup() the value is 0 and during the first iteration of draw it is 1, etc.

> **[switch / Reference](https://processing.org/reference/switch.html)**
>
> Works like an if else structure, but switch is more convenient when you need to select between three or more alternatives. Program controls jumps to the case with the same value as the e…

> **[case / Reference](https://processing.org/reference/case.html)**
>
> Denotes the different names to be evaluated with the parameter in the switch structure.

> **[colorMode() / Reference](https://processing.org/reference/colormode_)**
>
> Changes the way Processing interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using t…

My example on YouTube is much more complex code and I have a framework I wrote for my personal use. I use millis() and not frameCount.

I use frameCount for quick examples; the sketch in gallery took less than an hour.

This is also available to you:

> **[millis() / Reference](https://processing.org/reference/millis_.html)**
>
> Returns the number of milliseconds (thousandths of a second) since starting the sketch. This information is often used for timing animation sequences.

I look forward to seeing some pictures of your final project!

🙂

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 11, 2019, 1:01am UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/11 "2019-11-11T01:01:52Z")

</div>

> [@glv](#):
>
> this is my work

Nice chanel; you won a subscriber.

---

<div class="post-metadata">

**Author:** ![24stevek](https://avatars.discourse-cdn.com/v4/letter/2/edb3f5/32.png) [@24stevek](https://discourse.processing.org/u/24stevek)\
**Post date:** [November 13, 2019, 11:22am UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/12 "2019-11-13T11:22:43Z")

</div>

Wow! Your video on YouTube is really cool:)  
I thought the project I was amking was quite good; until I saw yours…  
I envy your skills!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 13, 2019, 12:39pm UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/13 "2019-11-13T12:39:01Z")

</div>

> [@24stevek](#):
>
> I thought the project I was amking was quite good; until I saw yours…  
> I envy your skills!

Skills were hard-earned over a lifetime and a lot of hard work and perseverance with Processing. And spare time on my hands…

I already had a background in C so learning Java was not that difficult.  
It was a bit of work getting to know the elements specific to Processing:

> **[Reference](https://processing.org/reference/)**
>
> Find further documentation of the Processing language

My first pass at this was very similar to the simple code I posted except I had more worthy examples (function\method) for each period of time. I started with just shapes that were available in Processing and later rotating them.

My early projects were much simpler. I got more creative later fading things in and out and rotating over time.

The example code I posted took me less than an hour; it took **significantly longer** (days and weeks) when I was new to Processing! You will get there…

The orbits in the video were just plotting a circle with points and making a sphere move around it; I made one and was able to reuse it.

Enjoy the journey and be proud of the work you do!

glv

---

<div class="post-metadata">

**Author:** ![24stevek](https://avatars.discourse-cdn.com/v4/letter/2/edb3f5/32.png) [@24stevek](https://discourse.processing.org/u/24stevek)\
**Post date:** [November 13, 2019, 12:42pm UTC](https://discourse.processing.org/t/how-do-you-make-a-function-run-the-same-way-as-draw/15373/14 "2019-11-13T12:42:44Z")

</div>

Wow… some heavy stuff oover there…  
Thank you for that, Your words gave me some confidence:)