We Keep Coding

p5.js mouseclick move over Canvas

I am trying to solve a school assignment in p5 JavaScript. I want something to move over the canvas after one mouseclick. But it only moves a little bit and I have to click several times to get it all the way over. What have I done wrong? Shouldn't the loop make it move all the way? Can post the whole code if needed.
function CanvasPressed()
{
if ( mouseX > 0 && mouseX < 638 && mouseY > 0 && mouseY < 100 )
{
Bird.stop();
Bird.play();
for ( let b = 640; b > 0; b--)
{
x = x - 0.05;
}
}

Alright, so you've got a couple misunderstood things, here:
// purely aesthetic but in javascript functions are usually written as (i think) camelCase
// so: canvasPressed() rather than CanvasPressed(), Class-es start with upper case
function CanvasPressed()
{
// you can check for width & height if you want if ( mouseX > 0 && mouseX < width)
if ( mouseX > 0 && mouseX < 638 && mouseY > 0 && mouseY < height )
{
for ( let b = 640; b > 0; b--) // this, in this case, does the same as for(let i = 0; i < width; i ++)
{
x += 0.05
// 0.05 is very little, only a very small part of a pixel
}
// here it moves 0.05 * 640 (0.05 + 0.05 + 0.05 ... )
}
}
javascript naming conventions thingy if you want
and this is how i would make it move through the canvas:
let mouseWasPressed = false;
let x = 20
function draw() {
background(20);
ellipse(x, height / 2, 40)
if(mouseWasPressed) // don't need {} for 1 line after the if()
x ++; // x = x + 1 shortening in javascript
// }
}
function mousePressed(){
mouseWasPressed = true
}
if you don't want the "animation" you could use your previous method, but change the 0.05 to 1:
for(let i = 0; i <= width; i ++) // you don't have to add parentheses for 1 line
x ++; // x = x + 1 just a shortening in javascript
OR just
x = width // or x += width (x = x + width)

Increment to max number and then decrement to minimum

I want to make a Javascript function that will eventually cause a div to animate by updating a calculation as the user scrolls.
My aim is to do this by incrementing a number, initially from 0 up to 20. Once 20 is the value this number needs to be recognised and then the value needs to decrement down from 20 to -20 (For example)
At the moment I have a function that will count up as I scroll down the page and then when I scroll up will count down again but I'm not sure how best to get the values to also update when the numbers reach 20 and -20 as the user scrolls.
let scrollCount = 0;
window.addEventListener("mousewheel", function(e){
if(e.wheelDelta < 0 && scrollCount < 20){
scrollCount++
}
else if(e.wheelDelta > 0 && scrollCount > -20){
scrollCount--
}
let x = scrollCount * window.innerWidth
let y = 30 * window.innerHeight
moveEye(irisLeft, x, y)
moveEye(irisRight, x, y)
console.log(scrollCount)
});

I think using PageOffset would be a better option.
var scrollTop = window.pageYOffset;
This will give you an absolute px value of scroll position. Though it is not in range [-20,20], you can scale it mathematically(min-max scaling).
Scaling Answered Here
Round off scaled values to integers and you're done.

As I said in my comment - this behavior is quire weird as once 20 is reached your div will start trembling/bouncing and will throw your user in a epileptic shock.
let scrollCount = 0;
let direction = 1;
window.addEventListener("mousewheel", function (e) {
if (e.wheelDelta < 0) {
scrollCount += direction
if (scrollCount === 20 || scrollCount === -20) {
direction *= -1
}
}
else if (e.wheelDelta > 0) {
scrollCount -= direction
if (scrollCount === 20 || scrollCount === -20) {
direction *= -1
}
}
let x = scrollCount * window.innerWidth
let y = 30 * window.innerHeight
// moveEye(irisLeft, x, y)
// moveEye(irisRight, x, y)
console.log(scrollCount)
});

Increase speed on start and slow down at end

I have simple function that moves a circle in specific direction:
var rad = (a) => Math.PI / 180 * a;
this.x += Math.cos(rad) * this.throttle();
this.y += Math.sin(rad) * this.throttle();
I am also calculating distance to a target:
var distance = (p1, p2) => Math.sqrt( (p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y) );
this.destination_distance = parseInt(distance( { x: this.x, y: this.y }, { x: x, y: y } ));
I started to work on this.throttle function but i cannot get my head around it.
I wanted to achieve simple thing, when circle starts to move i want to increase speed from min to max by some step and when it is close to destination i want it to start slow down until it reaches min.
This is my current approach:
this.min_speed = 0.1;
this.max_speed = 1.5;
this.current_speed = 0.1;
this.throttle = function() {
if(this.destination_distance > 300) {
this.current_speed += 0.002;
} else {
this.current_speed -= 0.002;
}
if(this.current_speed < this.min_speed) {
this.current_speed = this.min_speed;
}
if(this.current_speed > this.max_speed) {
this.current_speed = this.max_speed;
}
return this.current_speed;
};
This doesnt work, because if the distance is smaller then 300 it doesnt speed up at all its always on min speed, so i suppose it should be somehow related to the distance variable. Maybe someone could help me solve this problem.

You need to calculate the difference between target speed and current speed, then add some specific fraction of that.
this.throttle = function() {
var target_speed = this.destination_distance > 300 ? this.max_speed : this.min_speed;
var diff = target_speed - this.current_speed;
this.current_speed += diff * laziness;
return this.current_speed;
};
laziness is something between 0.0001 and 1; the greater the value the faster the change of velocity.

Your starting speed is your minimum speed, so if the starting distance is <300 the circle will never speed up or slow down. Why not make your starting speed depend on the initial distance? Here's a crude implementation
if (this.destination_distance<300) {
this.current_speed = 1.5; //start fast when in the deceleration zone
} else {
this.current_speed = 0.1; //start slow when in the acceleration zone
}

Why don't you use something like percent of total distance passed? That way you will avoid having hardcoded threshold of 300 and it should work with distances of arbitrary length (with some tweaking of the speeds). Your changed function would look something like this:
this.throttle = function() {
if(this.destination_distance > 0.5 * total_distance) {
this.current_speed += 0.002;
} else {
this.current_speed -= 0.002;
}
if(this.current_speed < this.min_speed) {
this.current_speed = this.min_speed;
}
if(this.current_speed > this.max_speed) {
this.current_speed = this.max_speed;
}
return this.current_speed;
};
Here I consider total_distance to be the distance from the start to the final destination. This way the circle will travel approximately half of the way with increasing speed and the other half with decreasing speed. If you replace 0.5 by let 0.8 then the speed will increase for the first 80% and decrease for the last 20% of the path.

Inconsistent AABB collision detection

I asked this question on gamedev yesterday but nobody has replied.
I'm making a 2d endless jumper as my first game and I'm running into some problems with the one-way collision detection between the player and the platform.
Collisions are detected correctly most of the time but occasionally the player inexplicably falls through the platform.
I suspect that it is ghosting through the platforms but I can't see why and I'm too close to it to be able to identify the source of the problem.
My code:
for (i = 0, len = this._platforms.length; i < len; i++) {
var p = this._platforms[i];
// Get difference between center of player and center of platform
p.proximity = Math.abs(p.x / 2 - player.x / 2) + Math.abs(p.y / 2 - player.y / 2);
if (p.closest()) {
if (p.collision()) {
player.onplatform = true;
player.y = p.y - player_s_right.height;
} else {
player.onplatform = false;
}
}
...
}
It loops through the platform objects, running the collision test only if the current platform is the closest one to the player.
Here are the closest() and collision() checks respectively:
// Return whether platform is the closest one to the player
Platform.prototype.closest = function() {
var minprox = Math.min.apply(Math, platforms._platforms.map(function (obj) {
return obj.proximity;
}));
return this.proximity === minprox;
}
// Collision detection
Platform.prototype.collision = function() {
// offset of 15 pixels to account for player's bandana
var px = player.direction > 0 ? player.x + 15 : player.x,
px2 = player.direction > 0 ? player.x + player_s_right.width : player.x + player_s_right.width - 15,
py = player.y + player_s_left.height,
py2 = player.y + player_s_right.height + player.yvelocity,
platx2 = this.x + platform_s.width,
platy2 = this.y + platform_s.height;
if (((px > this.x && px < platx2) || (px2 > this.x && px2 < platx2)) && (py2 >= this.y && py2 <= platy2) && py <= this.y) {
return true;
}
};
If anyone can shed some light on this I'd really appreciate it.

Calculate relative rotation

I'm working on a simple "parking type" of game where the user is driving around in a car and has to park it a specified spot.
While it was actually working, the only problem is that I need to find out in what direction the car has been parked.
I don't want the user to just randomly park the car, but the car should be facing upwards or downwards.
I tried using this check to see what rotation the car had, but this seems a bit too complex
var relativeRot = this.rotation % 360;
if((this._speed <= 0.02 && this._speed >= -0.02) && ((relativeRot <= 5 && relativeRot >= 355) || (relativeRot >= 175 && relativeRot <= 185) || (relativeRot <= -175 && relativeRot >= -185) || (relativeRot <= -5 && relativeRot >= -355))) {
Would there be an easier way to check this? There should be a small margin of 5 degrees because it doesn't have to be perfect.

You can simplify it a bit by taking modulo 90 degrees:
var relativeRot = this.rotation % 360;
if (Math.abs(this._speed) <= 0.02) {
var cornerRot = (relativeRot + 360) % 90; // should be positive
if (Math.abs(cornerRot - 45) >= 40) {
// consider car parked...
}
}