We Keep Coding

How can I change an object's speed in p5.js if the mouse is pressed in OOP

Hi guys i'm very new to p5/js and not quite good at OOP programming.
I want to drop a ball by changing its speed once the mouse is clicked.
After trying to write and edit the code many times, the p5 editor didn't show any error massages but there aren't anything shown up on the display. So, I need a hand and some advices to fix this kind of problem.
Thank you in advance (:
let ball1;
let circleX = 50;
let circleY = 50;
let xspeed = 0; // Speed of the shape
let yspeed = 0; // Speed of the shape
let xdirection = 1; // Left or Right
let ydirection = 1; // Top to Bottom
let rad =50;
function setup() {
createCanvas(400, 400);
ball1 = new Ball();
}
function draw() {
background(220);
ball1.x =20;
ball1.y = 50;
ball1.c = color(25,0,100)
ball1.body();
ball1.move();
ball1.bounce();
}
class Ball {
constructor(){
this.x = width/2;
this.y = height;
this.w = 30;
this.h = 30;
this.c = color(0,255,0);
this.xspeed = 0;
this.yspeed = 0;
}
body(){
noStroke();
fill(this.c);
ellipse(this.x, this.y, this.w, this.h);
}
move() {
//this.xpos = width / 2;
//this.ypos = height / 2;
this.x = this.x + this.xspeed * this.xdirection;
this.y = this.y + this.yspeed * this.ydirection;
}
bounce() {
if (this.x > width - rad || this.x < rad) {
this.xdirection *= -1;
}
if (this.y > height - rad || this.y < rad) {
this.ydirection *= -1;
}
}
if(mouseIsPressed) { // if the mouse is pressed
//set the new speed;
this.fill(0, 0, 0);
this.xspeed =1.5;
this.yspeed=1.5;
}
}

You've got some good beginnings to your code. I modified it just a bit to assist toward OOP programming. See the code at the end of my answer for the full source.
Solution
The main question you are asking involves setting the ball's speed when the mouse button is pressed. For that, you should declare a mousePressed() function in your code as such (borrowing from your if block):
function mousePressed() {
// if the mouse is pressed
// set the new speed;
ball.xspeed = 1.5;
ball.yspeed = 1.5;
}
That should set the speed of the ball and that should solve your problem.
Other thoughts
Some other steps I took to adjust your code to more working conditions include:
I created a reset() function to be used in the setup() function and potentially able to reset the animation whenever you would like.
I changed the rad variable declaration to const rad = 50 since it doesn't change
I changed the Ball constructor to include initial (x, y) coordinates when creating the ball (could be helpful if creating multiple balls)
If you want to create an arbitrary number of balls, create an array and use array.push(new Ball(x, y)) for each ball and loop through the array to move()/bounce()/body() each ball.
I'm assuming rad is meant to be the radius of the balls, so I set the this.w and this.h to rad * 2 since with and height would equate to the diameter.
let ball;
const rad = 50;
// let circleX = 50;
// let circleY = 50;
//let xspeed = 0; // Speed of the shape
//let yspeed = 0; // Speed of the shape
function setup() {
createCanvas(400, 400);
reset();
}
function draw() {
background(220);
ball.body();
ball.move();
ball.bounce();
}
function mousePressed() {
// if the mouse is pressed
//set the new speed;
ball.xspeed = 1.5;
ball.yspeed = 1.5;
}
function reset() {
ball = new Ball(width / 2, height / 2);
}
class Ball {
constructor(x, y) {
this.x = x;
this.y = y;
this.w = rad * 2;
this.h = rad * 2;
this.c = color(25, 0, 100);
this.xspeed = 0;
this.yspeed = 0;
this.xdirection = 1;
this.ydirection = 1;
}
body() {
noStroke();
fill(this.c);
ellipse(this.x, this.y, this.w, this.h);
}
move() {
this.x = this.x + this.xspeed * this.xdirection;
this.y = this.y + this.yspeed * this.ydirection;
}
bounce() {
if (this.x > width - rad || this.x < rad) {
this.xdirection *= -1;
}
if (this.y > height - rad || this.y < rad) {
this.ydirection *= -1;
}
}
}
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.min.js"></script>

Numbers before code are line numbers, they might be wrong, but should be close enough...
You need to move the 64 if(mouseIsPressed){} into a function like 47 move().
Also you haven't declared and initialized 39 this.xdirection
in the constructor(){}.
I think 67 this.fill(0, 0, 0) should be fill(0).
Maybe 24 ball1.body(); should be after the other methods (24 -> 26 line).
I think the if() statements in bounce(){} are wrong, since they'd need to have AND or && instead of OR or ||.
Also you might want to make the if(mouseIsPressed) into function mousePressed(){} mouseIsPressed is a variable that is true if mouse button is down; mousePressed is a function that gets called once when user presses the mouse button.
function mousePressed(){
ball1.xSpeed = 1.5
ball1.ySpeed = 1.5
}
There might very well be other things i haven't noticed.

Gravity implementation causing Obj to continue through object

I am having an issue with my implementation of gravity and collision on many objects on a canvas...I understand where I have gone wrong I just cannot for the life of me think of a solution to fix it.
I am checking if dropped objects reach a y position on the canvas and then reverse the velocity * friction to bounce the object...This works fine with one object or many objects. However, because of my conditional when the objects stack on top of each other the velocity never decreases as it is always being increased by the gravity, meaning the objects slowly pass through each other after they have finished bouncing around.
I have tried checking if "this" object is colliding however this will not work as the objects should be able to bounce until friction causes the velocity to decrease or increase to zero(or very close in this case).
Here is the function for gravity.
gravity() {
//If the objects y + the height and delta are greater than the canvases height reverse the velocity * friction also apply
//same friction to x to stop the objects from sliding
if (this.y + this.height + this.delta_y >= this.canvas.height) {
this.delta_y = -this.delta_y * this.FRICTION;
this.delta_x = this.delta_x * this.FRICTION;
//If the delta_y does not push the objects y over the canvas height increase the delta by the gravitational pull
} else {
this.delta_y += this.GRAVITY;
}
//Apply reversed velocity over x - works because no constant gravity being added
if (this.x + this.width >= this.canvas.width || this.x - this.width <= 0) {
this.delta_x = -this.delta_x * this.FRICTION;
}
//update the x and y coordinates with the new delta value
this.x += this.delta_x;
this.y += this.delta_y;
//set the new centre for collision.
this.center = {
"x": this.x + this.width / 2,
"y": this.y + this.height / 2
};
}
I also thought I maybe able to run a timer on the y variable for a few milliseconds and if it has not changed outside of a bound then I could stop movement. However, this is not ideal and im not sure if a timeout would be good as javascript is single threaded? I would be at home in python but I am struggling here.
I have enclosed the calling function here
gameLoop(timeStamp) {
// Calculate how much time has passed // was thinking I could use this to check y after some time
//but stopped and decided to post to stack
let secondsPassed = (timeStamp - this.oldTimeStamp) / 1000;
this.oldTimeStamp = timeStamp;
if (this.gameObjects.length > 0) {
//update all objects and pass all objects to update to check for collision
for (let i = 0; i < this.gameObjects.length; i++) {
this.gameObjects[i].update(this.gameObjects);
}
//clear the canvas ready for next draw
this.clearCanvas();
//draw the next iteration of the gameobjects
for (let i = 0; i < this.gameObjects.length; i++) {
this.gameObjects[i].draw();
}
}
window.requestAnimationFrame((timeStamp) => this.gameLoop(timeStamp));
}
Finally here is the update function for completeness
update(gameObjects) {
//impose gravity on this object
this.gravity();
//loop through objects and check for collision
for (let i = 0; i < gameObjects.length; i++) {
// if this object is the same as the iterated object skip it
if (this === gameObjects[i]){continue;}
//test variable to check collision on this object
this.colliding = this.collisionDetection(gameObjects[i]);
//if colliding resolve the collision
if (this.colliding) {
this.resolveCollision(this, gameObjects[i]);
}
}
}
Thank you, vanilla JS only please.

I think the problem is that, when the object is out of bounds, you reduce its speed, so it doesn't have enough speed to come back in 100%.
Maybe you can apply your "friction" in the next update, not the one with the collision.

For anyone that gets stuck on this I was able to get it to working by passing the game objects to the gravity method and then adding a check in the conditional to see if a collision has occured. Its not perfect and there are a few other things to sort but for now its progress.
code
gravity(objects) {
//initialize collision to false
let thisCollide = false;
//loop through all objects
for(let i = 0; i < objects.length; i++){
//If the iteration is on this object then skip
if(this === objects[i]) continue;
//if there is a collision && that collision is on the top of the current object
if(this.collisionDetection(objects[i]) && (this.y - objects[i].y <= 1)){
//set the collision to true and break
thisCollide = true;
}
}
//If the objects y + the height and delta are greater than the canvases height or the object has collide on the top
//reverse the velocity * friction also apply same friction to x to stop the objects from sliding
if (this.y + this.height + this.delta_y >= this.canvas.height || thisCollide) {
this.delta_y = -this.delta_y * this.FRICTION;
this.delta_x = this.delta_x * this.FRICTION;
//If the delta_y does not push the objects y over the canvas height increase the delta by the gravitational pull
} else {
this.delta_y += this.GRAVITY;
}
//Apply reversed velocity over x - works because no constant gravity being added
if (this.x + this.width >= this.canvas.width || this.x - this.width <= 0) {
this.delta_x = -this.delta_x * this.FRICTION;
}
//update the x and y coordinates with the new delta value
this.x += this.delta_x;
this.y += this.delta_y;
//set the new centre for collision.
this.center = {
"x": this.x + this.width / 2,
"y": this.y + this.height / 2
};
}

I would recommend this order:
Apply forces
Update Velocity
Update Position
In your case:
//apply acceleration
this.delta_y += this.GRAVITY;
//apply friction
this.delta_x -= this.delta_x * this.FRICTION;
this.delta_y -= this.delta_y * this.FRICTION;
//update position
this.x += this.delta_x;
this.y += this.delta_y;
//collision
if (this.x + this.width >= this.canvas.width || this.x - this.width <= 0) {
this.delta_x = -this.delta_x;
}
if (this.y + this.height >= this.canvas.height) {
this.delta_y = -this.delta_y;
}

p5.js repetition of the same function

I am learning p5.js and I don't quite understand how to repeat my function on the y-axis so that the lines appeared on top of the other. I understand that I would need to make a class object but all that I succeeded to do was to freeze the editor XD. Could you help me figure out how to make my function repeat itself with different Y starting point?
let walkers = []; // creation of an array
this.xoff = 0; //changed to go outside of the walker class
this.yoff = 0; //changed to go outside of the walker class
this.x = 0;
y = 200;
function setup() {
createCanvas(600, 600);
background(250);
for (let i = 0; i < 10; i++) { //mix array and class
walkers[i] = new walker(y);
}
}
function draw() {
for (i = 0; i < walkers.length; i++) { // consider the array lenght
walker[i].acceleration(); // call the class and it's function
walker[i].velocity();
walker[i].update();
walker[i].display();
}
}
class walker {
constructor(y) { //divide the class in multiple function
this.y = y
}
acceleration() {
this.accX = 0.1;
this.accY = 0.1;
this.px = this.x;
this.py = this.y;
}
velocity() {
this.velocityY = random(-20, 20);
this.velocityX = 5;
}
update() {
this.x = this.x + this.accX + this.velocityX * noise(this.xoff);
this.y = this.y + this.accY + this.velocityY * noise(this.yoff);
}
display() {
for (this.y < 200; this.y > 400; this.y + 20) {
line(this.x, this.y, this.px, this.py);
}
this.xoff = this.xoff + 1;
this.yoff = this.yoff + 100;
this.px = this.x;
this.py = this.y;
}
}

There are quite a few things wrong with how your code behaves.
Here are a few issues:
walkers it the array used,: e.g.walkers[i].acceleration();, not walker[i].acceleration(); (same hold true for the rest of the calls)
initialize variables if you plan to use them (otherwise using math operators update() will end up with NaN: e.g. this.x, this.xoff, this.yoff, etc.
it's unclear what motion behaviour you're after with position, velocity, acceleration, perlin noise, etc. (which btw are updated with strange increments ( this.yoff = this.yoff + 100;))
The code mostly freezes because of this:
for (this.y < 200; this.y > 400; this.y + 20)
It's unclear what you're trying to do there: this.y < 200; this.y > 400 makes me think you were going for an if condition to only draw lines between 200-400 px on Y axis, however this.y + 20 makes me think you want to increment y for some reason ?
It's also unclear why x,xoff,yoff moved out the walker class ?
There may be some understanding around classes, instances and the this keyword.
As per JS naming convention, class names should be title case.
I can tell you've put a bit of effort trying to build a more complex sketch, however it will won't be helpful for you to add complexity unless you understand all the parts of your code. This is where mastering the fundamentals pays off.
I recommend:
going back to pen/paper sketching to work out your idea until it's clearer
thinking of how you will achieve that by breaking complex tasks into smaller steps
writing basic test sketches for each step/component
Finally, bring one component at a time into a main program, testing again as components interact with another. Be sure to check out Kevin Workman's How to Program guide.
FWIW, here's a modified version of your code, with a tweak to set the initial y position of each Walker on top of each other:
let walkers = []; // creation of an array
y = 200;
function setup() {
createCanvas(600, 600);
background(250);
for (let i = 0; i < 10; i++) { //mix array and class
// incrementally add 10 pixels to y so the initially lines start on top of each other
walkers[i] = new Walker(y + (i * 10));
}
}
function draw() {
for (let i = 0; i < walkers.length; i++) { // consider the array length
// walkers, not walker
walkers[i].acceleration(); // call the class and it's function
walkers[i].velocity();
walkers[i].update();
walkers[i].display();
}
}
class Walker {
constructor(y) { //divide the class in multiple function
this.y = y;
// remember to init all variables you plan to use
this.xoff = 0; //changed to go back inside of the walker class
this.yoff = 0; //changed to go back inside of the walker class
this.x = 0;
}
acceleration() {
this.accX = 0.1;
this.accY = 0.1;
this.px = this.x;
this.py = this.y;
}
velocity() {
this.velocityY = random(-20, 20);
this.velocityX = 5;
}
update() {
this.x = this.x + this.accX + this.velocityX * noise(this.xoff);
this.y = this.y + this.accY + this.velocityY * noise(this.yoff);
}
display() {
// what were you trying ?
//for (this.y < 200; this.y > 400; this.y + 20) {
line(this.x, this.y, this.px, this.py);
//}
this.xoff = this.xoff + 1;
this.yoff = this.yoff + 1;
this.px = this.x;
this.py = this.y;
// reset x, y to 0
if(this.x > width){
this.x = 0;
}
if(this.y > height){
this.y = 0;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

It will definitely be easier to do it using a class. Make different functions inside the class which are responsible for update, movement, etc. You can make a display function too in which you can set the y co-ordinate using a For loop. In that way, it will become very easy to keep changing the y co-ordinate.
If you want to display multiple lines at once, do all of the above and also use an array to store the y co-ordinates and then display them in the For loop.
Do let me know if you need help with the actual code.

How to fix performance lag in canvas html5?

I am building a project where a user can type word in the input text and with the input value, canvas draws the particles onto the text. When the mouse hovers over the particles pushed back and comes back(core animation)
However, the performance is just terrible, it's way too slow and I have been looking up online and found stuff like frame rate, display ratio, getImageData, putImageData, new Uint32Array(), bitwise operator etc but after hours of trying different things I noticed I wasn't making any progress rather got stuck deeper
My codes are below, and if anyone can tell me where I should go about fixing it would be great.
in index.html
<canvas> </canvas>
<form>
<input class="text" type="text" value="touch me!" placeholder="type your message.."/>
<div class="input-bottom"></div>
</form>
in app.js - I didn't include any code on form submit since it works fine
let canvas = document.querySelector(".canvas")
let canvasContext2d = canvas.getContext("2d")
let canvasWidth = canvas.width = window.innerWidth
let canvasHeight = canvas.height = window.innerHeight
let form = document.querySelector('form')
let text = form.querySelector(".text")
let textMessage = text.value
let mouse = {x: undefined, y: undefined}
function Particle(x, y, r, accX, accY){
this.x = randomIntFromRange(r, canvasWidth-r)
this.y = randomIntFromRange(r, canvasHeight-r)
this.r = r
this.color = "black"
this.velocity = {
x: randomIntFromRange(-10, 10),
y: randomIntFromRange(-10, 10)
}
this.dest = {x : x, y : y}
this.accX = 5;
this.accY = 5;
this.accX = accX;
this.accY = accY;
this.friction = randomNumDecimal(0.94, 0.98)
this.draw = function(){
canvasContext2d.beginPath()
canvasContext2d.arc(this.x, this.y, this.r, 0, Math.PI * 2)
canvasContext2d.fillStyle = "rgb(250, 250, 247)"
canvasContext2d.fill()
canvasContext2d.closePath()
// mouse ball
canvasContext2d.beginPath()
canvasContext2d.arc(mouse.x, mouse.y, 50, 0, Math.PI * 2)
canvasContext2d.fill()
canvasContext2d.closePath()
}
this.update = function(){
this.draw()
if(this.x + this.r > canvasWidth || this.x - this.r < 0){
this.velocity.x = -this.velocity.x
}
if(this.y + this.r > canvasHeight || this.y - this.r < 0){
this.velocity.y = -this.velocity.y
}
this.accX = (this.dest.x - this.x) / 300;
this.accY = (this.dest.y - this.y) / 300;
this.velocity.x += this.accX;
this.velocity.y += this.accY;
this.velocity.x *= this.friction;
this.velocity.y *= this.friction;
this.x += this.velocity.x;
this.y += this.velocity.y;
if(dist(this.x, this.y, mouse.x, mouse.y) < 70){
this.accX = (this.x - mouse.x) / 30;
this.accY = (this.y - mouse.y) / 30;
this.velocity.x += this.accX;
this.velocity.y += this.accY;
}
}
}
let particles;
function init(){
particles = []
canvasContext2d.font = `bold ${canvasWidth/10}px sans-serif`;
canvasContext2d.textAlign = "center"
canvasContext2d.fillText(textMessage, canvasWidth/2, canvasHeight/2)
let imgData = canvasContext2d.getImageData(0, 0, canvasWidth, canvasHeight)
let data = imgData.data
for(let i = 0; i < canvasWidth; i += 4){
for(let j = 0; j < canvasHeight; j += 4){
if(data[((canvasWidth * j + i) * 4) + 3]){
let x = i + randomNumDecimal(0, 3)
let y = j + randomNumDecimal(0, 3)
let r = randomNumDecimal(1, 1.5)
let accX = randomNumDecimal(-3, 0.2)
let accY = randomNumDecimal(-3, 0.2)
particles.push(new Particle(x, y, r, accX, accY))
}
}
}
}
function animate(){
canvasContext2d.clearRect(0, 0, canvasWidth, canvasHeight)
for(let i = 0; i < particles.length; i++){
particles[i].update()
}
requestAnimationFrame(animate)
}
init()
animate()

First you can consider reducing how much total work is going on for a full screen's number of pixels, for instance:
reduce the canvas size (you can consider using CSS transform: scale to scale it back up if you must),
reduce the number of particles,
use a less expensive/less accurate distance operation like just checking horizontal distance and vertical distance between two objects,
use integer values instead of floats (drawing to canvas with floats is more expensive)
consider using fillRect instead of drawing arcs. (At such a small size it won't make much of a difference visually, but these are generally less expensive to draw- you may want to test if it makes much of a difference),
even consider reducing how often you redraw the canvas (adding a setTimeout to wrap your requestAnimationFrame and increasing the delay between frames (requestAnimationFrame is generally about 17ms))
And some more small optimizations in the code:
store particles.length in a variable after they are created so that you don't calculation particles.length on every for loop iteration in your animate function. But millions of calculations minus this 2048 isn't going to make much of a difference.
only set the context fillStyle once. You never change this color, so why set it on every draw?
remove the closePath() lines. They do nothing here.
draw the particles onto an offscreen "buffer" canvas, and draw that canvas to the onscreen one only after all the particles have been drawn to it. This can be done with a normal <canvas> object, but depending on what browser you are working with, you can also look into OffscreenCanvas. Basic example would look something like this:
var numParticles;
// Inside init(), after creating all the Particle instances
numParticles = particles.length;
function animate(){
// Note: if offscreen canvas has background color drawn, this line is unnecessary
canvasContext2d.clearRect(0, 0, canvasWidth, canvasHeight)
for(let i = 0; i < numParticles; i++){
particles[i].update() // remove .draw() from .update() method
particles[i].drawToBuffer(); // some new method drawing to buffer canvas
}
drawBufferToScreen(); // some new method drawing image from buffer to onscreen canvas
requestAnimationFrame(animate)
}

Hit detection algorithm not working, unsure why not. (Javascript/Processing.js)

I'm new to programming games (and programming in general). I have previously made a "Flappy Bird" clone and a few others and I used the hit detection algorithm as provided by the Mozilla Developer Network here.
I am now trying to recreate "Pong" but, for whatever reason, its not working in my current code and I'm completely clueless as to why not. I want the ball to hit the "paddle" and then go back the way it came, but right now it ghosts through the paddle.
I'm using the Processing.js library but it should be apparent to anyone (familiar with it or not) what my code is trying to achieve. The draw() function gets called frequently by processing.js.
The code in action (but not working as expected) can be found here
var PADDLE_WIDTH = 10;
var PADDLE_HEIGHT = 75;
var PADDLE_X = 10;
var Player = function(y) {
this.x = PADDLE_X;
this.y = mouseY;
this.score = 0;
this.width = PADDLE_WIDTH;
this.height = PADDLE_HEIGHT;
};
Player.prototype.drawPlayer = function() {
rect(10,mouseY, this.width, this.height);
};
var Ball = function(x,y) {
this.x = x;
this.y = y;
this.speed = 4;
this.width = 10;
this.height = 10;
};
Ball.prototype.drawBall = function() {
rect(this.x, this.y, this.width, this.height);
};
Ball.prototype.onHit = function() {
if(this.y <= 0 || this.y >= height) {
this.speed *= -1;
} else if(this.x <= 0 || this.x >= width){
this.speed *= -1;
// HIT DETECTION UNDERNEATH
} else if (player.x < this.x + this.width &&
player.x + player.width > this.x &&
player.y < this.y + this.height &&
player.height + player.y > this.y){
this.speed *= -1;
}
};
var player = new Player();
var ball = new Ball(width/2, height/2);
draw = function() {
background(0);
fill(250, 250, 250);
ball.x -= ball.speed;
player.drawPlayer();
ball.drawBall();
ball.onHit();
};

In the drawPlayer method you draw player in the (10, mouseY) point, but never update y property of player. It always remains equal to 0. I would recommend you to add update method, which will change player's state and change draw method to render player purely on its state. Something like
Player.prototype.updatePlayer = function() {
this.y = mouseY;
};
Player.prototype.drawPlayer = function() {
rect(this.x , this.y, this.width, this.height);
};
draw = function() {
// ...
player.updatePlayer();
player.drawPlayer();
ball.drawBall();
// ...
};

In drawPlayer you can add the line this.y = mouseY
Player.prototype.drawPlayer = function() {
rect(10,mouseY, this.width, this.height);
this.y = mouseY;
};
Fiddle: http://jsfiddle.net/z0acb8gy/