#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Help with p5.js solar system sketch

edited May 2018

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 distance;
Planet[] planets;
float angle;
float orbitspeed;
PVector v;

PShape globe;

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

v = PVector.random3D();

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 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);
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 {
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 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);

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.

Tagged:

• edited May 2018 Answer ✓

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! :-&

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

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?

Example vector sketch:

• @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?

• 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.