Hi!

I have tried processing.js for the first time (nice!!) and i'm finding a little performance problem.

I used the metaball demo effect to iluminate a background image, you can see it here,  www.fernandaramos.com. It was really nice and easy, besides the strange detail that I had to change tha values of the constants which determine the movement of the metaballs because their behaviour were very diferent when running in a browser than that in a processing sketch(maybe a different behaviour of the function noise()?).

The problem is that when I tried it in different smartphones (iphone 4 and htc desire s) I get frame rates lower than 1 fps. I tried lowering the resolution and getting rid of the metaball effect, using just rendered images of the metaballs. After several tests I came to the conclusion that image.blend() is to heavy for a mobile to handle (I'm trying it with a 300x300 image and a 50x50 PGraphics)

This is the original code, mobile browser would be redirected to the lighter version:

1. /**
    * Metaflies by Nacho Cossio and Fernanda Ramos
    * based on Metaball Demo Effect by luis2048, which uses Jim Blinn's technique
    * for rendering
    */
   /* @pjs preload="tatto600.jpg"; */
   PImage back;
   int numBlobs = 10;
   int[] blogPx = new int [numBlobs];
   int[] blogPy = new int [numBlobs];
   float scaleFactorX, scaleFactorY;
   PGraphics pg;
   PImage  aux;
   int[][] vy, vx; 
   float increment = 0.04;
   float[] seed = new float [numBlobs];
   void setup() {
     size(600, 600);
     //noCursor();
     noiseDetail(8,0.5);
     back = loadImage("tatto600.jpg");
     pg = createGraphics(100, 100, JAVA2D);
     aux = createImage(back.width, back.height, RGB);  
     vy = new int[numBlobs][pg.height];
     vx = new int[numBlobs][pg.width];
     for (int i=0; i<numBlobs;i++)
     {
       seed[i] = random(0, 1000);
     }
     scaleFactorX= width/pg.width;
     scaleFactorY= height/pg.height;
   }
   void draw() {
     frameRate(20);
     //background(0);
     for (int i=0; i<numBlobs; ++i) {
       float incX = (4*(mouseX/scaleFactorX - blogPx[i])/pg.width) + (noise(seed[i],0)-0.5)*44;
       float incY = (4*(mouseY/scaleFactorY - blogPy[i])/pg.height) + (noise(0,seed[i])-0.5)*44;
       blogPx[i] += incX;
       blogPy[i] += incY;
       seed[i]+=increment;
   for (int x = 0; x < pg.width; x++) {
         vx[i][x] = int(sq(blogPx[i]-x));
       }
       for (int y = 0; y < pg.height; y++) {
         vy[i][y] = int(sq(blogPy[i]-y));
       }
     }
     pg.beginDraw();
     pg.background(0, 0, 0);
     pg.loadPixels();
     for (int y = 0; y < pg.height; y++) {
       for (int x = 0; x < pg.width; x++) {
         int m = 1;
         for (int i = 0; i < numBlobs; i++) {
           // Increase this number to make your blobs bigger
           m += 1200/(vy[i][y] + vx[i][x]+1);
         }
         pg.pixels[x+y*pg.width] = color(m, m, 0.68*(m));
       }
     }
     pg.updatePixels();
     pg.endDraw();
     aux = back.get();
     aux.blend(pg, 0, 0, pg.width, pg.height, 0, 0, aux.width, aux.height, HARD_LIGHT);
     image(aux, 0, 0, width, height);
   }

Is this correct? Is there any workaround to get something similar to what blend() does in this particular case?

Thanks a lot!