Hi is it possible to create smooth animation in javascript using millis() as a timer?

edited September 5 in Library Questions

The function drawings attempts to draw a triangle strip that slowly moves down to create a rectangle.(which eventually i plan to make an alphabet)

But the problem is my delaying code in function drawings doesn't work properly.I checked the time the variables work fine but when i try to run output it waits for the entire function to execute(shows grayed out window)and doesnt delay for every triangle to go down as intended.My guess is the draw function doesnt wait for drawings function to run fully so it keeps resetting/calling new drawings function it.Any ideas how to fix this?

Btw i also tried skipping draw function but it gives null exception on background,stroke functions. (im new here sorry for formatting i tried everything:P)

import g4p_controls.*;
char[] arr;
char flag;
GTextField txf1;
GTextArea txa1, txa2;
int a, b, i, x, y, z, lt, tw=9000;
GTabManager tt;


public void setup() {
  size(800, 800);
  // G4P.setGlobalColorScheme(GCScheme._SCHEME);
  txf1 = new GTextField(this, 0, 0, 200, 20);
  txf1.tag = "txf1";
  txf1.setPromptText("write some shit");

  txf1.setFocus(true);
  // Create the tab manager and add these controls to it
  tt = new GTabManager();
  tt.addControls(txf1);

  String[] args = {"TwoFrameTest"};
  win2 sa = new win2();
  PApplet.runSketch(args, sa);
}

void draw() {
  // background(0);
  //ellipse(50, 50, 10, 10);
}     
public class win2 extends PApplet {

  public void settings() {
    size(1000, 700, P3D);
    int flag=0;
  }
  public void draw() {
    if (flag==1)
    {
      background(0);
      stroke(255, 255, 0);

      pushMatrix();
      translate(0, 700, 0);
      rotateX(PI);
      noFill();
      line(0, 0, 0, 700);
      line(0, 0, 1000, 0);
      line(0, 0, 1000, 700);

      drawings();
      popMatrix();
    }
  }
  public void drawings()
  {    


    a=100;
    b=600;
    i=0;
    println("fn"+millis());
    while (i<70)
    {
      lt=millis();
      if ((millis()-lt)<=tw)
      {
        //println(lt+" "+millis());

        i++;
        beginShape(TRIANGLES);
        vertex(0, 0);
        vertex(a, b+i);
        vertex(a+70, b+i);
        endShape();
      }
    }
    flag=1;
  }
  //popMatrix();
}

public void displayEvent(String name, GEvent event) {
  String extra = " event fired at " + millis() / 1000.0 + "s";
  println(extra);
  win2 s=new win2();
  arr =name.toCharArray();

  if (arr[0]=='a') {
    flag='a';
    s.draw();
  }
}

public void handleTextEvents(GEditableTextControl textControl, GEvent event) { 
  displayEvent(textControl.tag, event);
}
Sign In or Register to comment.