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

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:)

3 Likes

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:

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.

4 Likes

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

yes, similar idea as @TfGuy44
just too slow as

example template
/*
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 )

/* 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 /
 
 */
3 Likes

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

1 Like

Nice template.

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

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.


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

2 Likes

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.

1 Like

or use the class template i asked you to check on
http://kll.engineering-news.org/kllfusion01/downloads/tut_class.pde.txt

1 Like

Hello,

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

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

References:
https://processing.org/reference/frameCount.html
https://processing.org/reference/switch.html
https://processing.org/reference/case.html
https://processing.org/reference/colorMode_.html

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:
https://processing.org/reference/millis_.html

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

:slight_smile:

5 Likes

Nice chanel; you won a subscriber.

2 Likes

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!

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:
https://processing.org/reference/

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

2 Likes

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

1 Like