Need help with converting java code to javascript code

p5.js
1

Here is the code I found and I was trying to convert this into javascript code


pathfinder[] paths;
void setup() {
  size(800, 600);
  background(0);
  ellipseMode(CENTER);
  fill(255);
  noStroke();
  smooth();
  paths = new pathfinder[1];
  paths[0] = new pathfinder();
}
void draw() {
  for (int i=0; i<paths.length; i++) {
    PVector loc = paths[i].location;
    float diam = paths[i].diameter;
    ellipse(loc.x, loc.y, diam, diam);
    paths[i].update();
  }
}
void mousePressed() {
  background(0);
  paths = new pathfinder[1];
  paths[0] = new pathfinder();
}

class pathfinder {
  PVector location;
  PVector velocity;
  float diameter;
  pathfinder() {
    location = new PVector(width/2, height);
    velocity = new PVector(0, -1);
    diameter = 32;
  }
  pathfinder(pathfinder parent) {
    location = parent.location.get();
    velocity = parent.velocity.get();
    float area = PI*sq(parent.diameter/2);
    float newDiam = sqrt(area/2/PI)*2;
    diameter = newDiam;
    parent.diameter = newDiam;
  }
  void update() {
    if (diameter>0.5) {
      location.add(velocity);
      PVector bump = new PVector(random(-1, 1), random(-1, 1));
      bump.mult(0.1);
      velocity.add(bump);
      velocity.normalize();
      if (random(0, 1)<0.02) {
        paths = (pathfinder[]) append(paths, new pathfinder(this));
      }
    }
  }
}

Here is my p5js code

let branchs = [];  

function setup() {
  createCanvas(600, 400);
  background(0);
  fill(255);
  noStroke();
  let l = createVector(width/2,height);
  branchs.push(new Branch(l,20));
}

function draw() {
  for(let i=0;i<branchs.length;i++){ 
    branchs[i].update();
    ellipse(branchs[i].loc.x,branchs[i].loc.y,branchs[i].dia,branchs[i].dia); 
  } 
}

function Branch(parent){
  this.loc=0;
  this.vel=0;
  this.dia=0;
  if(parent){
    this.loc = parent.loc;
    this.vel = parent.vel;
    let area = PI*sq(parent.dia/2);
    let newDia = sqrt(area/2/PI)*2;  
    this.dia = newDia; 
    parent.dia = newDia; 
    return parent;
  }else{
    this.loc = loc;
    this.dia = dia;
    this.vel = createVector(0,-1);
  }

  this.update = function(){
    if(this.dia>5){ 
      this.loc.add(this.vel) ;
      let bp = createVector(random(-1,1),random(-1,1));
      bp.mult(random(-0.5,0.5));
      this.vel.add(bp);
      this.vel.normalize();  
      this.dia-=0.005;
      if(random(1)<0.002){
        for(let i=0;i<random(1,6);i++){
          append(branchs, new Branch(this))
        }
      }
    }
  }
}

update the code according to the feedback and it throwing error now

TypeError: branchs[i].update is not a function (sketch: line 14)

1 Like
2

Which part of this are you stuck on? Which line are you confused about?

Note that you shouldn’t try to translate code line-by-line. Instead, you should figure out what the code is doing and then implement that behavior in your target language.

3

Java class has double constructor which is not possible in javascript. How do I do that?


pathFinder(){
}

pathFinder( pathfinder parent) {
}

Here is the live code - https://editor.p5js.org/black/sketches/HJJ1Tpzv7

4

Speaking generally, JavaScript supports optional parameters:

function myFunction(myArg){
  if(myArg){
    // myArg was provided
  }
  else{
    // myArg was not provided
  }
}

myFunction();
myFunction('test');
1 Like
5

Yes it does but it wont return “this”. Which basically modify and return the parent passed in the second constructor in java class.

6

You simply check whether the parameter parent was initialized or not.

class PathFinder {
  constructor(parent) {
    parent? this.initParent(parent) : this.initEmpty();
  }

  initEmpty() {
    // ...
  }

  initParent(parent) {
    // ...
  }
}
1 Like
7

It will if you tell it to:

function myFunction(){
  // whatever
  return this;
}

But again, I don’t think you should be trying to translate code line-by-line. You need to take a step back and write down in English, not in code what you want to happen when you run the code. Then take that English description (also called an algorithm) and implement that in your target language.

Trying to match the syntax one-to-one is just going to give you a headache, and will result in poorly written code.

1 Like
8

Some tips to Processing’s Java Mode to p5js conversion:

Some sketches w/ both Java Mode & p5js versions:

1 Like
9

I agree with you on this :slight_smile: :slight_smile: