We Keep Coding

JavaScript Canvas moving and animating color at the same time

My script is animating the changing of the color of the ball. The 1 complete sequence takes 1 second and changes the color from green to blue using gradient. I am trying to add a move() method to move the ball.
However I have a problem where to execute my move() method.
Right now the animation of the ball moving is executed witihin the animation of the color but it shouldn't be. The color should change diffrently and the ball should be moving ininitely. I want the ball to move infinitely and the chaning of the color has to take 1 second like it is now.
Am I doing this right?
<-- Edit - I changed interval to 2000ms, just to visualize the problem better ( the moving of the ball stops but it shouldn't)
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var i = 0;
var ec;
var direction = 0;
var x = 100;
var dx = 10;
var y = 100;
var radius = 100;
function move() {
if(x + radius > window.innerWidth || x - radius < 0) {
dx = -dx;
}
x += dx;
}
function animate() {
c.clearRect(0, 0, innerWidth, innerHeight)
move();
var gradient = c.createLinearGradient(0, 0, 170, 0);
ec = 255 - i;
gradient.addColorStop(1, "rgba(" + 0 + "," + i + "," + ec + ")", 1);
c.fillStyle = gradient;
c.beginPath();
c.arc(x, y, radius, 0, 2 * Math.PI);
c.fill();
console.log(i, ec);
if(i == 255) direction = 1;
if(direction == 1 && i == 0) direction = 2;
if(direction == 0 ) i+=5;
else if(direction == 1 && direction != 2) i -= 5;
if(direction != 2) requestAnimationFrame(animate);
}
setInterval(function draw() {
direction = 0;
animate();
}, 2000);
canvas {
border: 1px solid black;
}
body {
margin: 0;
}
<canvas></canvas>

I got everything working as desired. But it was complicated, is there any way to make it simpler?
Could someone teach me how to use snippet?
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var i = 0;
var ec;
var direction = 0;
var x = 300;
var y = 300;
var radius = 200;
var speed = 5;
var dateDiff;
var date1;
var executedTimer = false;
var executedColor = false;
function draw() {
c.clearRect(0, 0, innerWidth, innerHeight)
c.beginPath();
c.arc(x, y, radius, 0, 2 * Math.PI);
c.fill();
}
function move() {
if(x + radius > window.innerWidth || x - radius < 0) {
speed = -speed;
}
x += speed;
}
function color() {
var gradient = c.createLinearGradient(0, 0, 170, 0);
ec = 255 - i;
gradient.addColorStop(1, "rgba(" + 0 + "," + i + "," + ec + ")", 1);
c.fillStyle = gradient;
//console.log(i, ec);
if(i == 255) direction = 1;
if(direction == 1 && i == 0) direction = 2;
if(direction == 0 ) i += 5;
else if(direction == 1 && direction != 2) i -= 5;
}
function timerStart() {
date1 = new Date();
executedTimer = true;
}
function timerCheck() {
var date2 = new Date();
dateDiff = Math.abs(date1 - date2);
if(dateDiff >= 1000)date1 = date2;
}
function animate() {
draw();
move();
if(executedTimer == false) timerStart();
if(executedColor == false) {
executedColor = true;
color();
}
if(dateDiff < 1000) color();
if(dateDiff >= 1000 && direction == 2) {
i = 0;
direction = 0;
//console.log(dateDiff);
color();
}
timerCheck();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
canvas {
border: 1px solid black;
}
body {
margin: 0;
}
<canvas></canvas>

Treat both the position and the color as two different components, each with its own duration and its update method.
Then start a single animation loop in which you will
update the color component
update the position component
draw the scene
To ensure your animations last the duration you want, use a delta-time, which will let you know where you are relatively to the beginning of the animation.
This avoids issues with monitor using different refresh-rates (simply incrementing a value by a fixed amount will make your objects move twice faster on a 120Hz monitor than on a 60Hz one, generally not what you want), and it also allows to not care about the fact your animation is being paused by the browser when offscreen.
{
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const w = canvas.width = window.innerWidth;
const h = canvas.height = window.innerHeight;
const radius = Math.min( w, h ) / 3;
const color = {
duration: 1000,
update( elapsed ) {
const delta = (elapsed % this.duration) / this.duration;
const direction = (elapsed % (this.duration * 2)) - this.duration;
const val = (direction < 0) ?
255 - (delta * 255) :
delta * 255 ;
this.val = `rgba(0, ${ val }, ${ 255 - val })`;
}
};
const position = {
duration: 3000,
y: h / 2,
update( elapsed ) {
const delta = (elapsed % this.duration) / this.duration;
const direction = (elapsed % (this.duration * 2)) - this.duration;
this.x = direction < 0 ?
delta * w :
w - (delta * w);
}
};
function draw() {
ctx.clearRect( 0, 0, w, h );
ctx.beginPath();
ctx.arc( position.x, position.y, radius, 0, Math.PI *2 );
ctx.fillStyle = color.val;
ctx.fill();
}
// We record the time we started the animation
// We will base our time relative animation on that
const start = performance.now();
function anim( timestamp ) {
const elapsed = timestamp - start;
color.update( elapsed );
position.update( elapsed );
draw();
requestAnimationFrame( anim );
}
requestAnimationFrame( anim );
}
body {
margin: 0;
}
<canvas></canvas>
And of course if you are going to have a lot of such both-directions animations, you could write an helper function to just get the value based on the elapsed time:
{
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const w = canvas.width = window.innerWidth;
const h = canvas.height = window.innerHeight;
const radius = Math.min( w, h ) / 3;
function getValueAtTime( elapsed, duration, max_val ) {
const delta = (elapsed % duration) / duration;
const direction = (elapsed % (duration * 2)) - duration;
const val = delta * max_val;
return direction < 0 ? val : max_val - val;
}
const color = {
duration: 1000,
update( elapsed ) {
const val = getValueAtTime( elapsed, this.duration, 255 );
this.val = `rgba(0, ${ val }, ${ 255 - val })`;
}
};
const position = {
duration: 3000,
y: h / 2,
update( elapsed ) {
this.x = getValueAtTime( elapsed, this.duration, w );
}
};
function draw() {
ctx.clearRect( 0, 0, w, h );
ctx.beginPath();
ctx.arc( position.x, position.y, radius, 0, Math.PI *2 );
ctx.fillStyle = color.val;
ctx.fill();
}
// We record the time we started the animation
// We will base our time relative animation on that
const start = performance.now();
function anim( timestamp ) {
const elapsed = timestamp - start;
color.update( elapsed );
position.update( elapsed );
draw();
requestAnimationFrame( anim );
}
requestAnimationFrame( anim );
}
body {
margin: 0;
}
<canvas></canvas>

Apply random rotation to canvas particles

I'm trying to update an existing particle animation. In this demo, the particles are just lines with different lineWidths with random sizes and rotation as they fall down.
My goal is to replace the lines with a different shape, which looks like the image below keeping everything else as is.
I've already changed the shape, but I'm having a couple issues:
It doesn't rotate anymore like in the original demo link posted above.
Since, I replaced the lines with an image of the shape, I'm also facing performance issues if I increase the particles.
If I randomize the size, it keeps updating the size of the shape constantly without keeping the first random size.
context.drawImage(svg, x, y, 20, 40)
|
v
context.drawImage(svg, x, y, Math.random() * 20, Math.random() * 40)
Could anybody point me in the right direction on I should go about fixing the above. Appreciate any help!
var confetti = {
maxCount: 150, //set max confetti count
speed: 1, //set the particle animation speed
frameInterval: 30, //the confetti animation frame interval in milliseconds
alpha: 1.0, //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
gradient: false, //whether to use gradients for the confetti particles
start: null, //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
stop: null, //call to stop adding confetti
toggle: null, //call to start or stop the confetti animation depending on whether it's already running
pause: null, //call to freeze confetti animation
resume: null, //call to unfreeze confetti animation
togglePause: null, //call to toggle whether the confetti animation is paused
remove: null, //call to stop the confetti animation and remove all confetti immediately
isPaused: null, //call and returns true or false depending on whether the confetti animation is paused
isRunning: null //call and returns true or false depending on whether the animation is running
};
(function() {
confetti.start = startConfetti;
confetti.stop = stopConfetti;
confetti.toggle = toggleConfetti;
confetti.pause = pauseConfetti;
confetti.resume = resumeConfetti;
confetti.togglePause = toggleConfettiPause;
confetti.isPaused = isConfettiPaused;
confetti.remove = removeConfetti;
confetti.isRunning = isConfettiRunning;
var supportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
var colors = ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
var streamingConfetti = false;
var animationTimer = null;
var pause = false;
var lastFrameTime = Date.now();
var particles = [];
var waveAngle = 0;
var context = null;
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function resetParticle(particle, width, height) {
particle.color = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
particle.color2 = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
particle.x = getRandomInt(0, width);
particle.y = getRandomInt(-height / 2, 0);
particle.diameter = Math.random() * 10 + 5;
particle.tilt = Math.random() * 10 - 10;
particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
particle.tiltAngle = Math.random() * Math.PI;
return particle;
}
function toggleConfettiPause() {
if (pause)
resumeConfetti();
else
pauseConfetti();
}
function isConfettiPaused() {
return pause;
}
function pauseConfetti() {
pause = true;
}
function resumeConfetti() {
pause = false;
runAnimation();
}
function runAnimation() {
if (pause)
return;
else if (particles.length === 0) {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
animationTimer = null;
} else {
var now = Date.now();
var delta = now - lastFrameTime;
if (!supportsAnimationFrame || delta > confetti.frameInterval) {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
updateParticles();
drawParticles(context);
lastFrameTime = now - (delta % confetti.frameInterval);
}
animationTimer = requestAnimationFrame(runAnimation);
}
}
function startConfetti(timeout, min, max) {
var width = window.innerWidth;
var height = window.innerHeight;
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, confetti.frameInterval);
};
})();
var canvas = document.getElementById("confetti-canvas");
if (canvas === null) {
canvas = document.createElement("canvas");
canvas.setAttribute("id", "confetti-canvas");
canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
document.body.prepend(canvas);
canvas.width = width;
canvas.height = height;
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}, true);
context = canvas.getContext("2d");
} else if (context === null)
context = canvas.getContext("2d");
var count = confetti.maxCount;
if (min) {
if (max) {
if (min == max)
count = particles.length + max;
else {
if (min > max) {
var temp = min;
min = max;
max = temp;
}
count = particles.length + ((Math.random() * (max - min) + min) | 0);
}
} else
count = particles.length + min;
} else if (max)
count = particles.length + max;
while (particles.length < count)
particles.push(resetParticle({}, width, height));
streamingConfetti = true;
pause = false;
runAnimation();
if (timeout) {
window.setTimeout(stopConfetti, timeout);
}
}
function stopConfetti() {
streamingConfetti = false;
}
function removeConfetti() {
stop();
pause = false;
particles = [];
}
function toggleConfetti() {
if (streamingConfetti)
stopConfetti();
else
startConfetti();
}
function isConfettiRunning() {
return streamingConfetti;
}
function drawParticles(context) {
var particle;
var x, y, x2, y2;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
particleWidth = particle.diameter;
x2 = particle.x + particle.tilt;
x = x2 + particle.diameter / 2;
y = particle.y;
var svg = new Image();
svg.src = 'https://i.postimg.cc/TPBmVXH1/confetti.png';
context.drawImage(svg, x, y, 20, 40)
/*context.beginPath();
context.lineWidth = particle.diameter;
x2 = particle.x + particle.tilt;
x = x2 + particle.diameter / 2;
y2 = particle.y + particle.tilt + particle.diameter / 2;
if (confetti.gradient) {
var gradient = context.createLinearGradient(x, particle.y, x2, y2);
gradient.addColorStop("0", particle.color);
gradient.addColorStop("1.0", particle.color2);
context.strokeStyle = gradient;
} else
context.strokeStyle = particle.color;
context.moveTo(x, particle.y);
context.lineTo(x2, y2);
context.stroke();*/
}
}
function updateParticles() {
var width = window.innerWidth;
var height = window.innerHeight;
var particle;
waveAngle += 0.01;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
if (!streamingConfetti && particle.y < -15)
particle.y = height + 100;
else {
particle.tiltAngle += particle.tiltAngleIncrement;
particle.x += Math.sin(waveAngle) - 0.5;
particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
particle.tilt = Math.sin(particle.tiltAngle) * 15;
}
if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
if (streamingConfetti && particles.length <= confetti.maxCount)
resetParticle(particle, width, height);
else {
particles.splice(i, 1);
i--;
}
}
}
}
startConfetti(5000, 20, 25)
})();
html {
height: 100%;
}
body,
html {
margin: 0;
}
body {
background: black;
}

