# Does anyone know how to convert processing to p5.js?

**URL:** https://discourse.processing.org/t/does-anyone-know-how-to-convert-processing-to-p5-js/38212
**Category:** Coding Questions
**Created:** [August 3, 2022, 4:58pm UTC](https://discourse.processing.org/t/does-anyone-know-how-to-convert-processing-to-p5-js/38212 "2022-08-03T16:58:14Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Dazsha](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@Dazsha](https://discourse.processing.org/u/Dazsha)
#### Post date: [August 3, 2022, 4:58pm UTC](https://discourse.processing.org/t/does-anyone-know-how-to-convert-processing-to-p5-js/38212/1 "2022-08-03T16:58:14Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

This is the processing code that I’d like to convert

* * *

```auto

Particle[] particles;
float alpha;

void setup() {
  size(1112, 834);
  background(0);
  noStroke();
  setParticles();
}

void draw() {
  frameRate(30);
  alpha = map(mouseX, 0, width, 5, 35);
  fill(0, alpha);
  rect(0, 0, width, height);

  loadPixels();
  for (Particle p : particles) {
    p.move();
  }
  updatePixels();
}

void setParticles() {
  particles = new Particle[10000];
  for (int i = 0; i < 10000; i++) { 
    float x = random(width);
    float y = random(height);
    float adj = map(y, 0, height, 255, 0);
    int c = color(60, adj, 255);
    particles[i]= new Particle(x, y, c);
  }
}

void mousePressed() {
  setParticles();
}

class Particle {
  float posX, posY, incr, theta;
  color c;

  Particle(float xIn, float yIn, color cIn) {
    posX = xIn;
    posY = yIn;
    c = cIn;
  }

  public void move() {
    update();
    wrap();
    display();
  }

  void update() {
    incr += .008;
    theta = noise(posX * .006, posY * .008, incr) * TWO_PI;
    posX += 2 * tan(theta);
    posY += 2 * sin(theta);
  }

  void display() {
    if (posX > 0 && posX < width && posY > 0 && posY < height) {
      pixels[(int)posX + (int)posY * width] = c;
    }
  }

  void wrap() {
    if (posX < 0) posX = width;
    if (posX > width ) posX = 0;
    if (posY < 0 ) posY = height;
    if (posY > height) posY = 0;
  }
}

-----

And this is how I changed and doesn't work

let particles;

var alpha;
let particle = [];
const num = 100;

function setup() {
    initializeFields();
    createCanvas(900, 500);
    background(0);
    noStroke();
    setParticles();
}

function draw() {
    frameRate(30);
    alpha = map(mouseX, 0, width, 5, 35);
    fill(0, alpha);
    rect(0, 0, width, height);
    loadPixels();
    for (var p : particles) {
        p.move();
    }
    updatePixels();
}

function setParticles() {
    particles = new Array(10000);
    for (var i = 0; i < 10000; i++) {
        var x = random(width);
        var y = random(height);
        var adj = map(y, 0, height, 255, 0);
        var c = color(60, adj, 255);
        particles[i] = new Particle(x, y, c);
    }
}

function mousePressed() {
    setParticles();
}

class Particle {
 constructor() {
    this.posX = xIn;
    this.posY = yIn;
    this.c = cIn;
  }

function move() {
    update();
    wrap();
    display();
}

function update() {
    incr += .008;
    theta = noise(posX * .006, posY * .008, incr) * TWO_PI;
    posX += 2 * tan(theta);
    posY += 2 * sin(theta);
}

function display() {
    if (posX > 0 && posX < width && posY > 0 && posY < height) {
        pixels[int(posX) + int(posY) * width] = c;
    }
}

function wrap() {
    if (posX < 0)
        posX = width;
    if (posX > width)
        posX = 0;
    if (posY < 0)
        posY = height;
    if (posY > height)
        posY = 0;
}

function initializeFields() {
    particles = null;
    alpha = 0;
    posX = 0;
    posY = 0;
    incr = 0;
    theta = 0;
    c = null;
}

```

Could anyone help to convert and explain why the code I converted doesn’t work?`Preformatted text`

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [August 3, 2022, 5:03pm UTC](https://discourse.processing.org/t/does-anyone-know-how-to-convert-processing-to-p5-js/38212/2 "2022-08-03T17:03:25Z")

</div>

Hi @Dazsha,

For the first …  
Please format your code based on the description here…  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

And take a look here about pixels in p5js

> **[reference | p5.js](https://p5js.org/reference/#/p5/pixels)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Cheers  
— mnse