Creating a loading animation

Processing Coding Questions
1

I need help to make a loading bar…When i click the mouse over the button the message come with 100% and filled bar…How can I make it charge a percent after X seconds?

And how I can go back to the buttons screens after the loading message and bar?

Thanks in advance guys!

void mouseClicked(){
 if mouseX>340 && mouseX <390 && mouseY > 45 && mouseY < 95){

for (int i=0; i < 101; i = i+1){

background(0);
textSize(30);
text("washing" + i + "%", 480/4,320/2.5);
rect(480/4,320/2,i*2,20,7);
}
}
2

An for-loop is not visible as an animation.

Instead get rid of the for loop and use the fact that draw loops automatically

Increase i here

Don’t use it in mouseclicked, use it in draw()

3

Here is a simple program I made. Try it!

Try adapting it to your own code

It is blured if you don’t want to see it.

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

void draw() {
  background(0);
  fill(255);
  int a = 0;
  for(a = 0; a < frameCount && a < 100; a++) {
    ellipse(10 + a * 5, 30, 3, 3);
  }
  text("loading: " + a,300,50);
}

edit it is a program meant for only that purpose. If you want it to work on command you should change a few things

4

Thanks for your reply! When I tried to use in draw, I used mousePressed, because I need to show the loading after a buton is pressed… but the animation only works when holding…

When I try to put that part inside draw:

background(0);
textSize(30);
text("washing" + i + "%", 480/4,320/2.5);
rect(480/4,320/2,i*2,20,7);

It shows up the loading animation more than 100% (1 by 1) because I set no limit, but when I try to put a while, to limit by 100% or a if to detect the button press, the full bar and 100% message show on the screen not loading 1 by 1…

5

I’ll try man! thanks! Any chance you can help me to trigger clicking a button? I’m having trouble with the conditons.

6 
void mousePressed() {
   if(dist( mouseX, mouseY, buttonX, buttonY) < buttonSize/2) {
      callFunction(<parameters>)
   }
}

rectMode(CORNER)

void mousePressed() {
   if(  mouseX > bx && mouseX < bx + bw && mouseY > by && mouseY < by + h   ) {
      callFunction(<parameters>)
   }
}
7

I did it by putting a if inside draw, and a mouseclicked that set a value to enter the if inside the draw! when i reach 100% the value come back to 0 and the if stop working! Thanks!

8

thanks man, I’ll study your code! thanks again for the suport!

9

No problem : P, happy to help