# Processing to js issues help please!

**URL:** <https://discourse.processing.org/t/processing-to-js-issues-help-please/38537>\
**Category:** Coding Questions\
**Created:** [August 29, 2022, 1:57am UTC](https://discourse.processing.org/t/processing-to-js-issues-help-please/38537 "2022-08-29T01:57:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![yk7244](https://avatars.discourse-cdn.com/v4/letter/y/eada6e/32.png) [@yk7244](https://discourse.processing.org/u/yk7244)\
**Post date:** [August 29, 2022, 1:57am UTC](https://discourse.processing.org/t/processing-to-js-issues-help-please/38537/1 "2022-08-29T01:57:32Z")

</div>

Hello everyone, I’m struggling changing my processing pde code to js (p5js) especially with class part.  
Could you help me how to change this code?

float accuracy = 99.1;

boolean autoplay = false;  
boolean showsFPS = false;  
boolean clearsBackground = true;  
boolean windEnabled = true;  
PFont font;  
float rotRange = 10;  
float rotDecay = 1.1;  
float sizeDecay = 0.7;  
float lengthDecay = 0.91;  
int levelMax = 8;  
int leafLevel = 2;  
float leafChance = 0.3;  
float branchHue = 50;  
float leafHue = 150;  
float leafSat = 100;  
float mouseWind = 0;  
float mouseWindV = 0;  
float startLength;  
float startSize;  
color trunkColor;  
color bgColor;  
int time = 0;  
float lengthRand = 1.0;  
float bloomWidthRatio = 0.6;  
float bloomSizeAverage = 15;

float mDamp = 0.00002;  
float wDamp = 0.003;  
float mFriction = 0.98;

float flowerChance = 0.1;  
color flowerColor;  
float flowerWidth = 10;  
float flowerHeight = 20;

float dx = 0;  
int windIntensity = 50; /////////tuning

//variables for UDP  
boolean udplisten = false;  
String receiveData = new String[2];  
String poseClass = “”;  
String poseClassTemp = “”;  
int poseDirection = 0;

Node node;

void setup() {  
size(600, 600);

colorMode(HSB);  
// font = createFont(“Helvetica”, 24);  
ellipseMode(CENTER);

randomize();  
reset();

//UDP  
// create a new datagram connection on port 6000  
// and wait for incomming message

[//udp.log](https://udp.log)( true ); // ← printout the connection activity  
}

void draw() {  
if (autoplay) {  
time++;  
if (time \> 600) {  
time = 0;  
randomize();  
reset();  
}  
}

////Reset the Effect, when pose change  
//if (poseClassTemp == poseClass) {  
//} else if (poseClassTemp != poseClass) {  
// time = 0;qqq  
// randomize();  
// reset();  
//}

//UDP received data  
if (udplisten == true) {  
if (poseDirection == 0) {  
dx = 0;  
} else if (poseDirection == 1) {  
dx = -windIntensity;  
} else if (poseDirection == 2) {  
dx = windIntensity;  
}  
} else {  
dx = 0;  
}

//poseClassTemp = poseClass;

//float dx = mouseX - pmouseX;  
mouseWindV += dx \* mDamp;  
mouseWindV += (0 - mouseWind) \* wDamp;  
mouseWindV \*= mFriction;  
mouseWind += mouseWindV;  
if (clearsBackground) background(bgColor);  
if (showsFPS) displayFPS();  
translate(width/2, height);  
node.draw();  
}

void reset() {  
background(bgColor);  
node = new Node(startLength, startSize, rotRange, 0);  
}

void randomize() {  
//rotRange = random(20, 60);  
rotRange = 35;  
//rotDecay = random(0.9, 1.1);  
rotDecay = 1.0;  
//startLength = random(20, 80);  
startLength = 70;  
//startSize = random(3, 20);  
startSize = 15;  
//lengthRand = random(0.0, 0.2);  
lengthRand = 0.15;  
//leafChance = random(0.3, 0.9);  
leafChance = 0.1;  
//sizeDecay = random(0.6, 0.7);  
sizeDecay = 0.65;  
lengthDecay = map(startLength, 20, 80, 1.1, 0.85);  
//leafLevel = int(random(0, 4));  
leafLevel = 0;  
//bloomWidthRatio = random(0.01, 0.9);  
bloomWidthRatio = 0.5;  
//bloomSizeAverage = random(10, 40);  
bloomSizeAverage = 15;  
mDamp = 0.00002;  
wDamp = 0.005;  
mFriction = 0.96;  
//flowerWidth = random(5, 15);  
flowerWidth = 10;  
//flowerHeight = random(10, 30);  
flowerHeight = 15;  
flowerChance =0.1;  
node = new Node(startLength, startSize, rotRange, leafLevel);  
randomizeColor();  
randomizeBackground();

}

void randomizeBackground() {  
bgColor = color(20,50,100);  
//bgColor = color(random(255), random(0, 100), 255);  
}

void randomizeColor() {  
// branchHue = random(0, 255);  
branchHue = 120;  
leafHue = 200;  
//leafHue = random(0, 255);  
//leafSat = random(0, 255);  
leafSat = 10;  
//flowerColor = color(random(255), random(0, 255), 255);  
flowerColor = color(200,150, 255);  
node.randomizeColor();  
}

void displayFPS() {  
textFont(font, 18);  
fill(150);  
String output = “fps=”;  
output += (int) frameRate;  
text(output, 10, 30);  
}

void keyPressed() {  
if (key == ‘q’) showsFPS = !showsFPS;  
if (key == ‘w’) autoplay = !autoplay;  
if (key == ‘e’) clearsBackground = !clearsBackground;  
if (key == ‘r’) windEnabled = !windEnabled;  
if (key == ‘t’) reset();  
if (key == ‘y’) randomizeBackground();  
if (key == ‘u’) randomizeColor();  
//if (key == ‘a’) dx = -50;  
//if (key == ‘s’) dx = 0;  
//if (key == ‘d’) dx = 50;  
}

void mousePressed() {  
time = 0;  
randomize();  
reset();  
}

class Node {  
float len;  
float size;  
float rot;  
int level;  
float s = 0;  
float windFactor = 10;  
boolean doesBloom;  
color branchColor;  
float bloomSize;  
color leafColor;  
float leafRot;  
float leafScale = 0.0;  
int leafDelay;  
boolean doesFlower;  
float flowerScale = 0.0;  
float flowerScaleT = 1.0;  
float flowerBright = 255;  
int flowerDelay;

Node n1;  
Node n2;

Node(float \_len, float \_size, float \_rotRange, int \_level) {  
len = \_len \* 1.0; //+ random(-lengthRand, lengthRand));  
size = \_size; //the width of overall branches  
level = \_level;  
rot = radians(random(-\_rotRange, \_rotRange));  
if (level \< leafLevel) rot _= 0.1;  
if (level == 0 ) rot = 0;  
windFactor = 0;  
doesBloom = false;  
if (level \>= leafLevel && random(1) \< leafChance) doesBloom = true;  
bloomSize = random(bloomSizeAverage_0.7, bloomSizeAverage\*1.3);  
leafRot = radians(random(-180, 180));  
flowerScaleT = random(0.8, 1.2);  
//flowerDelay = round(random(200, 250));  
//leafDelay = round(random(50, 150));

```
if (random(1) < flowerChance) doesFlower = true;

float rr = _rotRange * rotDecay;

if (level < levelMax) {
  n1 = new Node(len*lengthDecay, size*sizeDecay, rr, level+1);
  n2 = new Node(len*lengthDecay, size*sizeDecay, rr, level+1);
  randomizeColor();
}

```

}

void draw() {  
strokeWeight(size);  
s += (1.0 - s) / (15 + (level_5));  
scale(s);  
pushMatrix();  
if (level \>= leafLevel) stroke(branchColor);  
else stroke(0);  
float rotOffset = sin( noise( (float)millis() \* 0.000006 \* (level_1) ) \* 100 );  
if (!windEnabled) rotOffset = 0;  
rotate(rot + (rotOffset \* 0.1 + mouseWind) \* windFactor);  
line(0, 0, 0, -len);  
translate(0, -len);

```
// draw leaves
if (doesBloom) {
  if (leafDelay < 0) {
    leafScale += (1.0 - leafScale) * 0.05;
    fill(leafColor);
    noStroke();
    pushMatrix();
    scale(leafScale);
    rotate(leafRot);
    translate(0, -bloomSize/2);
    ellipse(0, 0, bloomSize*bloomWidthRatio, bloomSize);
    popMatrix();
  } else {
    leafDelay--;
  }
}

// draw flowers
if (doesFlower && level > levelMax-3) {
  if (flowerDelay < 0) {
    pushMatrix();
    flowerScale += (flowerScaleT - flowerScale) * 0.1;
    scale(flowerScale);
    rotate(flowerScale*3);
    noStroke();
    fill(hue(flowerColor), saturation(flowerColor), flowerBright);
    ellipse(0, 0, flowerWidth, flowerHeight);
    rotate(radians(360/3));
    ellipse(0, 0, flowerWidth, flowerHeight);
    rotate(radians(360/3));
    ellipse(0, 0, flowerWidth, flowerHeight);
    fill(branchColor);
    ellipse(0, 0, 5, 5);
    popMatrix();
  } else {
    flowerDelay--;
  }
}
pushMatrix();
if (level < levelMax) {
  n1.draw();
}
popMatrix();
pushMatrix();
if (level < levelMax) {
  n2.draw();
}
popMatrix();
popMatrix();

```

}

void randomizeColor() {  
branchColor = color(branchHue, random(170, 255), random(100, 200));  
leafColor = color(leafHue, leafSat, random(100, 255));  
flowerBright = random(200, 255);

```
if (level < levelMax) {
  n1.randomizeColor();
  n2.randomizeColor();
}

```

}

}