I have practically no experience in JS (I mostly program in C#). I'm trying to create a random layout of circles (stars) in an html5 canvas and I have them moving at a random x and y velocity. I created a Star class to make many of these objects and manipulate them, but when I call the Update() method, I receive this TypeError:
TypeError: Cannot read property 'Update' of undefined
at animate (file:///F:/Code/Website/main.js:67:20)
at file:///F:/Code/Website/main.js:71:1
Here is the code that is throwing the error:
//Circle object
class Star
{
constructor(X, Y, VX, VY, R)
{
this.x = X;
this.y = Y;
this.vx = VX;
this.vy = VY;
this.r = R;
}
draw() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
c.strokeStyle = "blue";
c.stroke();
};
Update() {
if (this.x + this.r > pageWidth || this.x - this.r < 0) {
this.vx = -this.vx;
}
if (this.y + this.r > pageHeight || this.y - this.r < 0) {
this.vy = -this.vy;
}
//add velocity
this.x += this.vx;
this.y += this.vy;
this.draw();
};
}
for (var i = 0; i < 50; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var vx = Math.random();
var vy = Math.random();
var radius = 30;
let star = new Star(x, y, vx, vy, radius);
starArr.push(star);
}
console.log(starArr);
function animate() {
"use strict";
window.requestAnimationFrame(animate);
c.clearRect(0, 0, pageWidth, pageHeight);
for (var j = 0; j < starArr.length; j++); {
starArr[j].Update();
}
}
animate();
You have a typo at the for loop that calls the Update method: an extra semicolon ;
for (var j = 0; j < starArr.length; j++); {
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
let pageWidth = canvas.width = window.innerWidth;
let pageHeight = canvas.height = window.innerHeight;
let starArr = []
//Circle object
class Star{
constructor(X, Y, VX, VY, R){
this.x = X;
this.y = Y;
this.vx = VX;
this.vy = VY;
this.r = R;
}
draw() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
c.strokeStyle = "blue";
c.stroke();
};
Update() {
if (this.x + this.r > pageWidth || this.x - this.r < 0) {
this.vx = -this.vx;
}
if (this.y + this.r > pageHeight || this.y - this.r < 0) {
this.vy = -this.vy;
}
//add velocity
this.x += this.vx;
this.y += this.vy;
this.draw();
};
}
for (var i = 0; i < 50; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var vx = Math.random();
var vy = Math.random();
var radius = 30;
let star = new Star(x, y, vx, vy, radius);
starArr.push(star);
}
function animate() {
//"use strict";
window.requestAnimationFrame(animate);
c.clearRect(0, 0, pageWidth, pageHeight);
for (var j = 0; j < starArr.length; j++) {
starArr[j].Update();
}
}
animate();
<canvas></canvas>
Related
I have seen that this type of question has already been answered, however every answer is a little vague or has some cross-compatibility issues or is too beyond my understanding.So is there anyone who can give my an up-to-date, full,clear (showing and explaining all the steps involved) answer?I would like not to make the circles grow in size when the mouse is outside the window.I am not using JQuery(featured in many answers).Should I use it?Is there any way to implement this with pure javascript?
Thank you for your help and sorry if my code is a little bit redundant :)
var canvas = document.querySelector("canvas");
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener("mousemove", function(event){
mouse.x = event.x;
mouse.y = event.y;
})
window.addEventListener("resize", function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})
var colorArray = [
"#6CC61D",
"#E05132",
"#278E83",
"#A633D4"
]
function Circle(x,y,dx,dy,radius){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
this.draw = function(){
c.beginPath();
c.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
c.fillStyle = this.color;
c.fill()
}
this.update = function(){
if (this.x + this.radius>window.innerWidth || this.x -this.radius<0){
this.dx = - this.dx;}
if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
this.dy = - this.dy;
}
if (mouse.x - this.x < 50 && mouse.x - this.x > - 50 && mouse.y - this.y < 50 && mouse.y - this.y > - 50 && this.radius<50 ){
this.radius += 1;
}
else if(this.radius>2){
this.radius -= 1;
}
this.x += this.dx;
this.y += this.dy;
this.draw();
}
}
var circleArray = [];
for (var i = 0; i < 600; i++) {
var x = Math.random() * (window.innerWidth - radius * 2) + radius;
var y = Math.random() * (window.innerHeight - radius * 2) + radius;
var dy = (Math.random() - 0.5) * 8;
var dx = (Math.random() - 0.5) * 8;
var radius = 30;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
function animate(){
requestAnimationFrame(animate);
c.clearRect(0,0,window.innerWidth,window.innerHeight);
for (var i = 0;i < circleArray.length;i++){
circleArray[i].update()
}
circle.update();
}
animate();
I am not using JQuery (featured in many answers). Should I use it ?
Is there any way to implement this with pure javascript ?
It's according to your preferences. As JQuery is javascript, if you can do it with JQuery, you can do it with JS only. For what is about "Is it implementable ?", most likely. I will start to format a bit your code to decouple the logic (calculs/updating positions, speed & radius) from the rendering (drawing), it will be easier to operate.
Checking if the mouse is out of window :
You can use the mouseout event to detect when the mouse leave the window
window.addEventListener('mouseout', action);
Avoid the circles to grow in size when the mouse is outside the window :
For the action, set back the mouse.x & mouse.y to undefined
window.addEventListener('mouseout', function(){
mouse.x = undefined;
mouse.y = undefined;
})
and then add 2 more conditions in your Circle update method to only grow the radius if, in addition of the others conditions, mouse.x & mouse.y are defined (so if the mouse is in the window).
if (mouse.x &&
mouse.y &&
Math.abs(mouse.x - this.x) < 50 &&
Math.abs(mouse.y - this.y) < 50 &&
this.radius < 50 ) {
this.radius += 1;
}
Result :
const canvas = document.querySelector("canvas");
const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const mouse = {
x: undefined,
y: undefined
}
window.addEventListener("mousemove", function(event){
mouse.x = event.x;
mouse.y = event.y;
})
window.addEventListener("resize", function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})
window.addEventListener('mouseout', function(){
mouse.x = undefined;
mouse.y = undefined;
})
const colorArray = [
"#6CC61D",
"#E05132",
"#278E83",
"#A633D4"
]
function Circle(x, y, dx, dy, radius){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
this.draw = function(){
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
c.fillStyle = this.color;
c.fill()
}
this.update = function(){
if (this.x + this.radius > window.innerWidth || this.x - this.radius < 0) {
this.dx = - this.dx;
}
if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
this.dy = - this.dy;
}
if ( mouse.x &&
mouse.y &&
Math.abs(mouse.x - this.x) < 50 &&
Math.abs(mouse.y - this.y) < 50 &&
this.radius < 50 ) {
this.radius += 1;
} else if(this.radius > 2) {
this.radius -= 1;
}
this.x += this.dx;
this.y += this.dy;
}
}
const circleArray = [];
for (let i = 0; i < 600; i++) {
const radius = 30;
const x = Math.random() * (window.innerWidth - radius * 2) + radius;
const y = Math.random() * (window.innerHeight - radius * 2) + radius;
const dy = (Math.random() - 0.5) * 8;
const dx = (Math.random() - 0.5) * 8;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
function clearCanvas(){
c.clearRect(0,0,window.innerWidth,window.innerHeight);
}
function update(){
for (let i = 0; i < circleArray.length; i++){
circleArray[i].update()
}
}
function draw(){
for (let i = 0; i < circleArray.length; i++){
circleArray[i].draw()
}
}
function animate(){
requestAnimationFrame(animate);
clearCanvas();
update();
draw();
}
requestAnimationFrame(animate);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</body>
</html>
in the code I am trying to simulate the movement of a ball with velocity in x direction and also gravity in the 2D world. Everything seems to work fine and the ball is bouncing until it reaches the ground then the condition for the collision detection with the walls of that box won't work and the ball rolls out of the screen.
I have shared the full code in this link: https://jsfiddle.net/tahajalili/bhqurw5g/3/
I am quite a newbie in this field, so can anyone help me with this?
but the JavaScript code is like this:
var canvas = document.getElementById('gameScreen');
var ctx = canvas.getContext('2d');
//world
var width = 800;
var heigth = 800;
var gravity = 9.8;
var fps = 1/40;
var e = 0.8;
//Object
function Ball(x, y, velocity, dy, radius, mass, color){
this.x = x;
this.y = y;
this.vy = velocity;
this.vx = velocity;
this.dy = dy;
this.mass = mass;
this.r = radius;
this.color = color;
this.update = function(){
var ay = gravity;
if(this.y + radius > heigth){
this.vy = -this.vy;
this.vy *= e;
}
else if(this.x + this.r > width){
this.vx = -this.vx;
}
else if (this.x - this.r < 0) {
this.vx = -this.vx;
}
else{
this.vy += ay * fps;
}
this.y += this.vy *fps*100;
this.x += this.vx;
this.draw();
}
this.draw = function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.stroke();
ctx.closePath();
}
}
//working functions
function init(){
b = new Ball(30, heigth-500, 7, 1, 30, 0.1, 'red');
}
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0,0,width,heigth);
b.update();
}
init();
animate();
You made your right collision test depend on the floor collision test by using else if.
You probably would have not made that mistake if you had labelled your predicates
this.update = function () {
const floorCollision = this.y + this.r > heigth;
const rightCollision = this.x + this.r > width;
const leftCollision = this.x - this.r < 0
const xCollision = rightCollision || leftCollision;
if (floorCollision) {
this.vy *= -1;
this.vy *= e;
} else {
this.vy += gravity * fps;
}
if (xCollision) {
this.vx *= -1;
}
this.y += this.vy * fps * 100;
this.x += this.vx;
this.draw();
}
I'm struggling with the implementation of a text particle in javascript.
My code is working fine with chromium-based browsers (Chromium: 84) but is unexpectedly slow on firefox (79.0).
I've searched a lot, but still don't find a solution and where the problem is.(This is pretty much linked to this Javascript Animation(Canvas) not working in firefox, Edge but works on Chrome).
Here is my codepen:
https://codepen.io/jgazeau/pen/LYNYPYB
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function getCssVar(v) {
return getComputedStyle(document.documentElement).getPropertyValue(v);
}
let text404 = '404';
let canvas = document.getElementById('scene');
let ch = canvas.height = canvas.getBoundingClientRect().height;
let cw = canvas.width = canvas.getBoundingClientRect().width;
let sceneBackground = getCssVar('--scene-background');
let context = canvas.getContext('2d');
let previousMouseCoord = {x:0, y:0};
let mouseCoord = {x:0, y:0};
let sceneResize = false;
let particlesCount = 0;
let particles = [];
let colors = [
getCssVar('--particle-color-1'),
getCssVar('--particle-color-2'),
getCssVar('--particle-color-3'),
getCssVar('--particle-color-4'),
getCssVar('--particle-color-5')
];
const dpi = 200;
let Particle = function(x, y) {
this.x = getRandomInt(cw);
this.y = getRandomInt(ch);
this.coord = {x:x, y:y};
this.r = Math.min((getRandomInt((cw / dpi)) + 1), 6);
this.vx = (Math.random() - 0.5) * 100;
this.vy = (Math.random() - 0.5) * 100;
this.accX = 0;
this.accY = 0;
this.friction = Math.random() * 0.05 + 0.90;
this.color = colors[Math.floor(Math.random() * 6)];
}
Particle.prototype.render = function(isDisableMouse) {
this.accX = (this.coord.x - this.x) / 100;
this.accY = (this.coord.y - this.y) / 100;
this.vx += this.accX;
this.vy += this.accY;
this.vx *= this.friction;
this.vy *= this.friction;
this.x += this.vx;
this.y += this.vy;
if (!isDisableMouse) {
let a = this.x - mouseCoord.x;
let b = this.y - mouseCoord.y;
var distance = Math.sqrt(a * a + b * b);
if(distance < (cw / 15)) {
this.accX = (this.x - mouseCoord.x) / 100;
this.accY = (this.y - mouseCoord.y) / 100;
this.vx += this.accX;
this.vy += this.accY;
}
}
context.fillStyle = this.color;
context.beginPath();
context.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
context.fill();
context.closePath();
}
function onmouseCoordMove(e) {
mouseCoord.x = e.clientX;
mouseCoord.y = e.clientY;
}
function onTouchMove(e) {
if(e.touches.length > 0 ) {
mouseCoord.x = e.touches[0].clientX;
mouseCoord.y = e.touches[0].clientY;
}
}
function onTouchEnd() {
mouseCoord.x = -9999;
mouseCoord.y = -9999;
}
function initScene() {
ch = canvas.height = canvas.getBoundingClientRect().height;
cw = canvas.width = canvas.getBoundingClientRect().width;
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = 'bold ' + (cw / 5) + 'px sans-serif';
context.fillStyle = sceneBackground;
context.textAlign = 'center';
context.fillText(text404, cw / 2, ch / 2);
let imageData = context.getImageData(0, 0, cw, ch).data;
context.clearRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = 'screen';
particles = [];
for(let y = 0; y < ch; y += Math.round(cw / dpi)) {
for(let x = 0; x < cw; x += Math.round(cw / dpi)) {
if(imageData[((x + y * cw) * 4) + 3] > 128){
particles.push(new Particle(x, y));
}
}
}
particlesCount = particles.length;
}
function renderScene() {
context.clearRect(0, 0, canvas.width, canvas.height);
let isDisableMouse = false;
if ((previousMouseCoord.x === mouseCoord.x) && (previousMouseCoord.x === mouseCoord.x)) {
isDisableMouse = true;
} else {
previousMouseCoord.x = mouseCoord.x;
previousMouseCoord.x = mouseCoord.x;
isDisableMouse = false;
}
for (let i = 0; i < particlesCount; i++) {
particles[i].render(isDisableMouse);
}
requestAnimationFrame(renderScene);
};
document.addEventListener('DOMContentLoaded', function() {
initScene();
renderScene();
window.addEventListener('mousemove', onmouseCoordMove);
window.addEventListener('touchmove', onTouchMove);
window.addEventListener('touchend', onTouchEnd);
window.addEventListener('resize', function() {
if (!sceneResize) {
requestAnimationFrame(function() {
initScene();
sceneResize = false;
});
sceneResize = true;
}
});
});
Can anyone know where this slow issue could come from ?
Thanks a lot for your help.
So I have a simple canvas animation I want to start and stop using a toggle switch. The animation works fine and starts up, but the clearTimeout does not seem to work.
I made sure the variable "timeOut" is defined globally so it should have access to it, that seemed to be the usual advice in past questions similar to this one. Am I make a mistake somewhere else? Tried it on Firefox, Chrome and Chromium.
let timeOut;
function circles() {
let canvas = document.querySelector('canvas');
canvas.width = document.querySelector('canvas').offsetWidth;
canvas.height = document.querySelector('canvas').offsetHeight;
let c = canvas.getContext('2d');
let topRadius = 30;
let colorArray = [
'#ff0000',
'#00ff00',
'#0000ff',
]
let mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(e) {
mouse.x = e.x;
mouse.y = e.y;
})
window.addEventListener('resize', function() {
canvas.width = document.querySelector('canvas').offsetWidth;
canvas.height = document.querySelector('canvas').offsetHeight;
init();
});
function Circle(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dx;
this.radius = radius;
this.minRadius = radius;
this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
this.draw = function() {
if (this.radius < 0) {
this.radius = this.minRadius;
}
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
c.fillStyle = this.color;
c.fill();
}
this.update = function() {
if (this.y + this.radius > innerHeight || this.y - this.radius <= 0) {
this.dy = -this.dy;
}
if (this.x + this.radius > canvas.width|| this.x - this.radius <= 0) {
this.dx = -this.dx;
}
this.x+=this.dx;
this.y+=this.dy;
if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) {
if (this.radius < topRadius) {
this.radius += 1;
}
} else if (this.radius > this.minRadius){
this.radius -= 1;
}
this.draw();
}
}
let circleArray = [];
function init() {
circleArray = [];
for (let i =0; i<50; i++) {
let radius = Math.random() * 10;
let x = Math.random() * (canvas.width - radius*2) + radius;
let y = Math.random() * (canvas.height - radius * 2) + radius;
let dx = (Math.random() - 0.5) * 4;
let dy = (Math.random() - 0.5 )* 4;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0,0, canvas.width, innerHeight);
for(let i=0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
init();
animate();
}
$('#startstop').click(function() {
if(!timeOut) {
timeOut = setTimeout(circles, 1000);
} else {
clearTimeout(timeOut);
timeOut = null;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: flex; justify-content: space-around;">
<canvas style="width: 100px; height: 800px; background: red;"></canvas>
<div id="startstop">toggle</div>
</div>
You were super close to the solution ;)
in the function animate add line #3 (before for loop), that is having this value:
if (!timeOut) return;
Good luck!
This animation is not stopping because you call clearTimeout on your setTimeout but that only runs once. Your issue is further into the animate function. This relatively loops the requestAnimationFrame. You can store this as a request and then cancelAnimationFrame
I'm populating the canvas with arcs at random position but now I want them to move to the center of the canvas, but they just jump to the center of the canvas and not slowly moving to the center.
The road so far
<canvas id="myCanvas"></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var c = myCanvas.getContext("2d");
myCanvas.style.backgroundColor = "#000";
myCanvas.width = 600;
myCanvas.height = 600;
var myArr = [];
var firstCircle;
function Circledraw(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, Math.PI * 2);
c.fillStyle = "#fff";
c.fill();
}
this.update = function() {
this.x = myCanvas.clientWidth/2;
this.y = myCanvas.clientHeight/2;
}
}
for(var i =0; i < 10; i++){
var x = Math.random() * myCanvas.clientWidth;
var y = Math.random() * myCanvas.clientHeight;
var r = 20;
firstCircle = new Circledraw(x, y, 20);
firstCircle.draw();
myArr.push(firstCircle);
}
setInterval(circleFall, 1000);
function circleFall() {
c.clearRect(0,0, myCanvas.clientWidth, myCanvas.clientHeight);
for(var z =0; z < myArr.length; z++){
myArr[z].update();
firstCircle.draw();
}
}
</script>
How do i fix this??
EDIT:
<script>
var canvas = document.getElementById("myCanvas"); var c = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;
canvas.style.backgroundColor = "#e74c3c";
function Vectors(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
var centerX = canvas.width/2;
var centerY = canvas.height/2;
var diffX = centerX - this.x;
var diffY = centerY - this.y;
var angle = Math.atan(diffY, diffX);
var speed = 1;
var vector = {
x: Math.cos(angle) * speed,
y: Math.sin(angle) * speed
}
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, Math.PI * 2);
c.fillStyle = '#fff';
c.fill();
}
this.update = function() {
this.x += vector.x;
this.y += vector.y;
}
}
var newCircle = new Vectors(90, 100, 10);
function animate() {
window.requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);
newCircle.update();
newCircle.draw();
}
animate();
The first arc is placed with co-ordinates rather than random position but it's not moving towards the center.
The myCanvas.clientWidth/2 and myCanvas.clientHeight/2 will always return the same result, in this case the center point of the canvas.
A better approach is to use a vector based on the angle between the original point and center - something like:
var diffX = myCanvas.width / 2 - this.x,
diffY = myCanvas.height / 2 - this.y,
angle = Math.atan2(diffY, diffX),
speed = 1;
var vector = {
x: Math.cos(angle) * speed,
y: Math.sin(angle) * speed
};
Then in the update method add the vector to the position:
this.update = function() {
// todo add some checks here to see if it's close enough to center
this.x += vector.x;
this.y += vector.y;
}
Combine this with requestAnimationFrame() instead of using setInterval() will make the animation silk smooth as well.
var myCanvas = document.getElementById("myCanvas");
var c = myCanvas.getContext("2d");
myCanvas.style.backgroundColor = "#000";
myCanvas.width = 600;
myCanvas.height = 600;
var myArr = [];
var firstCircle;
function Circledraw(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
var cx = myCanvas.width/2,
cy = myCanvas.height/2,
diffX = cx - this.x,
diffY = cy - this.y,
angle = Math.atan2(diffY, diffX),
speed = 1;
var tolerance = 2;
var vector = {
x: Math.cos(angle) * speed,
y: Math.sin(angle) * speed
};
this.update = function() {
if (!(this.x > cx - tolerance && this.x < cx + tolerance &&
this.y > cy - tolerance && this.y < cy + tolerance)) {
this.x += vector.x;
this.y += vector.y;
}
else { /* this can be used to detect finished action */ }
}
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, Math.PI * 2);
c.fillStyle = "#fff";
c.fill();
}
}
for(var i =0; i < 10; i++){
var x = Math.random() * myCanvas.width;
var y = Math.random() * myCanvas.height;
var r = 20;
firstCircle = new Circledraw(x, y, 20);
firstCircle.draw();
myArr.push(firstCircle);
}
(function circleFall() {
c.clearRect(0,0, myCanvas.clientWidth, myCanvas.clientHeight);
for(var z =0; z < myArr.length; z++){
myArr[z].update();
myArr[z].draw(); // make sure to draw th current circle
}
requestAnimationFrame(circleFall);
})();
<canvas id="myCanvas"></canvas>
A different approach is to use linear interpolation which allows the dots to finish in center at the same time:
var myCanvas = document.getElementById("myCanvas");
var c = myCanvas.getContext("2d");
myCanvas.style.backgroundColor = "#000";
myCanvas.width = 600;
myCanvas.height = 600;
var myArr = [];
var firstCircle;
function Circledraw(x, y, r, step) {
var startX, startY;
var cx = myCanvas.width / 2;
var cy = myCanvas.height / 2;
this.x = startX = x;
this.y = startY = y;
this.r = r;
this.t = 0;
this.step = step; // since we work with normalized values, this tend to be small
function lerp(v1, v2, t) { // linear interpolation
return v1 + (v2 - v1) * t; // t = [0.0, 1.0] 0 = v1, 1 = v2
}
this.update = function() {
if (this.t <= 1) {
this.x = lerp(startX, cx, this.t); // set abs. position based on t
this.y = lerp(startY, cy, this.t);
this.t += this.step; // increase step for t
}
else {
/* this can be used to detect finished action, for example resetting pos */
this.x = startX = Math.random() * myCanvas.width;
this.y = startY = Math.random() * myCanvas.height;
this.t = 0;
}
}
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, Math.PI * 2);
c.fillStyle = "#fff";
c.fill();
}
}
for(var i =0; i < 10; i++){
var x = Math.random() * myCanvas.width;
var y = Math.random() * myCanvas.height;
var r = 20;
firstCircle = new Circledraw(x, y, 20, Math.random() * 0.04 + 0.005);
firstCircle.draw();
myArr.push(firstCircle);
}
(function circleFall() {
c.clearRect(0,0, myCanvas.clientWidth, myCanvas.clientHeight);
for(var z =0; z < myArr.length; z++){
myArr[z].update();
myArr[z].draw(); // make sure to draw th current circle
}
requestAnimationFrame(circleFall);
})();
<canvas id="myCanvas"></canvas>