Converting my Processing sketch to a Processing.js sketch

Processing Coding Questions
1

Hi All,

I have recently created an interactive version of a Daily Minimal graphic design and I really like the way it performs in Processing. I have been trying to put the sketch on OpenProcessing by using processing.js, but I’m having a lot of trouble debugging/modifying my code so it will work in OpenProcessing.

I’m not familiar with the differences between Processing and processing.js and would appreciate some help getting my sketch running.

My OpenProcessing sketch can be found here.

Thank you in advance for your help!

1 Like
2

Pjs is pretty much Processing v1.5.1 w/ some few bits from Processing 2.x.x.

Once upon a time, most non-static methods from class PVector, like add(), mult(), etc., were all void:
ProcessingJS.org/reference/void/

1 day, the devs had the idea to make all those void methods to return this instead; thus turning them all chainable:
ProcessingJS.org/reference/this/

In your sketch you’ve got some statements like:

  • new Bobble(new PVector(-halfSide, -halfSide).add(center), ballS, ballC),
  • this.vel.add(this.acc).mult(this.damp);
  • PVector newAcc = PVector.sub(this.posRest, this.posCurr).mult(k);

Those work under Java Mode b/c .add(center), .add(this.acc) & .mult(k) return the PVector current object which had invoked them.

However, due to the fact Pjs hadn’t implemented those neat feature changes, all of those method calls above simply return undefined:

BtW, I made a pull request on Pjs’ repo 4 years ago for it; but unfortunately it’s got rejected:

As a workaround, those affected statements can be rewritten like this:

  PVector shiCen = PVector.add(shift, center);

  bobbles = new Bobble[] {
    new Bobble(PVector.add(new PVector(-halfSide, -halfSide), center), ballS, ballC), 
    new Bobble(PVector.add(new PVector(halfSide, -halfSide), center), ballS, ballC), 
    new Bobble(PVector.add(new PVector(halfSide, halfSide), center), ballS, ballC), 
    new Bobble(PVector.add(new PVector(-halfSide, halfSide), center), ballS, ballC), 
    new Bobble(PVector.add(new PVector(-halfSide, -halfSide), shiCen), ballS, ballC), 
    new Bobble(PVector.add(new PVector(halfSide, -halfSide), shiCen), ballS, ballC), 
    new Bobble(PVector.add(new PVector(halfSide, halfSide), shiCen), ballS, ballC), 
    new Bobble(PVector.add(new PVector(-halfSide, halfSide), shiCen), ballS, ballC), 
  };

        vel.add(acc);
        vel.mult(damp);

    PVector newAcc = PVector.sub(posRest, posCurr);
    newAcc.mult(.05);
2 Likes
3

Thank you! I was able to get it working with your help.