Help with p5.js solar system sketch

Mojo

Hey everyone, I am doing this sketch which is following up dan's shiffman tutorial in processing, however I am doing it in p5.js for some reason I can's seem to do the final step and I think it has to do with the vectors. If anyone can help me, I would really appreciate it. Here is the code in processing:

import peasy.*;
Planet sun;

PeasyCam cam;

void setup() {
  size(600, 600, P3D);
  cam = new PeasyCam(this, 500);
  sun = new Planet(50, 0, 0);
  sun.spawnMoons(4, 1);
}

void draw() {
  background(0);
  lights();
  sun.show();
  sun.orbit();
}

// planet class

class Planet {
      float radius;
      float distance;
      Planet[] planets;
      float angle;
      float orbitspeed;
      PVector v;

      PShape globe;

      Planet(float r, float d, float o) {

    v = PVector.random3D();

    radius = r;
    distance = d;
    v.mult(distance);
    angle = random(TWO_PI);
    orbitspeed = o;
  }

  void orbit() {
    angle = angle + orbitspeed;
    if (planets != null) {
      for (int i = 0; i < planets.length; i++) {
        planets[i].orbit();
      }
    }
  }

  void spawnMoons(int total, int level) {
    planets = new Planet[total];
    for (int i = 0; i < planets.length; i++) {
      float r = radius/(level*2);
      float d = random((radius + r), (radius+r)*2);
      float o = random(-0.1, 0.1);
      planets[i] = new Planet(r, d, o);
      if (level < 2) {
        int num = int(random(0, 3));
        planets[i].spawnMoons(num, level+1);
      }
    }
  }

  void show() {
    pushMatrix();
    noStroke();
    PVector v2 = new PVector(1, 0, 1);
    PVector p = v.cross(v2);
    rotate(angle, p.x, p.y, p.z);
    stroke(255);
    //line(0, 0, 0, v.x, v.y, v.z);
    //line(0, 0, 0, p.x, p.y, p.z);

    translate(v.x, v.y, v.z);
    noStroke();
    fill(255);
    sphere(radius);
    //ellipse(0, 0, radius*2, radius*2);
    if (planets != null) {
      for (int i = 0; i < planets.length; i++) {
        planets[i].show();
      }
    }
    popMatrix();
  }
}

And this is the p5.js code

var easycam;

function setup() {
    createCanvas(windowWidth,windowHeight,WEBGL);
    easycam = createEasyCam();
    sun = new Planet(20, 0, 0, random(TWO_PI));
    sun.spawnMoons(2, 1);
}

function draw() {
    background(0);
    cursor(HAND);

    sun.show();
    sun.orbit();
}

//planet class

        class Planet {
            constructor(radius, distance, orbitspeed, angle,mass) {
            this.radius = radius;
            this.distance = distance;
            this.orbitspeed = orbitspeed;
            this.angle = angle;
            this.planets = [];
            this.mass=mass;

            // this should be correct
            // this is the vector coming out of the planet itself.

            this.v = createVector();
            this.v = p5.Vector.random3D();
            this.v. mult(this.distance);
            // park this for now.
            // this.v = createVector();
            // this.v = p5.Vector.random3D();
            // this.v.mult(this.distance);
            // var v = new p5.Vector.random3D();
            // v. mult(this.distance);


        }


    orbit() {
        this.angle += this.orbitspeed/this.mass;
        for (let i in this.planets) {
            this.planets[i].orbit();
        }
    }


    spawnMoons(total, level) {
        for (let i = 0; i < total; i++) {
            let r = this.radius/(level*2);
            let d = random(50, 150);
            let o = random(-0.1, 0.1);
            let a = random(TWO_PI);
            this.planets.push(new Planet(r, d/level, o, a));
            if (level < 1) {
                let num = Math.floor(random(0, 4));
                this.planets[i].spawnMoons(num, level+1);
            }
        }
    }


    show() {
      push();
      noStroke(0)
      // fill(255);
      // let v2 = createVector(1,0,1);
      // let p = createVector(v.cross);
      // this.v2 = createVector(0, 0, 1);
      // this. p = this.v.cross(this.v2);
      // rotateY(this.angel);
      // translate(v.x,v.y,v.z);
      this.v2= createVector(1,0,1);
      this.p= this.v.cross(this.v2);
      rotate(this.angel,this.p.x,this.p.y,this.p.z);
      translate(this.v.x,this.v.y,this.v.z);
      //lights
          ambientLight(5,100);
          directionalLight(255, 255, 255, 0.2, 0.2, 0.7);
          specularMaterial(255);
          sphere(this.radius);

        for (let i in this.planets) {
            this.planets[i].show();
        }
        pop();
    }

}

I would really really appreciate some help, its quite difficult to find references on vectors in p5.js.

Thanks loads in advance

GoToLoop

Your class Planet's constructor got 5 parameters: L-)
constructor(radius, distance, orbitspeed, angle, mass) {

However, when you instantiate it, you only pass 4 arguments to it: #-o
sun = new Planet(20, 0, 0, random(TWO_PI));

Which means Planet::mass property is assigned w/ undefined: :-SS
this.mass = mass;

And inside Planet::orbit() method: this.angle += this.orbitspeed/this.mass;

The expression this.orbitspeed/this.mass is evaluated as NaN.
Which also makes Planet::angle property NaN as well! :-&

jeremydouglass

There might be some relevant previous discussion on the forum of solar system / planet modeling specifically:

• https://forum.processing.org/two/search?Search=solar
• https://forum.processing.org/two/search?Search=planet

When you say "I can's seem to do the final step and I think it has to do with the vectors" could you say more about what specifically you mean?

• https://p5js.org/reference/#/p5/createVector
• https://p5js.org/reference/#/p5.Vector

Example vector sketch:

• https://p5js.org/examples/hello-p5-flocking.html

Mojo

@Jeremy I mean that I am not entirely sure the way I translated PVectors from processing to p5.js is correct. So here is how it is looking like in processing:

void show() {
    pushMatrix();
    noStroke();
    PVector v2 = new PVector(1, 0, 1);
    PVector p = v.cross(v2);
    rotate (angle, p.x, p.y, p.z);

    translate(v.x, v.y, v.z);
    shape(globe);
    if (planets !=null) {
      for (int  i = 0; i<planets.length; i++) {
        planets[i].show();
      }
    }
    popMatrix();
  }

Compared to the one I wrote above. It runs in processing but I am trying to make it run in p5 and I am stuck. @GoToLoop You are right and I fixed it, but still it is not running. Any hints? And also if anyone knows, could someone please tell me the difference between p5.Vector and createVector?

jeremydouglass

if anyone knows, could someone please tell me the difference between p5.Vector and createVector?

p5.Vector is the class for objects of type p5.Vector.

createVector() is a function for creating a new object of type p5.Vector.

If you look in the p5.Vector reference page, you will see that the example shows creating a new p5.Vector by calling createVector() and assigning the returned vector to a variable name.