Ok so here is what I did:
I changed drawParticles to apply the particle.tilt.
I moved the svg variable to the top so it is reused and not loaded multiple times.
I did set the random size in resetParticle so it does not change afterwards.
var confetti = {
maxCount: 150, //set max confetti count
speed: 1, //set the particle animation speed
frameInterval: 30, //the confetti animation frame interval in milliseconds
alpha: 1.0, //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
gradient: false, //whether to use gradients for the confetti particles
start: null, //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
stop: null, //call to stop adding confetti
toggle: null, //call to start or stop the confetti animation depending on whether it's already running
pause: null, //call to freeze confetti animation
resume: null, //call to unfreeze confetti animation
togglePause: null, //call to toggle whether the confetti animation is paused
remove: null, //call to stop the confetti animation and remove all confetti immediately
isPaused: null, //call and returns true or false depending on whether the confetti animation is paused
isRunning: null //call and returns true or false depending on whether the animation is running
};
(function () {
confetti.start = startConfetti;
confetti.stop = stopConfetti;
confetti.toggle = toggleConfetti;
confetti.pause = pauseConfetti;
confetti.resume = resumeConfetti;
confetti.togglePause = toggleConfettiPause;
confetti.isPaused = isConfettiPaused;
confetti.remove = removeConfetti;
confetti.isRunning = isConfettiRunning;
var supportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
var colors = ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
var streamingConfetti = false;
var animationTimer = null;
var pause = false;
var lastFrameTime = Date.now();
var particles = [];
var waveAngle = 0;
var context = null;
var sizes = [];
var svg = new Image();
svg.src = 'https://i.postimg.cc/TPBmVXH1/confetti.png';
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function resetParticle(particle, width, height) {
particle.color = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
particle.color2 = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
particle.x = getRandomInt(0, width);
particle.y = getRandomInt(-height / 2, 0);
particle.diameter = Math.random() * 10 + 5;
particle.tilt = Math.random() * 10 - 10;
particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
particle.tiltAngle = Math.random() * Math.PI;
particle.width = Math.random() * 20
particle.height = Math.random() * 40
return particle;
}
function toggleConfettiPause() {
if (pause)
resumeConfetti();
else
pauseConfetti();
}
function isConfettiPaused() {
return pause;
}
function pauseConfetti() {
pause = true;
}
function resumeConfetti() {
pause = false;
runAnimation();
}
function runAnimation() {
if (pause)
return;
else if (particles.length === 0) {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
animationTimer = null;
} else {
var now = Date.now();
var delta = now - lastFrameTime;
if (!supportsAnimationFrame || delta > confetti.frameInterval) {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
updateParticles();
drawParticles(context);
lastFrameTime = now - (delta % confetti.frameInterval);
}
animationTimer = requestAnimationFrame(runAnimation);
}
}
function startConfetti(timeout, min, max) {
var width = window.innerWidth;
var height = window.innerHeight;
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, confetti.frameInterval);
};
})();
var canvas = document.getElementById("confetti-canvas");
if (canvas === null) {
canvas = document.createElement("canvas");
canvas.setAttribute("id", "confetti-canvas");
canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
document.body.prepend(canvas);
canvas.width = width;
canvas.height = height;
window.addEventListener("resize", function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}, true);
context = canvas.getContext("2d");
} else if (context === null)
context = canvas.getContext("2d");
var count = confetti.maxCount;
if (min) {
if (max) {
if (min == max)
count = particles.length + max;
else {
if (min > max) {
var temp = min;
min = max;
max = temp;
}
count = particles.length + ((Math.random() * (max - min) + min) | 0);
}
} else
count = particles.length + min;
} else if (max)
count = particles.length + max;
while (particles.length < count)
particles.push(resetParticle({}, width, height));
streamingConfetti = true;
pause = false;
runAnimation();
if (timeout) {
window.setTimeout(stopConfetti, timeout);
}
}
function stopConfetti() {
streamingConfetti = false;
}
function removeConfetti() {
stop();
pause = false;
particles = [];
}
function toggleConfetti() {
if (streamingConfetti)
stopConfetti();
else
startConfetti();
}
function isConfettiRunning() {
return streamingConfetti;
}
function drawParticles(context) {
var particle;
var x, y, x2, y2;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
particleWidth = particle.diameter;
x2 = particle.x + particle.tilt;
x = x2 + particle.diameter / 2;
y = particle.y;
context.save();
context.translate(x, y);
context.rotate(particle.tilt / 180 * Math.PI);
context.translate(-x, -y);
context.drawImage(svg, x, y, particle.width, particle.height);
context.restore();
/*context.beginPath();
context.lineWidth = particle.diameter;
x2 = particle.x + particle.tilt;
x = x2 + particle.diameter / 2;
y2 = particle.y + particle.tilt + particle.diameter / 2;
if (confetti.gradient) {
var gradient = context.createLinearGradient(x, particle.y, x2, y2);
gradient.addColorStop("0", particle.color);
gradient.addColorStop("1.0", particle.color2);
context.strokeStyle = gradient;
} else
context.strokeStyle = particle.color;
context.moveTo(x, particle.y);
context.lineTo(x2, y2);
context.stroke();*/
}
}
function updateParticles() {
var width = window.innerWidth;
var height = window.innerHeight;
var particle;
waveAngle += 0.01;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
if (!streamingConfetti && particle.y < -15)
particle.y = height + 100;
else {
particle.tiltAngle += particle.tiltAngleIncrement;
particle.x += Math.sin(waveAngle) - 0.5;
particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
particle.tilt = Math.sin(particle.tiltAngle) * 15;
}
if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
if (streamingConfetti && particles.length <= confetti.maxCount)
resetParticle(particle, width, height);
else {
particles.splice(i, 1);
i--;
}
}
}
}
startConfetti(5000, 20, 25)
})();
html {
height: 100%;
}
body, html {
margin: 0;
}
body {
background: black;
}

