# Convert processing Sketch to p5.js

**URL:** <https://discourse.processing.org/t/convert-processing-sketch-to-p5-js/30726>\
**Category:** Coding Questions\
**Created:** [June 15, 2021, 3:43pm UTC](https://discourse.processing.org/t/convert-processing-sketch-to-p5-js/30726 "2021-06-15T15:43:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![momo](https://avatars.discourse-cdn.com/v4/letter/m/f4b2a3/32.png) [@momo](https://discourse.processing.org/u/momo)\
**Post date:** [June 15, 2021, 3:43pm UTC](https://discourse.processing.org/t/convert-processing-sketch-to-p5-js/30726/1 "2021-06-15T15:43:22Z")

</div>

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)

```auto
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

```auto

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());
}

```

---

<div class="post-metadata">

**Author:** ![soegaard](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/soegaard/32/13657_2.png) [@soegaard](https://discourse.processing.org/u/soegaard)\
**Post date:** [June 15, 2021, 6:47pm UTC](https://discourse.processing.org/t/convert-processing-sketch-to-p5-js/30726/2 "2021-06-15T18:47:30Z")

</div>

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.

> **[Array.prototype.at() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)**
>
> The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

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.

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

```