# Troubleshooting converting from .pde to p5 sketch

**URL:** <https://discourse.processing.org/t/troubleshooting-converting-from-pde-to-p5-sketch/29617>\
**Category:** Coding Questions\
**Created:** [April 25, 2021, 6:41am UTC](https://discourse.processing.org/t/troubleshooting-converting-from-pde-to-p5-sketch/29617 "2021-04-25T06:41:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![stanley](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@stanley](https://discourse.processing.org/u/stanley)\
**Post date:** [April 25, 2021, 6:41am UTC](https://discourse.processing.org/t/troubleshooting-converting-from-pde-to-p5-sketch/29617/1 "2021-04-25T06:41:00Z")

</div>

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

Hi all, I have a Processing sketch that I need to be converted to p5.js. I’ve never used p5 or javascript before so it has become a bit more involved than I hoped for. Could someone help me debug? Thank you in advance!

**Original Processing code:**

```auto
import nice.palettes.*; //I'm not sure if this library is
                        // available in p5 but not too important 
ColorPalette palette;

int amount = 100;
tweetBot[] human = new tweetBot[amount];

void setup() 
{
  size(1000, 1000);
  b2 = color(150);
  b1 = color(0);
  c1 = color(204, 102, 0);
  c2 = color(0, 102, 153);
  
   background(255);
  palette = new ColorPalette(this);
  printArray(palette.getPalette());

  for (int i = 0; i < amount; i++){
  human[i] = new tweetBot(random(10, 40),random(10, 40));
  } 
}

void draw() 
{
      background(255);
     
      // frame background
      //fill(15);
      //rect(120, 100, 750, 20);
      //rect(120, 750, 750, 20);
      //rect(100, 742, 20, -616);
      //rect(870, 742, 20, -616);
 
    for (int i = 0; i < amount; i++){
        human[i].step();
        human[i].display();
    }  
 }
}

class tweetBot {
 
  // perlin movement var
  float xS,yS;
  float pTx, pTy;
  int randoColor;
  
  // blob var
  float circlePoints = 260;
  float rad = 30;
  float time = 0;
  float timePassed = .02;
  float fuzzValue;  
  
  //the sweeter/meaner the tweet, the calmer/crazier the blob
 // float fuzzInten = 15; // 0.1 to 30    
 // float fuzzAmp = 0.1; // 0.0 to 1.0
  
  // MEAN
    float fuzzInten = 30; // 0.1 to 30    
    float fuzzAmp = 0.0025; // 0.0 to 1.0
  
    // kinda mean
 // float fuzzInten = 20; // 0.1 to 30    
 // float fuzzAmp = .2; // 0.0 to 1.0
 
     // eh
   // float fuzzInten = 4; // 0.1 to 30    
   // float fuzzAmp = .1; // 0.0 to 1.0
    
    // normal 
    // float fuzzInten = 30; // 0.1 to 30    
    // float fuzzAmp = .75; // 0.0 to 1.0
 
     // nice 
    // float fuzzInten = .54; // 0.1 to 30    
    // float fuzzAmp = .46; // 0.0 to 1.0
 
      // AMAZING 
  // float fuzzInten = .25; // 0.1 to 30    
  // float fuzzAmp = .42; // 0.0 to 1.0
  
  tweetBot(){
    pTx = 0;
    pTy = 1000;
  }
  
  tweetBot(float x, float y){
    pTx = x;
    pTy = y;
    randoColor = (int)random(4);  
  }
  
  void step(){
    xS = map(noise(pTx), 0, 1, 0, width);
    yS = map(noise(pTy), 0, 1, 0, height);
    
    pTx += 0.005;
    pTy += 0.005;
  }
  
 void polygon(float x, float y, float rad, float circlePoints) {
  float angle = TWO_PI / circlePoints;
// noiseDetail(3);
  beginShape();
  for (float a = 0; a < TWO_PI; a += angle) {
     fuzzValue = map(noise(cos(a)*fuzzInten+1, sin(a)*fuzzInten+1, time),
      0.0, 1.0, fuzzAmp, 1.0);
    float sx = x + cos(a) * rad * fuzzValue;
    float sy = y + sin(a) * rad * fuzzValue;
    vertex(sx, sy);
  }
  endShape(CLOSE);
  time += timePassed;
}

  void display(){
    fill(palette.colors[randoColor]);
     noStroke();
    // stroke(0);
   polygon(xS, yS, rad, circlePoints);
  } 
}

```

**p5 code that needs debugging:**

```auto
// tweetWorld.js
var amount = 100;
let human = []; 

function setup() 
{
  createCanvas(1000, 1000);

  purple = color(101, 81, 147)
  bluish = color(109, 128, 172)
  reddish = color(252, 71, 51)
  greenish = color(131, 153, 97)
  brown = color(181, 98, 69)

  colors = [purple, bluish, greenish, reddish, brown];
  

  
   background(255);

  for (var i = 0; i < amount; i++){
  human.push(new tweetBot(random(10, 40),random(10, 40)));

  } 
}

function draw() 
{
      background(255);
     
      // frame background
      //fill(15);
      //rect(120, 100, 750, 20);
      //rect(120, 750, 750, 20);
      //rect(100, 742, 20, -616);
      //rect(870, 742, 20, -616);
  
  
    for (var i = 0; i < amount; i++){
        human[i].step();
        human[i].display();
    }  
}
// tweetBot.js
class tweetBot {
  
      // MEAN
     // var fuzzInten = 30; // 0.1 to 30    
    // var fuzzAmp = 0.0025; // 0.0 to 1.0
  
     // kinda mean
    // float fuzzInten = 20; // 0.1 to 30    
   // float fuzzAmp = .2; // 0.0 to 1.0
 
     // eh
    // float fuzzInten = 4; // 0.1 to 30    
   // float fuzzAmp = .1; // 0.0 to 1.0
    
     // normal 
    // float fuzzInten = 30; // 0.1 to 30    
   // float fuzzAmp = .75; // 0.0 to 1.0
 
     // nice 
    // float fuzzInten = .54; // 0.1 to 30    
   // float fuzzAmp = .46; // 0.0 to 1.0
 
    // AMAZING 
   // float fuzzInten = .25; // 0.1 to 30    
  // float fuzzAmp = .42; // 0.0 to 1.0
  
  tweetBot(){
    pTx = 0;
    pTy = 1000;
  }
  
  tweetBot(x, y){
    pTx = x;
    pTy = y;
    randoColor = random(4);  
  }
  
   step(){
    // perlin movement var
    var xS;
    var yS;
    var pTx, pTy;
    var randoColor;
     
    xS = map(noise(pTx), 0, 1, 0, width);
    yS = map(noise(pTy), 0, 1, 0, height);
    
    pTx += 0.005;
    pTy += 0.005;
  }
   
  polygon(x, y, rad, circlePoints) {
    // blob var
  var circlePoints = 260;
  var rad = 30;
  var time = 0;
  var timePassed = .02;
  var fuzzValue;  
  //the sweeter/meaner the tweet, the calmer/crazier the blob
  var fuzzInten = 15; // 0.1 to 30    
  var fuzzAmp = 0.1; // 0.0 to 1.0
    
  var angle = TWO_PI / circlePoints;
// noiseDetail(3);
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
     fuzzValue = map(noise(cos(a)*fuzzInten+1,sin(a)*fuzzInten+1, time),
      0.0, 1.0, fuzzAmp, 1.0);
    var sx = x + cos(a) * rad * fuzzValue;
    var sy = y + sin(a) * rad * fuzzValue;
    vertex(sx, sy);
  }
  endShape(CLOSE);
  time += timePassed;
}

   display(){
    fill(colors[randoColor]);
     noStroke();
    // stroke(0);
   polygon(xS, yS, rad, circlePoints);

  } 
}

```

for those wondering, I’m working on a project that uses the twitter api and gives sediment values to each tweet I receive, stores the corresponding data in a db, and then eventually pulled to p5 and represented as one of these objects.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 25, 2021, 9:44am UTC](https://discourse.processing.org/t/troubleshooting-converting-from-pde-to-p5-sketch/29617/2 "2021-04-25T09:44:25Z")

</div>

Hi! I won’t fix everything but give you some hints. First, in JavaScript you always have to use `this.` in the class to access member variables and functions.

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

Second, constructor works differently. You can only have one constructor named `constructor`. So this part needs rewriting

```javascript
  tweetBot(){
    pTx = 0;
    pTy = 1000;
  }
  
  tweetBot(x, y){
    pTx = x;
    pTy = y;
    randoColor = random(4);  
  }

```

into something like

```javascript
  constructor(x, y){
    if (x === undefined || y === undefined) {
      pTx = 0;
      pTy = 1000;
    }
    else {
      pTx = x;
      pTy = y;
      randoColor = random(4);  
    }
  }

```

(not tested)

---

<div class="post-metadata">

**Author:** ![stanley](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@stanley](https://discourse.processing.org/u/stanley)\
**Post date:** [April 25, 2021, 10:15am UTC](https://discourse.processing.org/t/troubleshooting-converting-from-pde-to-p5-sketch/29617/3 "2021-04-25T10:15:29Z")

</div>

I will try to implement your suggestions and see if I have any success. Thank you for such a quick response!