Yet another Processing.js question

seanjustice

If anyone has a good but not overwhelmingly complex resource for understanding the translation from Processing java to Processing.js (generally speaking), it would be appreciated.

Yet another non-working .js iteration. The pde runs great all the way through (approx 18 min to resolve). But after conversion to js and uploaded to my server, both Firefox and Chrome throw javascript errors at about 5 mins.

I can find the lines where the errors occur and while both browsers seem to choke on an rgb conversion, they're not the same error.

As you can see in my code I'm iterating color from HSB mode using ad hoc variables based on frameCount. Could that be the problem? Perhaps js doesn't like the HSB conversions? If so, workarounds?

I realize the code is not pretty -- I'm just getting started with these types of sketches.

Here's the code:

float x1,x2,x3,x4,y1,y2,y3,y4, v3;

void setup(){
  size(1200, 700);
  colorMode(HSB, 360, 100, 100);
  background(180, 20, 99);
}

void draw(){ 
  x1 = width/2;
  x2 = map(noise(.001*frameCount), 0,1, 0, width/6);
  x3 = map(noise(.01*frameCount), 0,1, width/2, width/3);
  x4 = width/2;

  y1 = 0;
  y2 = map(noise(.01*frameCount), 0,1, height/5, height/2);
  y3 = map(noise(.001*frameCount), 0,1, height/2, height*.85);
  y4 = height;

  v3 = 100-(.003*frameCount);

if (v3 > 0) {
  fill(180, 40, v3);}
  else if (v3 > -100){
  fill(180, 40, -v3);}
  else{
    noLoop();
  }

noStroke();
rect(0,0,width,height);
noFill();

stroke(195-(.01*frameCount), 24, 50-v3);

strokeWeight (1);
bezier (x1, 0, x2, y2, x3+(.01*frameCount), y3, x4, height); //1

stroke(195-(.005*frameCount), 24, 50);

strokeWeight (.4);
bezier (x1, 0, x2+10+(.001*frameCount), y2, x3-50, y3+(.025*frameCount), x4, height); //2

stroke(195+(.01*frameCount), 24, 50+(.0005*frameCount));

strokeWeight (.4);
bezier (x1, 0, x2/2+(.002*frameCount), y2/2+(.08*frameCount), x2+500, y2, x4, height); //3

strokeWeight (1.1);
bezier (x1, 0, x2+(.008*frameCount), y2, x3/4, y3/4, x4, height); //4

stroke(195+(.01*frameCount), 24, 50+(.005*frameCount));

strokeWeight(.9);
bezier (x1, 0, width-x2, y2+(.007*frameCount), x3-(.005*frameCount), y3*.9-(.01*frameCount), x4, height); //5
}

In case it might help, here are screen shots of the consoles from Chrome

and Firefox:

Thanks for any suggestions.

GoToLoop

Dunno what it is. Perhaps once frameCount gets too big, some maths got outta proportion? :-/
Anyways, I've tweaked your code to do slightly less maths and placed a limit to frameCount as local variable fc:

http://studio.processingtogether.com/sp/pad/export/ro.981lbSfJSyiPY/latest

/**
 * Perturbed Bezier Lines (v2.03)
 * by  SeanJustice (2014/Mar)
 * mod GoToLoop
 *
 * forum.processing.org/two/discussion/3456/yet-another-processing-js-question
 *
 * studio.processingtogether.com/sp/pad/export/ro.981lbSfJSyiPY/latest
 */

static final int MAX_COUNT = 1<<14;
int w, cx, h, cy, x1, x4;

void setup() {
  size(1000, 700, JAVA2D);
  frameRate(60);
  smooth(4);
  colorMode(HSB, 360, 100, 100);
  noFill();

  w = width;
  h = height;
  cx = x1 = x4 = w>>1;
  cy = h>>1;
}

void draw() {
  final int fc = frameCount % MAX_COUNT;

  if (!online)  frame.setTitle("frameCount: " + frameCount
    + "\t\tfc: " + fc + "\t\tLimit: " + MAX_COUNT);

  final float disturb1 = noise(.001*fc);
  final float disturb2 = noise(.01*fc);

  final float x2 = cx/3 * disturb1;
  //final float x2 = map(disturb1, 0, 1, 0, cx/3);
  final float x3 = map(disturb2, 0, 1, cx, w/3);

  final float y2 = map(disturb2, 0, 1, h/5, cy);
  final float y3 = map(disturb1, 0, 1, cy, h*.85);

  final float v3 = 100.0 - .003*fc;

  background(180, 40, v3 > 0.0? v3 : -v3);

  stroke(195.0 - .01*fc, 24, 50.0 - v3);
  strokeWeight(1);
  bezier(x1, 0, x2, y2, x3 + .01*fc, y3, x4, h); //1

  stroke(195.0 - .005*fc, 24, 50);
  strokeWeight(.4);
  bezier(x1, 0, x2 + 10.0 + .001*fc, y2, x3 - 50.0, y3 + .025*fc, x4, h); //2

  stroke(195.0 + .01*fc, 24, 50.0 + .0005*fc);
  strokeWeight(.4);
  bezier(x1, 0, x2/2 + .002*fc, y2/2.0 + .08*fc, x2 + 500.0, y2, x4, h); //3

  strokeWeight(1.1);
  bezier(x1, 0, x2 + .008*fc, y2, x3/4.0, y3/4.0, x4, h); //4

  stroke(195.0 + .01*fc, 24, 50.0 + .005*fc);
  strokeWeight(.9);
  bezier(x1, 0, w - x2, y2 + .007*fc, x3 - .005*fc, .9*y3 - .01*fc, x4, h); //5
}

seanjustice

Thanks for this! I'm intrigued but lost a bit on how these changes work, but I've learned a lot by studying the suggestions. The sketch doesn't freeze, that's true, but the fc limit also prevents it from cycling around the entire transformation effect. That is, the evolution of the forms never completes because fc resets the image to its initial conditions. So, that seems too extreme. However perhaps the other streamlining of the variables is enough to make it work? I'll continue to tweak. Thanks for this help.