Ex 2.7 tossing a ball - The Nature of code

p5.js Beginners
1

I am following along with The nature of Code of Daniel Shiffman. And I am stuck on exercises 2.7 of tossing a circle with mouse interaction.

I think in circles and I hope some body can shine a light on it. I looked in the nature of code github and I see the examples, but not the solution to the exercises. Maybe I am missing something?

Link to what I have so far
https://editor.p5js.org/Delain/sketches/oxzGxsdIO

What I want it to do:

  1. ball moves when the mouse moves
  2. when I release the mouse the ball it gets speed and direction, from the point I release the mouse.

It does what I want for point 1, but not for point 2. I am using the mouseIsPressed Boolean which means that I have to keep pressing the mouse to keep the animation going and means it will keeps adding acceleration even when the ball is falling. I can not get it work in the mousePressed and
mouseReleased function. Can somebody put me on the right track.

let mover;

function setup() {
createCanvas(640, 240);

mover = new Mover(mouseX, mouseY, 5);
}

function draw() {
background(255);

if (mouseIsPressed === false) {
mover.showMouse();
}

let gravity = createVector(0, 0.1);
let gravityA = p5.Vector.mult(gravity, mover.mass);
mover.applyForce(gravityA);

if (mouseIsPressed) {
mover.clicked(mouseX, mouseY);
mover.show();
mover.update();
mover.frictionF(0.005);
mover.bounceEdges();
}
}

class Mover {
constructor(x, y, mass) {
this.pos = createVector(x, y);
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.mass = mass;
this.r = this.mass * 8; //diameter is this.mass * 16, dus r is
}

clicked(px, py) {
// let d = dist(px, py, this.pos.x, this.pos.y);
// if (d < this.r) {
let throwX = (mouseX - pmouseX) / 10;
let throwY = (mouseY - pmouseY) / 10;
let throwF = createVector(throwX, throwY);
this.applyForce(throwF);
console.log(“clicked”);
// }
}

applyForce(force) {
let f = p5.Vector.div(force, this.mass);
this.acc.add(f);
}

contactEdge() {
return this.pos.y > height - this.r - 1;
}

frictionF(c) {
if (this.contactEdge()) {
let normal1 = this.mass;
let frictionMag = c * normal1;

  let friction = this.vel.copy();
  friction.normalize();
  friction.mult(-1);

  friction.mult(frictionMag);

  this.applyForce(friction);
}

}

bounceEdges() {
let bounce = 0.9;

if (this.pos.x >= width - this.r) {
  this.pos.x = width - this.r;
  this.vel.x *= -bounce;
} else if (this.pos.x <= this.r) {
  this.pos.x = this.r;
  this.vel.x *= -bounce;
}

if (this.pos.y > height - this.r - 1) {
  this.pos.y = height - this.r;
  this.vel.y *= -bounce;
} else if (this.pos.y <= this.r - 1) {
  this.pos.y = this.r;
  this.vel.y *= -bounce;
}

}

update() {
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(0);
}

show() {
stroke(0);
fill(175);
circle(this.pos.x, this.pos.y, this.r * 2);
}

showMouse() {
stroke(0);
fill(175);
circle(mouseX, mouseY, this.r * 2);
}
}

2

Nevermind. I was overthinking it. I simplified what I wanted the code to do. Which is just to move over a stationary ball to throw it.

You can find my solution here:
https://editor.p5js.org/Delain/sketches/-7QaXxT3o

1 Like