So, I’m trying to make a basic physics simulation in Processing JS. I want the user to be able to control a ball by dragging it. They should be able to move it around and throw it in the air by releasing it. There isn’t anything else, just these things and of course the walls around the canvas, which I can easily program myself. I’ve had a few problems with momentum and gravity, which I can’t find a good way to take care of using the current system I’m using.
I’ve already tried using pmouseX and mouseX along with their counterparts for the Y axis. However, if the user presses the screen and moves around at all, it resets the acceleration and velocity of the ball. I did all of this in the mouseDragged() function. I next tried using the mouseReleased function to perform these when the drag was finished, but this didn’t work as it detected all clicks and reset acceleration and velocity or set them to ridiculously high numbers. With both of those, I also had problems with drag, air resistance, and friction. I couldn’t easily incorporate those with the existing code and gravity. So far I’ve been using a PVector for velocity.
I’ve done a sort of combination of the two approaches and this is what I have so far.
int x = 150;
int y = 150;
PVector v;
v = new PVector(0,0);
int pmousex2 = 0;
int pmousey2 = 0;
void draw() { // this is run repeatedly.
background(255,255,255);
x += v.x;
y += v.y;
v.set((v.x/1.0125), ((v.y/1.0125)+3));
ellipse(x,y,12,12);
pmousex2 = pmouseX;
pmousey2 = pmouseY;
if (y>294){
v.set((v.x/1.5),(((-1*v.y)/1.5)));
}
if (y<6){
v.set((v.x/1.5),(((-1*v.y)/1.5)+3));
}
if (x>294){
v.set(((-1*v.x)/1.5),v.y);
}
if (x<6){
v.set(((-1*v.x)/1.5),v.y);
}
}
void mouseReleased(){
if (mouseX>(x-20) && mouseX<(x+20) && mouseY>(y-20) && mouseY<(y+20)){
v.set((pmouseX - pmousex2)/4, (pmouseY - pmousey2)/4);
}
}
void mouseDragged(){
if (mouseX>(x-20) && mouseX<(x+20) && mouseY>(y-20) && mouseY<(y+20)){
x=mouseX;
y=mouseY;
}
}
I’ve had several issues with this, notably those described above. I also have experienced cases where the ball moves very little when dragged. Lastly, the main issue. When gravity pulls the ball downwards, I can’t get the ball to stand still. If I strengthen gravity at all, the ball ends up falling through the floor. If I weaken gravity, the ball never stops bouncing. I was wondering whether there was a different approach to solving this problem I hadn’t thought of yet. Many thanks.
As about the last main issue. The most common approach is to use vector addition for speed and position of a ball according to gravity vector:
let canvas
let pos
let ground
let gravity
let speed
function setup() {
canvas = createVector(500,500)
pos = createVector(200,150)
ground = createVector(0,470)
gravity = createVector(0,2.5)
speed = createVector(0,0)
createCanvas(canvas.x,canvas.y)
}
function draw() {
// update
speed.add(gravity)
pos.add(speed)
if (pos.y >= ground.y - 8) {
pos.y = ground.y - 8
if (speed.mag() > 3.0) {
speed.mult(-1)
}
else {
speed = createVector(0,0)
gravity = createVector(0,0)
}
}
// draw
background(200,200,220)
fill(170, 100, 50);
noStroke();
rect(0,ground.y,canvas.x,canvas.y-ground.y)
stroke(50)
fill(100, 150, 150);
ellipse(pos.x,pos.y,16,16)
}
function mouseReleased(){
speed = createVector(0,0)
gravity = createVector(0,2.5)
pos.set(mouseX, mouseY)
}
Thus using such approach you will get used to vector algebra operations which you will need A LOT in computer graphics development and your solutions would be most compatible to kinematics laws.