Learn to Code via Tutorials on Repl.it!

← Back to all posts
How To Create A 3D Gravity Simulation In P5.js (Basic)
JacksonPhilips (66)

Introduction

So you're wondering what kind of magic to create with your newfound knowledge of p5.js. Writing something in text is lame and storing data is impractical (because after all, it is a visual library for JavaScript). You want to make a 3D object do something. After all, it can't just sit around like a couch potato!
You then think of an ingenious idea: Build a 3D simulation of gravity! Sadly, there's not a lot of good, simple explanations of the formula we all know as gravity, and won't get better any time soon. However, you stumbled across this post! How life-saving. What I'll teach you is how to make the object move, rotate, and spin correspondingly to each other via gravity variables and decimals. Let's a go!

Setting It Up

For these first instructions, you could also look at the p5.js Web Editor and see that it's already placed for you! So, just open a new sketch using the p5.js Web Editor. For those of you who won't comply with me, this is what we're doing:

function setup() {
  createCanvas(400,400,WEBGL);
}

function draw() {
  background(123);
}

What the setup() command tells JavaScript to do is to say, Hey, we got some P5 incoming! Buckle up, boys! setup() and draw() are required in EVERY visual p5.js sketch, so you're gonna see a lot more of those guys. What I did was edit my background() to 123 so it looks cooler on P5 & CodePen, and to background(255) for my collaboration website with Repl.it, Rephys.

Assigning the Key Variables

Now, we can't have a moving thing without assigning a couple of variables to them. Since we're dealing with gravity, not movement, x can be left defined as 0 or undefined. I found it useful to start from just making it fall first, then adding rotation.
Okay, so what do we do to make it move? You heavily rely on translate(). Make sure it's not transform(), the 2D version. I had trouble with that.

function setup() {
  createCanvas(400,400,WEBGL);
  background(123);
  x=0;
  v=9.81;
  y=0;
}
function draw(){
  background(123);
  box();
}

Assign a variable named v (or whatever you want, mine was gravitydivide) and assign it to 9.81, an approximation of Earth's gravity. We want to make it broad and easy to change, y'know?
Now, don't trip up on this part, because it's easy to. You're gonna have to change the variable using -=, instead of =-. It might be standard procedure, I don't know, but I find it weird nonetheless.
You're now gonna want to assign a number (I prefer 0.34614) to the end of your line of code, looking like this:
v-=0.34614;
Then, you assign a new variable called g to 9.81/v.
This should go in your draw() function, and I recommend adding y.
You should have this so far:

function setup() {
  createCanvas(400,400,WEBGL);
  background(123);
  x=0; // Not required
  v=9.81;
  y=0;
}
function draw(){
  background(123);
  y++;
  v-=0.34614;
  g=9.81/v;
  box();
}

Translate

Finally, we add the translate. X is obviously 0, and my formula for finding the Y position is g/0.314. Now, it should look like this: translate(0,y * (g/0.314));
Here's the final resulting code:

function setup() {
  createCanvas(1000,1000,WEBGL);
  background(0);
  x=0
  g=9.81;
  y=0;
}
function draw(){
  background(123);
  y++;
  v-=0.34614;
  g=9.81/v
  translate(0,y * (gravity/0.314));
  box();
}

A link to the CodePen project demonstrating this.

In the advanced session which I will link here when written, we will talk about the rotation. If you don't feel like it, please check the source below. Have a good day! (P.S. Check out my dev.to profile!)

Comments
hotnewtop