PROCESSING.JS

Experience The Difference

While building a game with Processing.js I noticed some rather interesting differences in the way FireFox and Chrome render graphics to the Canvas object. If you open this page in FireFox and Chrome you will see that FireFox runs considerably faster. However: when you uncheck the "Do For Loop" you will see that Chrome runs faster than FireFox.

// Chrome vs. FireFox - DropFrames?
// By F1LT3R - http://groups.google.com/group/processingjs

void setup(){
  size(320, 240);            
  strokeWeight(12);    
}

int i=0, t=0;
int flipSwitch = 0;
int forLoop;
int choke;

void draw(){
    t++;
    
    forLoop = window.Processing.data.forLoop;
    choke = window.Processing.data.choke;
     
    switch(flipSwitch){
    case 0: // Draw Green Box                        
      drawBox();            
      if (forLoop){ doForLoop() }
      flipSwitch=1;      
      break;
    case 1: // Draw Red Box
      drawBox();            
      if (forLoop){ doForLoop() } 
      flipSwitch=0;
      break;
    }
}

void drawBox(){
    background(100, 100, 100, 255);
    pushMatrix();                       
      translate(width/2, height/2);    
      rotate(radians(t));
      switch(flipSwitch){
      case 0:fill(0,255,0); break;
      case 1:fill(255,0,0); break;
      }
      rect(-40,-40,80,80);
    popMatrix();  
}

void doForLoop(){
    for (i=0; i < choke; i++){;}
}

It appears that Chrome is extremely slow at for loops. But when we take the for loops out of the equasion, we can see that Chrome is actually considerably faster at drawing to the canvas. But wait...

If you watch this demonstration in Chrome with a decent choke value, you will occasionally see the boxes rotate without changing color. (I am running Vista32 on Intel Q9300). If you look at the code, you will see that the color should be different for every draw() frame. Therefore Chrome appears to be dropping frames.

Personally I think DropFrames is a nice approach to any video display and certainly one that already exists real-time lossless video technology. I could also see how this might cause un-desired effects in some applications. So it would be nice if the Canvas object itself had a method to enable or disable drop frames.