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

p5.js Coding Questions
1

please format code with </> button * homework policy * asking questions

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


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

2

Hi @Dazsha,

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

And take a look here about pixels in p5js

Cheers
— mnse