We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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
Answers
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
: :-SSthis.mass = mass;
And inside Planet::orbit() method:
this.angle += this.orbitspeed/this.mass;
The expression
this.orbitspeed/this.mass
is evaluated asNaN
.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:
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?
p5.Vector
is the class for objects of typep5.Vector
.createVector()
is a function for creating a new object of typep5.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.