How can I stop this canvas animation drawing new particles after 5 seconds and restart it from zero particles on click?

I would like to stop drawing new particles after 5 seconds and restart drawing on click anywhere.
Here is the code https://codepen.io/Jeremboo/pen/ENVaMY for the animation.
Right now it keeps on drawing until you click on the screen to restart it again.
What I want is to stop drawing after 5 seconds and then on click anywhere restart it from zero particles. I tried the following to stop but I am not able to start it again.
this is the js code
/**/ const canvas = document.createElement('canvas');
/**/ const context = canvas.getContext('2d');
/**/ let windowWidth = canvas.width = window.innerWidth;
/**/ let windowHeight = canvas.height = window.innerHeight;
/**/ canvas.id = 'canvas';
/**/ document.body.insertBefore(canvas, document.body.firstChild);
/**/ /* ---- CORE END ---- */
/* ---- CREATING ZONE ---- */
/* ---- SETTINGS ---- */
const numberParticlesStart = 1000;
const particleSpeed = 0.3;
const velocity = 0.9;
const circleWidth = 50;
/* ---- INIT ---- */
let particles = [];
const getRandomFloat = (min, max) => (Math.random() * (max - min) + min);
/* ---- Particle ---- */
function Particle (x, y) {
this.x = x;
this.y = y;
this.vel = {
x : getRandomFloat(-20, 20)/100,
y : getRandomFloat(-20, 20)/100,
min : getRandomFloat(2, 10),
max : getRandomFloat(10, 100)/10
}
this.color = 'rgba(255, 255, 255, 0.05)';
}
Particle.prototype.render = function() {
context.beginPath();
context.fillStyle = this.color;
context.arc(this.x, this.y, 1, 0, Math.PI * 2);
context.fill();
};
Particle.prototype.update = function() {
const forceDirection = {
x: getRandomFloat(-1, 1),
y: getRandomFloat(-1, 1),
};
if (Math.abs(this.vel.x + forceDirection.x) < this.vel.max) {
this.vel.x += forceDirection.x;
}
if (Math.abs(this.vel.y + forceDirection.y) < this.vel.max) {
this.vel.y += forceDirection.y;
}
this.x += this.vel.x * particleSpeed;
this.y += this.vel.y * particleSpeed;
if (Math.abs(this.vel.x) > this.vel.min) {
this.vel.x *= velocity;
}
if (Math.abs(this.vel.y) > this.vel.min) {
this.vel.y *= velocity;
}
this.testBorder();
};
Particle.prototype.testBorder = function() {
if (this.x > windowWidth) {
this.setPosition(this.x, 'x');
} else if (this.x < 0) {
this.setPosition(windowWidth, 'x');
}
if (this.y > windowHeight) {
this.setPosition(this.y, 'y');
} else if (this.y < 0) {
this.setPosition(windowHeight, 'y');
}
};
Particle.prototype.setPosition = function(pos, coor) {
if (coor === 'x') {
this.x = pos;
} else if (coor === 'y') {
this.y = pos;
}
};
/* ---- Functions ----*/
function loop() {
let i;
const length = particles.length;
for (i = 0; i < length; i++) {
particles[i].update();
particles[i].render();
}
requestAnimationFrame(loop);
}
/* ---- START ---- */
function init() {
let i;
for (i = 0; i < numberParticlesStart; i++) {
const angle = Math.random() * 360;
particles.push(new Particle(
windowWidth * 0.5 + (Math.cos(angle) * circleWidth),
windowHeight * 0.5 - (Math.sin(angle) * circleWidth),
));
}
}
init();
window.onresize = () => {
windowWidth = canvas.width = window.innerWidth;
windowHeight = canvas.height = window.innerHeight;
particles = [];
context.clearRect(0,0, windowWidth, windowHeight);
init();
}
window.addEventListener('click', () => {
particles = [];
context.clearRect(0,0, windowWidth, windowHeight);
init();
});
loop();
i replaced the function loop() with this to stop it after 5 seconds -
function loop(stp) {
let i;
const length = particles.length;
for (i = 0; i < length; i++) {
particles[i].update();
particles[i].render();
}
if (stp > 5000) return;
requestAnimationFrame(loop);
}

