I made something with Processing a long time ago…

http://www.typovar.nl/applet/

I tried to run the original sketch in Javascript-mode and nothing really happend.
I tried to find out why the animation doesn't show, but I'm stuck.

Can someone please help me find the reason why this applet will not work in *.js?
I don't use libraries or anything…

Thanks in advance.
Arjen

1. // pt3
   int cnt;
   float step = 0.03; // Size of each step along the path
   float pct = 0.0; // Percentage traveled (0.0 to 1.0)
   float[] gDist = { 0,0,0,0,0,0,0,0,0,0,0,0,0,0};
   float[] gBegin = { 20,20,30,20,80,60,40,110,10,60,50,20,60,20};
   float[] gCur = { 20,20,30,20,80,60,40,110,10,60,50,20,60,20};
   float[] gEnd = { 20,20,30,20,80,60,40,110,10,60,50,20,60,20};
   PFont font;
   char[] geTikt = new char[0];
   
   void setup() {
   
   size(400, 400);
   
   smooth();
   
   for (cnt=0;cnt<14;cnt++){gDist[cnt] = gEnd[cnt] - gBegin[cnt];}
   
   fill(255);
   
   textMode(SCREEN); //this does NOT work in P55 2.x anymore… ok! I know.
   
   font = loadFont("AgencyFB-Bold-48.vlw");
   
   textFont(font,48 );
   
   textAlign(CENTER);
   
   text("Type and press Enter", width/2,height-100); }
   
   void draw(){
   
   noStroke();
   
   fill(0,9);
   
   rect(0,0,width,height);
   noFill();
   pct += step;
   if (pct < 1.0) { for (cnt=0;cnt<14;cnt++){ gCur[cnt] = gBegin[cnt] + (pct * gDist[cnt]); } }
   stroke(250,30);
   strokeWeight(8); strokeJoin(ROUND);
   pushMatrix();
   translate (150,120);
   beginShape();
   vertex(gCur[0], gCur[1]);
   bezierVertex(gCur[2], gCur[3], gCur[4], gCur[5], gCur[6], gCur[7]);
   bezierVertex(gCur[8], gCur[9], gCur[10], gCur[11], gCur[12], gCur[13]);
   endShape();
   popMatrix(); }
   
   void keyReleased() {
   
2. geTikt = append(geTikt, key);
   println(geTikt);
   String txtOut = new String(geTikt);
   pct = 0.0;
   for (cnt=0;cnt<14;cnt++){ gBegin[cnt] = gCur[cnt];
   }
   if (keyCode == ENTER || keyCode == RETURN) {
   fill(255);
   textMode(SCREEN);
   font = loadFont("AgencyFB-Bold-48.vlw");
   textFont(font,48 );
   textAlign(CENTER);
   text(txtOut, width/2,height/4);
   geTikt = new char[0];
   }
   
   if (key >= ' ' && key <= '~') { if(key == 'a'){
   float[] a = { 80,50,-50,50,30,290,80,50,80,150,80,150,100,150 };
   arraycopy(a, gEnd);
   }
   else if (key == 'b'){
   float[] b = { 10,150,140,150,60,-90,10,150,10,10,10,50,10,10 };
   arraycopy(b,gEnd);
   }
   else if (key == 'c'){ float[] c = { 80,40,30,30,20,50,20,90,20,130,40,160,90,130 };
   arraycopy(c,gEnd); }
   // cut the other glyphs out for readability… } for (cnt=0;cnt<14;cnt++){
   gDist[cnt] = gEnd[cnt] - gBegin[cnt];
   }
   redraw();
   }