Processing.js A method of reduce processing demand/performance within browsers?

bepa

I'm attempting to run a processing sketch with processing.js in an html5 canvas tag. all works fine and looks how i intend it but it is quite demanding of computer performance / processing power.

I'm keen to know if there is a method of flattening or making this lighter so as to not be so intensive on smartphones or lower spec devices than say a macbook pro!

any help or advice much appreciated. code below:

int nNodes = 600;
PVector[] pos = new PVector[nNodes];
PVector[] vel = new PVector[nNodes];

void setup() {
  size(window.canvasWidth, window.canvasHeight, P2D);
  colorMode(RGB, 255);
  background(250, 250, 250);
  frameRate(30);
  strokeWeight(1);
  for (int i = 0; i < nNodes; i++) {
    pos[i] = new PVector();
    vel[i] = new PVector();
    pos[i].x = random(-width/4, width/4);
    pos[i].y = random(-height/4, height/4);
  }
}

void draw() {
    translate(width/2, height/2);
  background(250);
  for (int i = 0; i < nNodes; i++) {
    PVector cPos = pos[i];
    fill(0,0,0,40)
    stroke(0,0,0,0);
    ellipse(cPos.x, cPos.y, 3, 3);
    if (i == 0) continue;
    PVector pPos = pos[i - 1];
    stroke(0,0,0,40);
    line(pPos.x, pPos.y, cPos.x, cPos.y);

    // run simulation
    PVector force = cPos.get();
    force.sub(pPos);

    //force.setMag(force.mag() - noise(i) * width);
    float mag = max(force.mag(), 0.001);
    force.mult(1 - (noise(i) * width * 0.5) / mag);

    force.mult(0.05);
    force.mult(-0.5);
    vel[i].add(force);
    force.mult(-1);
    vel[i-1].add(force);

    vel[i].mult(0.97);
    vel[i].x += random(-0.1, 0.1);
    vel[i].y += random(-0.1, 0.1);

    if (cPos.mag() > width*0.3) {
        PVector toCenter = cPos.get();
        toCenter.mult(-0.01);
        vel[i].add(toCenter);
    }

    cPos.add(vel[i]);
  }
}

Winchestro

maybe some of these techniques help you www.html5rocks.com/en/tutorials/canvas/performance/

one little optimization could be to reorder your draw order to minimize changes in style. if you find useful techniques, please let me know. I just barely scratched the surface of the topic myself.

mbraendle

There is not much to optimize here, because the code is linear.

Line 40 and 41 can be calculated into one mult operation.

Line 38 and 50: The multiplications with width can be done outside the for-loop and even outside draw. They can be done once and stored in variables. So you save about 2*nNodes multiplications.

Then I'm asking myself why you are adding twice a random part to the velocity (line 38 and lines 47/48).

Comment on style of programming: Of course this is very individual. I would have moved all the fixed float values outside the loop and initialized those in variables at the beginning of the sketch, which allows to parametrize the sketch in one place. Also, I think use of "continue" is BASIC language style, I rather prefer bracketed blocks for better readability.

While you use cPos as a reference to pos[i], you don't so analogously for vel[i]. Or the other way round: You could use pos[i] everywhere instead of cPos, which would make the code more understandable and make clear that value of pos[i] is updated at line 56.