Try to rely on system clock, as setTimeout and setInterval are not accurate
let start;
function loop(startTime) {
let i;
if(startTime){
// Set the current time in milliseconds from 1st of jenuary 1970
start = new Date().getTime();
}
const length = particles.length;
for (i = 0; i < length; i++) {
particles[i].update();
particles[i].render();
}
// Comparison from current dateTime with the stored one
// as setInterval and setTimeout are not accurate
if (start - (new Date().getTime() >= 5000) return;
requestAnimationFrame(loop);
}
loop(true);

How do you make multiple rectangles in js with on obj? And how do you make them on different x and y axises?

this is my js
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var keys =[];
var width = 1575,
height = 700,
speed = 10,
score1 = 0,
NUMFOOD = 10,
running = true,
i = 0;
var requestAnimFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var randomXSpawn = Math.random() * (width - 8);
var randomYSpawn = Math.random() * (height - 8);
function gameObj(x,y,width,height) {
this.x=x;
this.y=y;
this.width=width;
this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);
var food = new gameObj(randomXSpawn,randomYSpawn,3,3);
window.addEventListener("keydown", function(e){
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
delete keys[e.keyCode];
}, false);
/*
keys
up-38
down-40
right-39
left-37
w-87
s-83
a-65
d-68
y-89
h-72
g-71
j-74
5-101
2-98
1-97
3-99
*/
function game(){
update();
render();
}
function update(){
if(keys[87]) player1.y-=speed;
if(keys[83]) player1.y+=speed;
if(keys[65]) player1.x-=speed;
if(keys[68]) player1.x+=speed;
if(player1.x <0) player1.x=0;
if(player1.y <0) player1.y=0;
if(player1.x >= width - player1.width) player1.x = width - player1.width;
if(player1.y >= height - player1.height) player1.y = height - player1.height;
if(collision(player1, food)){
playerColl1 = true;
process(player1, score1);
console.log("collision");
}
console.log(player1.x, player1.y);
}
function process(player){
score1++;
food.x = Math.random() * (width - 8);
food.y = Math.random() * (height - 8);
if(score1 >= player.width){
player.width++;
player.height++;
if(speed >= 1){
speed = speed - 0.1;
if(speed <= 2){
speed = 2;
}
}
}
}
function render(){
context.clearRect(0,0,width,height);
context.fillStyle = "black";
context.fillRect(width/2 - 1,0,1,height);
context.fillStyle = "blue";
context.fillRect(player1.x, player1.y, player1.width, player1.height);
context.fillStyle = "red";
while(NUMFOOD > i){
food++;
}
context.fillRect(food.x, food.y, food.width, food.height);
context.fillStyle = "black";
context.font = "bold 30px helvetica";
context.fillText(score1, 10,30);
}
function collision(first, second){
return !(first.x > second.x + second.width ||
first.x + first.width < second.x ||
first.y > second.y + second.height||
first.y + first.height < second.y||
second.x > first.x + first.width ||
second.x + second.width < first.x ||
second.y > first.y + first.height||
second.y + second.height < first.y);
}
function animate() {
if (running) {
game();
}
requestAnimFrame(animate);
}
animate();
this is my html
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<canvas id="mainCanvas" height="700" width="1575"></canvas>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
this is my css
#mainCanvas{
outline: 1px solid black;
background-color: #bcbcbc;
}
I dont know why i cant make multiple rectangles. can someone pls help me any help at all is appreciated. I am trying to use the while loop but it wont work. I am trying to make multiple food(red squares) for my player to eat(blue square)

