I saw this video, and tried to do the same in a canvas
Here's the code (without size increment)
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = parseInt(window.innerWidth, 10);
canvas.height = parseInt(window.innerHeight, 10);
let x = 0;
let y = 0;
let size = 50;
let dx = 5;
let dy = 5;
let hue = 0;
function animate()
{
x += dx;
y += dy;
hue = (hue + 10) % 360;
if(x <= 0 || x >= canvas.width - size)
{
dx = -dx;
}
if(y <= 0 || y >= canvas.height - size)
{
dy = -dy;
}
ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
ctx.fillRect(x, y, size, size);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.strokeRect(x, y, size, size);
window.requestAnimationFrame(animate);
}
animate();
<canvas id="canvas"></canvas>
It's working fine, but when I add the increase part then the square gets stuck on the edge and increases exponentially:
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = parseInt(window.innerWidth, 10);
canvas.height = parseInt(window.innerHeight, 10);
let x = 0;
let y = 0;
let size = 50;
let dx = 5;
let dy = 5;
let hue = 0;
function animate()
{
x += dx;
y += dy;
hue = (hue + 10) % 360;
if(x <= 0 || x >= canvas.width - size)
{
dx = -dx;
size = Math.ceil(size * 1.10);
}
if(y <= 0 || y >= canvas.height - size)
{
dy = -dy;
size = Math.ceil(size * 1.10);
}
ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
ctx.fillRect(x, y, size, size);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.strokeRect(x, y, size, size);
window.requestAnimationFrame(animate);
}
animate();
<canvas id="canvas"></canvas>
Depending on size increment, it get stuck at different edges and at different number of bounces.
I think I have to evaluate something more in the edge detection, but I can figure it out.
This is a rather classical problem. The following part of your code
x += dx;
y += dy;
merely updates the square's position no matter what. That means it does neither take into account the future position of the square nor it's size - which increases over time.
The fix is quite simple: before updating the square's on-screen position, check if the square will move outside at it's current pace. If so, position it at the edge of the border and reverse the speed.
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = parseInt(window.innerWidth, 10);
canvas.height = parseInt(window.innerHeight, 10);
let x = 0;
let y = 0;
let size = 50;
let dx = 5;
let dy = 5;
let hue = 0;
function animate() {
if (dx < 0) {
if (x + dx < 0) {
x = 0;
dx = -dx;
size = Math.ceil(size * 1.02);
} else {
x += dx;
}
} else {
if (x + size + dx > canvas.width) {
x = canvas.width - size;
dx = -dx;
size = Math.ceil(size * 1.02);
} else {
x += dx;
}
}
if (dy < 0) {
if (y + dy < 0) {
y = 0;
dy = -dy;
size = Math.ceil(size * 1.02);
} else {
y += dy;
}
} else {
if (y + size + dy > canvas.height) {
y = canvas.height - size;
dy = -dy;
size = Math.ceil(size * 1.02);
} else {
y += dy;
}
}
hue = (hue + 10) % 360;
ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
ctx.fillRect(x, y, size, size);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.strokeRect(x, y, size, size);
window.requestAnimationFrame(animate);
}
animate();
<canvas id="canvas"></canvas>