# Converting my Processing sketch to a Processing.js sketch

**URL:** <https://discourse.processing.org/t/converting-my-processing-sketch-to-a-processing-js-sketch/13227>\
**Category:** Coding Questions\
**Created:** [August 7, 2019, 3:16am UTC](https://discourse.processing.org/t/converting-my-processing-sketch-to-a-processing-js-sketch/13227 "2019-08-07T03:16:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![graysonh](https://avatars.discourse-cdn.com/v4/letter/g/a8b319/32.png) [@graysonh](https://discourse.processing.org/u/graysonh)\
**Post date:** [August 7, 2019, 3:16am UTC](https://discourse.processing.org/t/converting-my-processing-sketch-to-a-processing-js-sketch/13227/1 "2019-08-07T03:16:10Z")

</div>

Hi All,

I have recently created an interactive version of a Daily Minimal [graphic design](https://www.dailyminimal.com/post/186213182059/no-459-a-new-geometric-design-every-day) 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](https://www.openprocessing.org/sketch/742888).

Thank you in advance for your help!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 7, 2019, 5:58am UTC](https://discourse.processing.org/t/converting-my-processing-sketch-to-a-processing-js-sketch/13227/2 "2019-08-07T05:58:59Z")

</div>

> [@graysonh](#):
>
> I’m not familiar with the differences between Processing and processing.js and would appreciate some help getting my sketch running.

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/](http://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/](http://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`:

> **[undefined - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)**
>
> The undefined global property represents the primitive
> value undefined. It is one of JavaScript's
> primitive types.

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

> <https://github.com/processing-js/processing-js/pull/201>
>
> https://gist.github.com/GoToLoop/acbf106aa784820aff23
> https://github.com/process…ing/processing/blob/master/core/src/processing/core/PVector.java
> https://github.com/processing-js/processing-js/blob/master/src/Objects/PVector.js
> https://github.com/processing-js/processing-js/issues/200

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

* * *

```auto
  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), 
  };

```

* * *

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

```

* * *

```auto
    PVector newAcc = PVector.sub(posRest, posCurr);
    newAcc.mult(.05);

```

* * *

---

<div class="post-metadata">

**Author:** ![graysonh](https://avatars.discourse-cdn.com/v4/letter/g/a8b319/32.png) [@graysonh](https://discourse.processing.org/u/graysonh)\
**Post date:** [August 7, 2019, 1:17pm UTC](https://discourse.processing.org/t/converting-my-processing-sketch-to-a-processing-js-sketch/13227/3 "2019-08-07T13:17:11Z")

</div>

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