If i understand correctly, you are trying to have multiple food items that the players can collect.
try updating your js with this. I added comments at the places that i modified:
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var keys =[];
var width = 1575,
height = 700,
speed = 10,
score1 = 0,
NUMFOOD = 10,
running = true,
i = 0;
var requestAnimFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function gameObj(x,y,width,height) {
this.x=x;
this.y=y;
this.width=width;
this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);
// create a list of food items
var foods = [];
for (var i=0; i< NUMFOOD; i++){
foods[i]=new gameObj( Math.random() * (width - 8), Math.random() * (height- 8),3,3);
}
window.addEventListener("keydown", function(e){
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
delete keys[e.keyCode];
}, false);
/*
keys
up-38
down-40
right-39
left-37
w-87
s-83
a-65
d-68
y-89
h-72
g-71
j-74
5-101
2-98
1-97
3-99
*/
function game(){
update();
render();
}
function update(){
if(keys[87]) player1.y-=speed;
if(keys[83]) player1.y+=speed;
if(keys[65]) player1.x-=speed;
if(keys[68]) player1.x+=speed;
if(player1.x <0) player1.x=0;
if(player1.y <0) player1.y=0;
if(player1.x >= width - player1.width) player1.x = width - player1.width;
if(player1.y >= height - player1.height) player1.y = height - player1.height;
//loop over list of food and check if any hits
for (var i=0; i< NUMFOOD; i++){
if(collision(player1, foods[i])){
playerColl1 = true;
// pass food object that has been hit to process
process(player1, score1, foods[i]);
console.log("collision");
}
}
console.log(player1.x, player1.y);
}
function process(player, score1, food){
score1++;
food.x = Math.random() * (width - 8);
food.y = Math.random() * (height - 8);
if(score1 >= player.width){
player.width++;
player.height++;
if(speed >= 1){
speed = speed - 0.1;
if(speed <= 2){
speed = 2;
}
}
}
}
function render(){
context.clearRect(0,0,width,height);
context.fillStyle = "black";
context.fillRect(width/2 - 1,0,1,height);
context.fillStyle = "blue";
context.fillRect(player1.x, player1.y, player1.width, player1.height);
context.fillStyle = "red";
// render all food items
for (var i=0; i< NUMFOOD; i++){
context.fillRect(foods[i].x, foods[i].y, foods[i].width, foods[i].height);
}
context.fillStyle = "black";
context.font = "bold 30px helvetica";
context.fillText(score1, 10,30);
}
function collision(first, second){
return !(first.x > second.x + second.width ||
first.x + first.width < second.x ||
first.y > second.y + second.height||
first.y + first.height < second.y||
second.x > first.x + first.width ||
second.x + second.width < first.x ||
second.y > first.y + first.height||
second.y + second.height < first.y);
}
function animate() {
if (running) {
game();
}
requestAnimFrame(animate);
}
animate();

