Related
I'm learning algorithms and doing JavaScript exercise questions, and I don't understand how one reaches the correct answer for a particular algorithm.
The question provided in the exercise is:
Have the function CorrectPath(str) read the str parameter being
passed, which will represent the movements made in a 5x5 grid of cells
starting from the top left position. The characters in the input
string will be entirely composed of: r, l, u, d, ?. Each of the
characters stand for the direction to take within the grid, for
example: r = right, l = left, u = up, d = down. Your goal is to
determine what characters the question marks should be in order for a
path to be created to go from the top left of the grid all the way to
the bottom right without touching previously travelled on cells in the
grid.
For example, the input drdr??rrddd? should ouptut drdruurrdddd
I've not found a solution on my own. I'm taking a look at a solution provided, and I'm bothered because:
A. pure functions are not used to manipulate values within the CorrectPath function (note the addX() and addY() methods contained within). I'm not convinced the solution provided is using best practices, especially coming from a functional programming background.
B. I don't understand how the steps taken, specifically in the while block and the succeeding for block, are taken to reach the correct answer and why sometimes the missingLetters array has letters remaining and other times not
The working solution provided is below
function CorrectPath(str) {
let x = 0, //start x coord
y = 0, //start y coord
missingLetters = []
const unknowns = str.match(/\W/g)
function addX() {
while(x !== 4) {
if (x > 4) {
x--;
missingLetters.push('l');
} else {
x++;
missingLetters.push('r');
}
}
}
function addY() {
while (y !== 4) {
if (y > 4) {
y--;
missingLetters.push('u');
} else {
y++;
missingLetters.push('d');
}
}
}
//tallies current number of x and y movements
for (let i=0; i<str.length; i++) {
switch (str[i]) {
case 'd':
y += 1;
break;
case 'u':
y -= 1;
break;
case 'l':
x -= 1;
break;
case 'r':
x += 1;
break;
}
}
if (x > y) { addX(); addY(); }
if (y >= x) { addY(); addX(); }
while (missingLetters.length < unknowns.length) {
var pos = missingLetters.length - 1;
if (missingLetters[pos] === 'r') {x += 1; missingLetters.push('r'); addX()}
if (missingLetters[pos] === 'l') {x -= 1; missingLetters.push('l'); addX()}
if (missingLetters[pos] === 'd') {y += 1; missingLetters.push('d'); addY()}
if (missingLetters[pos] === 'u') {y -= 1; missingLetters.push('u'); addY()}
}
var newStr = str.split('');
for (var j=0; j<str.length; j++) {
if (newStr[j] === '?') {
newStr[j] = missingLetters.shift()
}
}
return newStr.join('');
}
CorrectPath(readline());
Here's a solution I found
const dirMap = {
u: { x: 0, y: -1 },
r: { x: 1, y: 0 },
d: { x: 0, y: 1 },
l: { x: -1, y: 0 }
}
function CorrectPath(pathString) {
const map = Array(5*5)
return trace(pathString, map)
}
function trace(path, [...map], x = 0, y = 0, newPath = "") {
const steps = path.split(""),
nextMove = steps.shift()
if (nextMove === undefined) {
if (5 * y + x === (5*5-1)) return newPath
return "Bad move"
}
if (nextMove === "?") {
const moves = availableMoves(x,y,map)
if (!moves.length) return "Bad move"
for(let i = 0; i<moves.length; i++) {
let move = moves[i],
trySteps = [move,...steps].join("")
res = trace(trySteps,map,x,y,newPath)
if (!res || res === "Bad move") continue
else return res
}
return "Bad move"
} else {
if (!canMove(nextMove, x, y, map)) return "Bad move"
const pos = dirMap[nextMove],
newX = pos.x + x,
newY = pos.y + y
newPath += nextMove
map[5*newY+newX] = nextMove
return trace(steps.join(""),map,newX,newY,newPath)
}
}
function availableMoves(x,y,map) {
const steps = []
Object.keys(dirMap).forEach(z => {
if (canMove(z,x,y,map)) steps.push(z)
})
return steps
}
function canMove(dir, xPath, yPath, map) {
const pos = dirMap[dir],
x = pos.x + xPath,
y = pos.y + yPath
if (x > 4 || x < 0 || y > 4 || y < 0) return false
if (map[5*y+x] !== undefined) return false
return true
}
CorrectPath(readline());
So I have this class which is used for shape morphing:
class ShapeOverlays {
constructor(elm) {
this.elm = elm;
this.path = elm.querySelectorAll('path');
this.numPoints = 18;
this.duration = 600;
this.delayPointsArray = [];
this.delayPointsMax = 300;
this.delayPerPath = 100;
this.timeStart = Date.now();
this.isOpened = false;
this.isAnimating = false;
}
toggle() {
this.isAnimating = true;
const range = 4 * Math.random() + 6;
for (var i = 0; i < this.numPoints; i++) {
const radian = i / (this.numPoints - 1) * Math.PI;
this.delayPointsArray[i] = (Math.sin(-radian) + Math.sin(-radian * range) + 2) / 4 * this.delayPointsMax;
}
if (this.isOpened === false) {
this.open();
} else {
this.close();
}
}
open() {
this.isOpened = true;
this.elm.classList.add('is-opened');
this.timeStart = Date.now();
this.renderLoop();
}
close() {
this.isOpened = false;
this.elm.classList.remove('is-opened');
this.timeStart = Date.now();
this.renderLoop();
}
updatePath(time) {
const points = [];
for (var i = 0; i < this.numPoints + 1; i++) {
points[i] = ease.cubicInOut(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1)) * 100
}
let str = '';
str += (this.isOpened) ? `M 0 0 V ${points[0]} ` : `M 0 ${points[0]} `;
for (var i = 0; i < this.numPoints - 1; i++) {
const p = (i + 1) / (this.numPoints - 1) * 100;
const cp = p - (1 / (this.numPoints - 1) * 100) / 2;
str += `C ${cp} ${points[i]} ${cp} ${points[i + 1]} ${p} ${points[i + 1]} `;
}
str += (this.isOpened) ? `V 0 H 0` : `V 100 H 0`;
return str;
}
render() {
if (this.isOpened) {
for (var i = 0; i < this.path.length; i++) {
this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i)));
}
} else {
for (var i = 0; i < this.path.length; i++) {
this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1))));
}
}
}
renderLoop() {
this.render();
if (Date.now() - this.timeStart < this.duration + this.delayPerPath * (this.path.length - 1) + this.delayPointsMax) {
requestAnimationFrame(() => {
this.renderLoop();
});
}
else {
this.isAnimating = false;
}
}
}
(function() {
const elmHamburger = document.querySelector('.hamburger');
const gNavItems = document.querySelectorAll('.global-menu__item');
const elmOverlay = document.querySelector('.shape-overlays');
const overlay = new ShapeOverlays(elmOverlay);
elmHamburger.addEventListener('click', () => {
if (overlay.isAnimating) {
return false;
}
overlay.toggle();
if (overlay.isOpened === true) {
elmHamburger.classList.add('is-opened-navi');
for (var i = 0; i < gNavItems.length; i++) {
gNavItems[i].classList.add('is-opened');
}
} else {
elmHamburger.classList.remove('is-opened-navi');
for (var i = 0; i < gNavItems.length; i++) {
gNavItems[i].classList.remove('is-opened');
}
}
});
}());
Can some one please explain this code? I don't really get how the paths are created using time,how the points are placed and how could I modify it.What is range used for? Why are trigonometral functions used for the delayPointsArray?
Basically it's this part that I don't get:
updatePath(time) {
const points = [];
for (var i = 0; i < this.numPoints + 1; i++) {
points[i] = ease.cubicInOut(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1)) * 100
}
let str = '';
str += (this.isOpened) ? `M 0 0 V ${points[0]} ` : `M 0 ${points[0]} `;
for (var i = 0; i < this.numPoints - 1; i++) {
const p = (i + 1) / (this.numPoints - 1) * 100;
const cp = p - (1 / (this.numPoints - 1) * 100) / 2;
str += `C ${cp} ${points[i]} ${cp} ${points[i + 1]} ${p} ${points[i + 1]} `;
}
str += (this.isOpened) ? `V 0 H 0` : `V 100 H 0`;
return str;
}
render() {
if (this.isOpened) {
for (var i = 0; i < this.path.length; i++) {
this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i)));
}
} else {
for (var i = 0; i < this.path.length; i++) {
this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1))));
}
}
}
Why is time being used? What is the purpose of this:
points[i] = ease.cubicInOut(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1)) * 100
If you look at how updatePath() is being called, it's like this:
this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i))
So the time value passed in is the difference between the current time, and the start time of the path we are working with.
So what then is the line of code you are interested in, doing?
points[i] = ease.cubicInOut(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1)) * 100
I'm going to ignore delayPointsArray. It is modifying the start time slightly based on angle. Without seeing the full demo, I'm not sure of the reason for that.
The purpose of this line of code is to calculate how far through the current path's animation we are. The result is in the form of a coordinate value from 0 to 100.
It's doing a lot in that one line of code. So let's break down the individual steps.
Firstly, we are clamping the elapsed time to minimum of 0.
Math.max(time, 0)
In other words, anything before the animation start time becomes zero.
Then we divide by the animation's duration.
Math.max(time, 0) / duration
This will result in a value from 0, representing the start of the animation, to 1, representing the end of the animation. However, the value might also be greater than 1 if the elapsed time is after the end of the animation. Hence the next step.
Now clamp this value to a maximum of 1.
Math.min( Math.max(time, 0) / duration, 1)
We now have a value >= 0 and <= 1 whichdescribes where in the course of the animation, the path is supposed to be. 0 if we should be at the animations start position. 1 if we should be at the animations end position. And somewhere in between if the animation is in progress.
However this value is strictly linear, corresponding with the progression of time. And usually linear movement is not what you want. It is unnatural. Objects accelarate when the start moving and decelerate when the come to a stop. That will be what the easeInOut() function will be doing. If you are not familiar with easing curves, take a look at the diagram below.
Source: Google: The Basics of Easing
So we pass in a linear time value from 0..1 (horizontal axis). It will return a modified value that takes into account acceleration and deceleration.
The final step is to multiply by 100, to convert to a final coordinate value (0..100).
Hope this helps.
I have an problem where i have 3 times of the 24 hour day. To keep it simple i can use the decimal representation:
a) 23:45 (23.75)
b) 11:30 (11.50)
c) 00:15 (00.25)
I'd like to know , for each time, which other time is closest.
var closestTime = 24
var closestActualTime = 0;
for (var i = 0; i < times.length; i++) {
if (times[i].time == this.time) continue;
var temp = Math.abs(this.time - times[i].time)
if (temp < closestTime) {
closestTime = temp;
closestActualTime = times[i].time;
}
}
My issue is that 23:45 and 00:25 are actually really close but i don't know how process a variable with a modulo type
I suggest to build a list with the pairs and then calculate the difference.
The difference is the third element in the pairs array.
Basically you need to check the delta and if it greater than 12 hours, take the difference from 24 and delta.
delta = Math.abs(aa - bb);
if (delta > 12) {
delta = 24 - delta;
}
function combination(array, size) {
function c(part, start) {
var i, l, p;
for (i = start, l = array.length + part.length + 1 - size; i < l; i++) {
p = part.slice();
p.push(array[i]);
p.length < size ? c(p, i + 1) : result.push(p);
}
}
var result = [];
c([], 0);
return result;
}
function timeDelta(a, b) {
function decimalTime(s) {
var p = s.split(':');
return +p[0] + p[1] / 60;
}
function padZero(v) {
return (v < 10) ? '0' + v : String(v);
}
var aa = decimalTime(a),
bb = decimalTime(b),
delta = Math.abs(aa - bb);
if (delta > 12) {
delta = 24 - delta;
}
return padZero(Math.floor(delta)) + ':' + padZero(Math.round(60 * (delta - Math.floor(delta))));
}
var times = ['23:45', '11:30', '00:15'],
pairs = combination(times, 2);
pairs.forEach(function (a, i, aa) {
aa[i][2] = timeDelta(a[0], a[1]);
});
console.log(pairs);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Loop over times.
Try combinations of delta time, offset by 24 hours.
Pick smallest delta time.
var times = [23.75, 11.50, 3, 6, 7];
/**
* timeClosestTo
*
* #param {number} time
* #returns {number}
*/
function timeClosestTo(time) {
//Distance variable to compare against
var distance = 100;
//Hours in a day
var day = 24;
//Current best
var best = null;
//Test against all times
for (var i = 0; i < times.length; i++) {
//Find best score based upon day
var d = Math.min(Math.abs((times[i]) - (time)), Math.abs((times[i] + day) - time), Math.abs((times[i]) - (time + day)), Math.abs((times[i] + day) - (time + day)));
//If best found distance yet, set best to current
if (d < distance) {
best = times[i];
distance = d;
}
}
//Return best
return best;
}
console.log("times to deal with:",times.join(", "));
console.log("closest to 1:", timeClosestTo(1), "closest to 11:", timeClosestTo(11), "closest to 5:", timeClosestTo(5));
Quite functionally i would do this job as follows
var times = [23.75,11.50,0.25],
diffs = times.reduce((d,t1,i,a) => a[i+1] ? d.concat(a.slice(i+1)
.map(t2 => [t1,t2,[Math.min(Math.abs(t1-t2),24-Math.abs(t1-t2))]
.map(n => ~~n + ":" + (n%1)*60)[0]]))
: d,[]);
console.log(diffs);
How would I find out if a point (x,y,z) is on a line between pointA and pointB?
What I would like is a boolean function that would do this:
pointA // random THREE.Vector3
pointB // random THREE.Vector3
pointToCheck // random THREE.Vector3
var isOnLine = THREE.pointOnLine(pointA, pointB, pointToCheck)
if (isOnLine) {
console.log('point is on the line');
}
Here is an image for visualization:
Cross product of two vectors can help us to solve this problem.
function isPointOnLine (pointA, pointB, pointToCheck) {
var c = new THREE.Vector3();
c.crossVectors(pointA.clone().sub(pointToCheck), pointB.clone().sub(pointToCheck));
return !c.length();
}
THREE.isPointOnLineAndBetweenPoints = function (pointA, pointB, pointToCheck) {
if (!isPointOnLine(pointA, pointB, pointToCheck)) {
return false;
}
var dx = pointB.x - pointA.x;
var dy = pointB.y - pointA.y;
// if a line is a more horizontal than vertical:
if (Math.abs(dx) >= Math.abs(dy)) {
if (dx > 0) {
return pointA.x <= pointToCheck.x && pointToCheck.x <= pointB.x;
} else {
return pointB.x <= pointToCheck.x && pointToCheck.x <= pointA.x;
}
} else {
if (dy > 0 ) {
return pointA.y <= pointToCheck.y && pointToCheck.y <= pointB.y;
} else {
return pointB.y <= pointToCheck.y && pointToCheck.y <= pointA.y;
}
}
}
a call:
THREE.isPointOnLineAndBetweenPoints(new THREE.Vector3(1, 0, 0), new THREE.Vector3(2, 0, 0), new THREE.Vector3(2, 0, 0));
Use the following function if you wanna to know just whether this point is on a line or not:
isPointOnLine(new THREE.Vector3(1, 0, 0), new THREE.Vector3(2, 0, 0), new THREE.Vector3(2, 0, 0));
This much more simple way.
function isPointOnLine (pointA, pointB, pointToCheck) {
var c = new THREE.Vector3();
c.crossVectors(pointA.clone().sub(pointToCheck), pointB.clone().sub(pointToCheck));
return !c.length(); }
THREE.isPointOnLineAndBetweenPoints = function (pointA, pointB, pointToCheck) {
if (!isPointOnLine(pointA, pointB, pointToCheck)) {
return false;
}
let d = pointA.distanceTo(pointB);
return pointA.distanceTo(pointToCheck) < d && pointB.distanceTo(pointToCheck) < d;
}
You can generate the symmetric form of the equation for the three-dimensional line, plug in the points on pointToCheck, and determine if it's on the line. Here's the code:
// Pick two arbitrary points to be on the line
var pointA = new THREE.Vector3( -70, -4, -100 );
var pointB = new THREE.Vector3( 65, 22, 14 );
// Equation that takes in three points, pointA and pointB
// on a three-dimensional line and pointToCheck unknown, and
// returns true if pointToCheck is on the line and false if not
// optional param betweenCheck will additionally check if point
// is between pointA and pointB
var isOnLine = function(pointA, pointB, pointToCheck, betweenCheck) {
xVector = pointB.x - pointA.x;
yVector = pointB.y - pointA.y;
zVector = pointB.z - pointA.z;
vector = [xVector, yVector, zVector];
if (!!betweenCheck) {
// test if point is between pointA and pointB
if (pointToCheck.x < Math.min[pointA.x, pointB.x] ||
pointToCheck.x > Math.max[pointA.x, pointB.x]) {
return false;
}
if (pointToCheck.y < Math.min[pointA.y, pointB.y] ||
pointToCheck.y > Math.max[pointA.y, pointB.y]) {
return false;
}
if (pointToCheck.z < Math.min[pointA.z, pointB.z] ||
pointToCheck.z > Math.max[pointA.z, pointB.z]) {
return false;
}
}
// equation for the vector function generating this line is:
// [pointA.x, pointA.y, pointA.z] + t[vector], or
// [pointA.x + t * xVector, pointA.y + t * yVector,
// pointA.z + t * zVector], or
// parametric form:
// x = pointA.x + (t * xVector)
// y = pointA.y + (t * yVector)
// z = pointA.z + (t * zVector), or
// symmetric form:
// x - pointA.x y - pointA.y z - pointA.z
// ------------ = -------------- = --------------
// xVector yVector zVector
//
// So to test for whether pointToCheck is on line, we plug in
// its coordinates to x, y and z in the symmetric form
// and see if the equations balance
var x = (pointToCheck.x - pointA.x) / xVector;
var y = (pointToCheck.y - pointA.y) / yVector;
var z = (pointToCheck.z - pointA.z) / zVector;
var results = [x, y, z];
// Handle any axis where no change occurred by removing the
// point to check, as it's irrelevent to determining whether
// point to check is on the line.
for (var i = 0; i < 2; i++) {
if (isNaN(results[i])) {
results.splice(i, 1);
}
}
var first = results[0];
// Cycle through remaining results and make sure they are all
// the same
for (var i = 0; i < results.length; i++) {
// If any point is different, return false, as the point to
// check is not on the line
if (results[i] !== first) {
return false
}
}
// All the symmetric equations were equal (or irrelevant) and
// the pointToCheck is on the line
return true;
}
Here's some tests:
// Some quick testing on example lines (you can change the
// coords of pointA and pointB above and they will still pass)
pointsOnLine = [];
pointsOffLine = [];
pointsOnLineBetween = [];
pointsOffLineBetween = [];
var generatePoints = function() {
xVector = pointB.x - pointA.x;
yVector = pointB.y - pointA.y;
zVector = pointB.z - pointA.z;
vector = [xVector, yVector, zVector];
for (var i = 0; i < 100; i++) {
var t = parseInt(Math.random() * 100);
var direction = Math.random() < .5 ? true : false
if (!direction) {
t = -t;
}
var newPointCoords = new THREE.Vector3(
pointA.x + (xVector * t),
pointA.y + (yVector * t),
pointA.z + (zVector * t)
);
pointsOnLine.push(newPointCoords);
var newPointCoords = new THREE.Vector3(
pointA.x + (xVector * t) + parseInt(Math.random() * 100),
pointA.y + (yVector * t) - parseInt(Math.random() * 100),
pointA.z + (zVector * t) + parseInt(Math.random() * 100)
);
pointsOffLine.push(newPointCoords);
var x = ((Math.max(pointA.x, pointB.x) - Math.min(pointA.x, pointB.x)) /
2) + Math.min(pointA.x, pointB.x);
var y = ((Math.max(pointA.y, pointB.y) - Math.min(pointA.y, pointB.y)) /
2) + Math.min(pointA.y, pointB.y)
var z = ((Math.max(pointA.z, pointB.z) - Math.min(pointA.z, pointB.z)) /
2) + Math.min(pointA.z, pointB.z)
var newPointCoords = new THREE.Vector3(x, y, z);
pointsOnLineBetween.push(newPointCoords);
var x = ((Math.max(pointA.x, pointB.x) - Math.min(pointA.x, pointB.x)) /
Math.abs(t)) + Math.min(pointA.x, pointB.x);
var y = ((Math.max(pointA.y, pointB.y) - Math.min(pointA.y, pointB.y)) /
Math.abs(t) * 2) + Math.min(pointA.y, pointB.y)
var z = ((Math.max(pointA.z, pointB.z) - Math.min(pointA.z, pointB.z)) /
Math.abs(t) * 3) + Math.min(pointA.z, pointB.z)
var newPointCoords = new THREE.Vector3(x, y, z);
pointsOffLineBetween.push(newPointCoords);
}
}
generatePoints();
for (var i=0; i < pointsOnLine.length; i++) {
if (!isOnLine(pointA, pointB, pointsOnLine[i])) {
console.log('error', pointsOnLine[i]);
} else {
console.log('test passed -- point on line')
}
}
for (var i=0; i < pointsOffLine.length; i++) {
if (isOnLine(pointA, pointB, pointsOffLine[i])) {
console.log('error', pointsOffLine[i]);
} else {
console.log('test passed -- point off line')
}
}
for (var i=0; i < pointsOnLineBetween.length; i++) {
if (!isOnLine(pointA, pointB, pointsOnLineBetween[i], true)) {
console.log('error', pointsOnLineBetween[i]);
} else {
console.log('test passed -- point on line between')
}
}
for (var i=0; i < pointsOffLineBetween.length; i++) {
if (isOnLine(pointA, pointB, pointsOffLineBetween[i], true)) {
console.log('error', pointsOffLineBetween[i]);
} else {
console.log('test passed -- point off line between')
}
}
Plunkr.
So I wrote this code for a simple game. The code runs at 60 fps in both Chrome and Safari but Firefox barely manages 30-40 fps. The code looks simple enough to me. What could be causing the delay?
I checked in firebug and found out that only one function "follow" is taking up all the time. Here is the code:
function checkCollision (ball0, ball1) {
var dx = ball1.X - ball0.X,
dy = ball1.Y - ball0.Y,
dist = Math.sqrt(dx * dx + dy * dy);
if (dist < ball0.rad + ball1.rad) {
var angle = Math.atan2(dy, dx),
sin = Math.sin(angle),
cos = Math.cos(angle);
var pos0 = {x: 0, y: 0},
pos1 = rotate(dx, dy, sin, cos, true),
vel0 = rotate(ball0.spdX, ball0.spdY, sin, cos, true),
vel1 = rotate(ball1.spdX, ball1.spdY, sin, cos, true),
vxTotal = vel0.x - vel1.x;
vel0.x = ((ball0.mass - ball1.mass) * vel0.x + 2 * ball1.mass * vel1.x) /
(ball0.mass + ball1.mass);
vel1.x = vxTotal + vel0.x;
var absV = Math.abs(vel0.x) + Math.abs(vel1.x),
overlap = (ball0.rad + ball1.rad) - Math.abs(pos0.x - pos1.x);
pos0.x += vel0.x / absV * overlap;
pos1.x += vel1.x / absV * overlap;
//rotate positions back
var pos0F = rotate(pos0.x, pos0.y, sin, cos, false),
pos1F = rotate(pos1.x, pos1.y, sin, cos, false);
ball1.X = ball0.X + pos1F.x;
ball1.Y = ball0.Y + pos1F.y;
ball0.X = ball0.X + pos0F.x;
ball0.Y = ball0.Y + pos0F.y;
var vel0F = rotate(vel0.x, vel0.y, sin, cos, false),
vel1F = rotate(vel1.x, vel1.y, sin, cos, false);
ball0.spdX = vel0F.x;
ball0.spdY = vel0F.y;
ball1.spdX = vel1F.x;
ball1.spdY = vel1F.y;
}
}
function move()
{
var side,i;
for (i=0 ; i < balls.length; i++)
{
var obj = balls[i];
if (side=obj.edgeX())
{
if (side === 'l')
obj.X = obj.rad;
else if (side === 'r')
obj.X = canvas.width() - obj.rad;
obj.spdX*=-1;
}
if (side=obj.edgeY())
{
if (side === 't')
obj.Y = obj.rad;
else if (side === 'b')
obj.Y = canvas.height() - obj.rad;
obj.spdY*=-1;
}
if (leash == true && i === 0)
{
if (mouse.X>obj.X && (obj.spdX<10))
obj.spdX+=obj.accX;
else if (mouse.X<obj.X && (obj.spdX>-10))
obj.spdX-=obj.accX;
if (mouse.Y>obj.Y && (obj.spdY<10))
obj.spdY+=obj.accY;
else if (mouse.Y<obj.Y && (obj.spdY>-10))
obj.spdY-=obj.accY;
}
obj.X+=obj.spdX;
obj.Y+=obj.spdY;
if (Math.abs(obj.spdX)>0.1)
obj.spdX*=0.98;
else obj.spdX=0;
if (Math.abs(obj.spdY)>0.1)
obj.spdY*=0.98;
else obj.spdY = 0;
};
}
function follow()
{
var ballA, i, ballB,j;
requestAnimationFrame(follow);
//stats.begin();
context.clearRect(0,0,canvas.width(),canvas.height());
move();
for (i = 0, len = balls.length - 1; i < len; i++) {
ballA = balls[i];
for (j = i + 1; j < balls.length; j++) {
ballB = balls[j];
checkCollision(ballA, ballB);
}
}
balls.forEach(function(obj){
drawCircle(obj.X,obj.Y,obj.rad, obj.color);
if (leash == true && obj.control === true)
{drawLeash(mouse.X,mouse.Y,obj.X,obj.Y,obj.color);}
});
//stats.end();
};
Here is the animation: http://ipsumturpis.xtreemhost.com/follower/index.html
I vaguely remembered there used to be a problem in FF regarding with canvas drawing performance, so I have commented out drawCircle(obj.X,obj.Y,obj.rad, obj.color); and poof, magic happened - my frame rate went up from 11 FPS to 60.
Try caching balls length in a variable. Unless it’s absolutely necessary for reasons I don’t see, running balls.length (or any function) in every iteration of a loop is naturally going to be time consuming.
So try something like this;
ballslen = balls.length;
for (j = i + 1; j < ballslen; j++)