Convert processing Sketch to p5.js

p5.js Coding Questions
1

Hi all, I’m a coding beginner. I was trying to convert a processing sketch into p5. I guess it is a dumb question. But please help me with this.
This is the sketch I want to convert (processing)

class A{
  float r = random(370);
  int life = 30;
  float alpha = 255;
  PGraphics pg = createGraphics(300,300);
  
  A(){
    pg.beginDraw();
    pg.background(255,0);
    for(int i = 0; i<150; i+=1){
      pg.stroke(255,map(i,0,150,255,0));
      pg.strokeWeight(2);
      pg.line(150-i,150+i,150+i,150+i);
      pg.line(150-i,150-i,150+i,150-i);
    }
    pg.endDraw();
  }
  
  void display(){
    pushMatrix();
    rotate(radians(r));
    //for(int i = 0; i<150; i+=3){
    //  stroke(255,alpha-map(i,0,150,0,255));
    //  strokeWeight(5);
    //  line(-i,i,i,i);
    //  line(-i,-i,i,-i);
    //}
    tint(255,alpha);
    image(pg, -150,-150);
    
    popMatrix();
  }
  
  void update(){
    life -= 1;
    r = random(370);
    alpha -= 20;
  }
  
}

ArrayList<A> as = new ArrayList();

void setup(){
  size(400,400);
  as.add(new A());
}

void draw(){
  background(0);
  translate(width/2,height/2);
  for(int i = as.size()-1; i > -1; i--){
    A a = as.get(i);
    a.display();
    a.update();
    
    if(a.life < 1){
      as.remove(a);
    }
  }
  
  as.add(new A());
}

This is mine, but not working


class A{
  
  constructor(r,life,alpha,pg){
  this.r = random(370);
  this.life = 30;
  this.alpha = 255;
  // PGraphics pg = createGraphics(300,300);
  // var pg;
   pg = createGraphics(300,300);
  }
  
  A(){
    pg.beginDraw();
    pg.background(255,0);
    for(let i = 0; i<150; i+=1){
      pg.stroke(255,map(i,0,150,255,0));
      pg.strokeWeight(2);
      pg.line(150-i,150+i,150+i,150+i);
      pg.line(150-i,150-i,150+i,150-i);
    }
    pg.endDraw();
  }
  
    display(){
    pushMatrix();
    rotate(radians(r));
    //for(int i = 0; i<150; i+=3){
    //  stroke(255,alpha-map(i,0,150,0,255));
    //  strokeWeight(5);
    //  line(-i,i,i,i);
    //  line(-i,-i,i,-i);
    //}
    tint(255,alpha);
    image(pg, -150,-150);
    
    popMatrix();
  }
  
    update(){
    life -= 1;
    r = random(370);
    alpha -= 20;
  }
  
}

// ArrayList<A> as = new ArrayList();
// ArrayList<A>as = new A() ;
ArrayList<A> as;

function setup(){
  createCanvas(windowWidth,windowHeight);
  as.add(new A());
}

function draw(){
  background(0);
  translate(width/2,height/2);
  for(let i = as.size()-1; i > -1; i--){
    A a = as.get(i);
    a.display();
    a.update();
    
    if(a.life < 1){
      as.remove(a);
    }
  }
  
  as.add(new A());
}
2

Here is something to get you started. It’s not a complete port, but at least it runs.

You’ll need to read up on arrays in JavaScript.
The names used in JS are different from the one used in Java.

The pair pushMatrix() and popMatrix() are not part of p5.js (why I don’t know).
Instead I have used push() and pop() – but they push and pop the entire
drawing state, not just the current transformation matrix.

You will need to figure how to remove a particular element from an array.
The MDN docs will help you.

class A{
  pg    = createGraphics(300,300);
  r     = random(370);
  life  = 30;
  alpha = 255;
  
  A(){
    pg.beginDraw();
    pg.background(255,0);
    for(let i = 0; i<150; i+=1){
      pg.stroke(255, map(i,0,150,255,0));
      pg.strokeWeight(2);
      pg.line(150-i, 150+i, 150+i, 150+i);
      pg.line(150-i, 150-i, 150+i, 150-i);
    }
    pg.endDraw();
  }
  
  display() {
      push();
      rotate(radians(this.r));
      for(let i = 0; i<150; i+=3){
        stroke(255,alpha-map(i,0,150,0,255));
        strokeWeight(5);
        line(-i,i,i,i);
        line(-i,-i,i,-i);
      };
      tint(255,this.alpha);
      image(this.pg, -150,-150);
    
      pop();
  }
  
  update(){
      this.life  -= 1;
      this.r      = random(370);
      this.alpha -= 20;
  }
}

// ArrayList<A> as = new ArrayList();
// ArrayList<A>as = new A() ;
//ArrayList<A> as;
as = [];

function setup(){
  createCanvas(windowWidth,windowHeight);
  as.push(new A());
}

function draw(){
  background(255);
  translate(width/2,height/2);
  for(let i = as.length-1; i > -1; i--){
    a = as[i];
    if (a.life >= 0) {
    a.display();
    a.update();
  };
  // if(a.life < 1){
  // as.remove(a);
  //  }
  }
  
  as.push(new A());
}