# Converting my Processing code to p5.js (ArrayList + others!)

**URL:** <https://discourse.processing.org/t/converting-my-processing-code-to-p5-js-arraylist-others/14936>\
**Category:** Coding Questions\
**Created:** [October 24, 2019, 9:46pm UTC](https://discourse.processing.org/t/converting-my-processing-code-to-p5-js-arraylist-others/14936 "2019-10-24T21:46:05Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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:** [October 26, 2019, 2:31am UTC](https://discourse.processing.org/t/converting-my-processing-code-to-p5-js-arraylist-others/14936/3 "2019-10-26T02:31:18Z")

</div>

> [@Rod1C](#):
>
> ```auto
> class ParticleSystem {
> ArrayList<Particle> particles;
> PVector origin;
>  
> ParticleSystem(PVector position) {
> origin = position.copy();
> particles = new ArrayList<Particle>();
> }
>  
> function addParticle() {
> particles.add(new Particle(origin));
> }
> 
> // ...
> }
> 
> ```

That’s not how we define classes’ constructor, methods & fields under JS syntax!  
You should read the JS reference for it:

> **[Classes - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)**
>
> Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics that are unique to classes.

Also, there’s no ArrayList either. We use JS arrays instead:

> **[Indexed collections - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object)**
>
> This chapter introduces collections of data which are ordered by an index value. This includes arrays and array-like constructs such as Array objects and TypedArray objects.

And while in Java we can generally omit the keyword `this` before accessing a class member, in JS it’s mandatory:

[![](https://img.youtube.com/vi/M5d7vygUPoQ/maxresdefault.jpg "This Dot - Daniel Shiffman (Coding Train)") ](https://www.youtube.com/watch?v=M5d7vygUPoQ)

Now w/ all the info above, here’s a partial but proper JS conversion of your `class` ParticleSystem:

```auto
class ParticleSystem {
  constructor(position) {
    this.origin = position.copy();
    this.particles = [];
  }
 
  addParticle() {
    this.particles.push(new Particle(this.origin));
  }

  // ...
}

```

---

_[View the full topic](https://discourse.processing.org/t/converting-my-processing-code-to-p5-js-arraylist-others/14936)._