How to remove canvas background and display full background image

I am following this tutorial and trying to implement it on my website. I am struggling to remove the 'Black' background to show the full background image with the stars.
Here's jsFiddle: jFiddle
Here's the screen shot below.
Here's the jQuery for your inspection:
width = window.innerWidth,
height = 300;
// Add 2 shooting stars that just cycle.
entities.push(new ShootingStar());
entities.push(new ShootingStar());
//animate background
function animate() {
bgCtx.fillStyle = "black";
bgCtx.fillRect(0, 0, width, height);
bgCtx.fillStyle = '#fff';
bgCtx.strokeStyle = "#fff";
var entLen = entities.length;
while (entLen--) {
entities[entLen].update();
}
requestAnimationFrame(animate);
}
animate();
Any help would be great! thanks :)

In the animate()function, replace
bgCtx.fillStyle = "black";
bgCtx.fillRect(0, 0, width, height);
with
bgCtx.fillStyle = "rgba(0,0,0,0)";
bgCtx.clearRect(0, 0, width, height);
and remove this line bgCtx.fillRect(0, 0, width, height);(l80)
http://jsfiddle.net/aernk8kk/13/
(function () {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
window.requestAnimationFrame = requestAnimationFrame;
})();
// Terrain stuff.
var background = document.getElementById("bgCanvas"),
bgCtx = background.getContext("2d"),
width = window.innerWidth,
height = 300;
(height < 400) ? height = 400 : height;
background.width = width;
background.height = height;
function Terrain(options) {
options = options || {};
this.terrain = document.createElement("canvas");
this.terCtx = this.terrain.getContext("2d");
this.scrollDelay = options.scrollDelay || 90;
this.lastScroll = new Date().getTime();
this.terrain.width = width;
this.terrain.height = height;
this.fillStyle = options.fillStyle || "#f30";
this.mHeight = options.mHeight || height;
// generate
this.points = [];
var displacement = options.displacement || 140,
power = Math.pow(2, Math.ceil(Math.log(width) / (Math.log(2))));
// set the start height and end height for the terrain
this.points[0] = this.mHeight;//(this.mHeight - (Math.random() * this.mHeight / 2)) - displacement;
this.points[power] = this.points[0];
// create the rest of the points
for (var i = 1; i < power; i *= 2) {
for (var j = (power / i) / 2; j < power; j += power / i) {
this.points[j] = ((this.points[j - (power / i) / 2] + this.points[j + (power / i) / 2]) / 2) + Math.floor(Math.random() * -displacement + displacement);
}
displacement *= 0.6;
}
document.body.appendChild(this.terrain);
}
Terrain.prototype.update = function () {
// draw the terrain
this.terCtx.clearRect(0, 0, width, height);
this.terCtx.fillStyle = this.fillStyle;
if (new Date().getTime() > this.lastScroll + this.scrollDelay) {
this.lastScroll = new Date().getTime();
this.points.push(this.points.shift());
}
this.terCtx.beginPath();
for (var i = 0; i <= width; i++) {
if (i === 0) {
this.terCtx.moveTo(0, this.points[0]);
} else if (this.points[i] !== undefined) {
this.terCtx.lineTo(i, this.points[i]);
}
}
this.terCtx.lineTo(width, this.terrain.height);
this.terCtx.lineTo(0, this.terrain.height);
this.terCtx.lineTo(0, this.points[0]);
this.terCtx.fill();
}
// Second canvas used for the stars
bgCtx.fillStyle = "rgb(255,255,255)";
// stars
function Star(options) {
this.size = Math.random() * 2;
this.speed = Math.random() * .05;
this.x = options.x;
this.y = options.y;
}
Star.prototype.reset = function () {
this.size = Math.random() * 2;
this.speed = Math.random() * .05;
this.x = width;
this.y = Math.random() * height;
}
Star.prototype.update = function () {
this.x -= this.speed;
if (this.x < 0) {
this.reset();
} else {
bgCtx.fillRect(this.x, this.y, this.size, this.size);
}
}
function ShootingStar() {
this.reset();
}
ShootingStar.prototype.reset = function () {
this.x = Math.random() * width;
this.y = 0;
this.len = (Math.random() * 80) + 10;
this.speed = (Math.random() * 10) + 6;
this.size = (Math.random() * 1) + 0.1;
// this is used so the shooting stars arent constant
this.waitTime = new Date().getTime() + (Math.random() * 3000) + 500;
this.active = false;
}
ShootingStar.prototype.update = function () {
if (this.active) {
this.x -= this.speed;
this.y += this.speed;
if (this.x < 0 || this.y >= height) {
this.reset();
} else {
bgCtx.lineWidth = this.size;
bgCtx.beginPath();
bgCtx.moveTo(this.x, this.y);
bgCtx.lineTo(this.x + this.len, this.y - this.len);
bgCtx.stroke();
}
} else {
if (this.waitTime < new Date().getTime()) {
this.active = true;
}
}
}
var entities = [];
// init the stars
for (var i = 0; i < height; i++) {
entities.push(new Star({
x: Math.random() * width,
y: Math.random() * height
}));
}
// Add 2 shooting stars that just cycle.
entities.push(new ShootingStar());
entities.push(new ShootingStar());
//animate background
function animate() {
bgCtx.fillStyle = "rgba(0,0,0,0)";
bgCtx.clearRect(0, 0, width, height);
bgCtx.fillStyle = '#fff';
bgCtx.strokeStyle = "#fff";
var entLen = entities.length;
while (entLen--) {
entities[entLen].update();
}
requestAnimationFrame(animate);
}
animate();
body, html {
color: #fff;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: url(
http://cdn1.dottech.org/wp-content/uploads/2013/08/moon_clear_sky_wallpaper_2560x1440.jpg
) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
canvas {
position:absolute;
top:0;
left:0
}
<canvas id="bgCanvas"></canvas>
check clearRect