I've been trying to get this to work for a while and I've hit a block and can't get these balls to bounce off of each other and the walls. I'm trying to make essentially a virus simulator, with different balls having different properties determining infection chances whenever they contact each other. Here's the code I'm working with:
Molecule.js:
class Molecule {
constructor(_i, _max_rad){
this.moleculeIndex = _i;
this.rad = random(min_rad, _max_rad);
this.position = createVector(random(this.rad,width-this.rad),random(this.rad, height-this.rad));
this.velocity = createVector(random(-2,5),random(-2,5));
this.bounce = false;
}
render() {
noStroke();
if (this.bounce) {
let dx = this.position.x - molecules[moleculeIndex].position.x;
let dy = this.position.y - molecules[moleculeIndex].position.y;
let dist = Math.sqrt(dx * dx + dy * dy);
let normalX = dx / dist;
let normalY = dy / dist;
let midpointX = (this.position.x.x + molecules[moleculeIndexmoleculeIndex].position.x) / 2;
let midpointY = (this.position.x.y + molecules[moleculeIndex].position.y) / 2;
let dVector = (this.velocity.x - molecules[moleculeIndex].velocity.x) * normalX;
dVector += (this.velocity.y - molecules[moleculeIndex].velocity.y) * normalY;
let dvx = dVector * normalX;
let dvy = dVector * normalY;
this.velocity.x -= dvx;
this.velocity.y -= dvy;
molecules[moleculeIndex].velocity.x += dvx;
molecules[moleculeIndex].velocity.y += dvy;
}
push();
translate(this.position.x,this.position.y)
ellipse(0,0,this.rad*2,this.rad*2);
pop();
}
step() {
this.position.add(this.velocity);
}
checkEdges(){
if(this.position.x < this.rad || this.position.x > width-this.rad){
this.velocity.x = this.velocity.x * -1;
}
if(this.position.y < this.rad || this.position.y > height-this.rad){
this.velocity.y = this.velocity.y * -1;
}
}
}
Sketch.js:
let molecules = [];
let numOfMolecules = 100;
let min_rad = 10;
let max_rad = 50;
let row = 5;
let col = 5;
let gridHeight;
let gridWidth;
let moleculeKey;
let tempArray;
let intersectCount;
let numchecks;
let displayMolecules = true;
let draw_grid = true;
let display_info = true;
function setup() {
createCanvas(window.innerWidth, window.innerHeight); //create canvas size of screen
background(150, 178, 164);
createMolecules();
}
function createMolecules() {
molecules = [];
for (let i = 0; i < numOfMolecules; i++) {
molecules.push(new Molecule(i, max_rad));
}
}
function draw() {
background(150, 178, 164);
gridWidth = window.innerWidth / col;
gridHeight = window.innerHeight / row;
splitIntoGrids();
checkIntersections();
drawGrid();
renderGrid();
resetBalls();
}
function splitIntoGrids() {
moleculeKey = [];
for (let i = 0; i < row; i++) {
moleculeKey.push([]);
for (let j = 0; j < col; j++) {
moleculeKey[i].push([]);
molecules.forEach(molecule => {
if ((molecule.position.x + molecule.rad > j * gridWidth) &&
(molecule.position.x - molecule.rad < j * gridWidth + gridWidth) &&
(molecule.position.y + molecule.rad > i * gridHeight) &&
(molecule.position.y - molecule.rad < i * gridHeight + gridHeight)) {
moleculeKey[i][j].push(molecule.moleculeIndex);
}
});
}
}
}
/* Splits into grids and counts the molecules in each grid.
* Also checks molecules when overlapping between two cells
* Stores molecules in an array, to track the location of each molecule
*/
function checkIntersections() {
intersectCount = 0;
numchecks = 0;
for (let i = 0; i < moleculeKey.length; i++) {
for (let j = 0; j < moleculeKey[i].length; j++) {
// if a cell contains more than one molecule, store the molecules into temporary array
if (moleculeKey[i][j].length > 1) {
tempArray = moleculeKey[i][j];
// loops through each molecule in the temporary array
for (let k = 0; k < tempArray.length; k++) {
for (let l = k + 1; l < tempArray.length; l++) {
// calculate distance of the molecules between each other
let distanceMolecules = p5.Vector.sub(molecules[tempArray[k]].position, molecules[tempArray[l]].position);
let vectorLength = distanceMolecules.mag();
numchecks++;
//checks if molecules are intersecting
if (vectorLength < molecules[tempArray[k]].rad + molecules[tempArray[l]].rad) {
molecules[tempArray[k]].bounce = true;
molecules[tempArray[l]].bounce = true;
intersectCount++;
}
}
}
}
}
}
}
function drawGrid() {
if (draw_grid) {
for (let i = 0; i < row; i++) {
for (let j = 0; j < col; j++) {
stroke(255);
noFill();
rect(j * gridWidth, i * gridHeight, gridWidth, gridHeight);
fill(255);
textSize(12);
text(moleculeKey[i][j].length, j * gridWidth + 10, i * gridHeight + gridHeight - 10);
}
}
}
}
function resetBalls() {
for (let i = 0; i < moleculeKey.length; i++) {
for (let j = 0; j < moleculeKey[i].length; j++) {
if (moleculeKey[i][j].length > 1) {
tempArray = moleculeKey[i][j];
//console.log(tempArray);
for (let k = 0; k < tempArray.length; k++) {
for (let l = k + 1; l < tempArray.length; l++) {
let distanceMolecules = p5.Vector.sub(molecules[tempArray[k]].position, molecules[tempArray[l]].position);
let vectorLength = distanceMolecules.mag(); //get the length of vector
//checks if molecules are not intersecting
if (!vectorLength < molecules[tempArray[k]].rad + molecules[tempArray[l]].rad) {
//change back color
molecules[tempArray[k]].bounce = false;
molecules[tempArray[l]].bounce = false;
}
}
}
}
}
}
}
function renderGrid() {
molecules.forEach(molecule => {
if (displayMolecules) {
molecule.render();
}
molecule.checkEdges();
molecule.step();
});
}
With this code I get an error 'Uncaught ReferenceError: moleculeIndex is not defined' on the first line of the if(bounce), I've tried replacing moleculeIndex with some other things but really it was just hoping. Does anyone know why I'm having this problem?
Thanks.
Try replacing the: moleculeIndex with this.moleculeIndex
Related
Im trying to make a Hexagon Grid and each of the Hexes to have data props with coordinates x y z and with value. I've managed to make the logic to create the grid and coordinates, but I can't figure out how to connect them. When I try to assign x,y,z props the TypeError pops out, saying I cannot change props in Element. The code:
import { StyledHexagonGrid } from './StyledHexagonGrid.jsx';
import Hexagon from '../Hexagon/Hexagon.jsx';
export const coordinatesCalc = (radius) => {
let coordinateRadius = radius - 1;
let coordinates = [];
for (let x = -coordinateRadius; x < coordinateRadius + 1; x++) {
for (let z = -coordinateRadius; z < coordinateRadius + 1; z++) {
for (let y = -coordinateRadius; y < coordinateRadius + 1; y++) {
let sum = x + y + z;
let coordinate = { x, y, z };
if (sum === 0) {
coordinates.push(coordinate);
}
}
}
}
return coordinates;
};
function HexagonGrid({ dataparentToChild }) {
let passedRadius = Object.values({ dataparentToChild });
let radius = passedRadius[0];
let columns = 2 * radius - 1;
let height = 600 / columns;
let width = height * 1.1547;
let dom_content = [];
for (let i = 0, j = radius - 1; i < columns; i++, j--) {
for (let k = 0; k < columns - Math.abs(j); k++) {
let left = width * 0.75 * i;
let top = k * height + Math.abs(j * (height / 2));
dom_content.push(
<StyledHexagon
style={{
top: `${top}px`,
left: `${left}px`,
width: `${width}px`,
height: `${height}px`,
}}
data-x=''
data-y=''
data-z=''
value=''
/>
);
}
}
console.log(dom_content);
let coordinates = coordinatesCalc(radius);
let hexElements = [];
for(let i=0;i<coordinates.length;i++){
let el = dom_content[i];
el.props.x = coordinates[i].x;
el.props.y = coordinates[i].y;
el.props.z = coordinates[i].z;
hexElements.push(el);
}
console.log(hexElements);
return (
<StyledHexagonGrid>
<Hexagon
dataparentToChild={passedRadius[0]}
/>
</StyledHexagonGrid>
);
}
export default HexagonGrid;
I'm coding Conways game of life in P5JS, but I got a wierd bug. It seems to "work" but it looks all wrong. I'm not sure if it has t do with finding the neighbors, because when I call the function manually, it works. I even copied a second neighbor-counting function of the internet in there, and it works, too.
Maybe it's a visual glitch, but I'm not sure of that either, because the code looks fine.
/// <reference path="../TSDef/p5.global-mode.d.ts" />
let gridSize = 10;
let arrCurrent = create2dArray(gridSize);
let arrNext = create2dArray(gridSize);
function setup() {
createCanvas(800, 800, WEBGL);
background(0);
stroke(0, 255, 0);
noFill();
initGame();
}
function draw() {
displayCells();
calcNextGen();
}
//Returns a 2D Array
function create2dArray(size) {
let newArray = new Array(size);
for (let i = 0; i < newArray.length; i++) {
newArray[i] = new Array(1);
}
return newArray;
}
//Fills initial array with random values
function initGame() {
for (let x = 0; x < arrCurrent.length; x++) {
for (let y = 0; y < arrCurrent.length; y++) {
arrCurrent[x][y] = Math.round((Math.random()));
}
}
}
//Calculates next generation
function calcNextGen() {
for (let x = 0; x < gridSize; x++) {
for (let y = 0; y < gridSize; y++) {
let neighbors = countNeighbors1(arrCurrent, x, y);
let state = arrCurrent[x][y];
//If cell is dead and has exactly 3 neighbors, it starts living
if (state === 0 && neighbors === 3) {
arrNext[x][y] = 1;
}
//If cell lives and has too few or too many neighbors, it dies
else if (state === 1 && (neighbors < 2 || neighbors > 3)) {
arrNext[x][y] = 0;
}
else {
arrNext[x][y] = state;
}
}
}
arrCurrent = arrNext.slice();
}
//Count neighbors
function countNeighbors(x, y) {
return arrCurrent[(x + 1) % gridSize][y] +
arrCurrent[x][(y + 1) % gridSize] +
arrCurrent[(x + gridSize - 1) % gridSize][y] +
arrCurrent[x][(y + gridSize - 1) % gridSize] +
arrCurrent[(x + 1) % gridSize][(y + 1) % gridSize] +
arrCurrent[(x + gridSize - 1) % gridSize][(y + 1) % gridSize] +
arrCurrent[(x + gridSize - 1) % gridSize][(y + gridSize - 1) % gridSize] +
arrCurrent[(x + 1) % gridSize][(y + gridSize - 1) % gridSize];
}
function countNeighbors1(grid, x, y) {
let sum = 0;
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
let col = (x + i + gridSize) % gridSize;
let row = (y + j + gridSize) % gridSize;
sum += grid[col][row];
}
}
sum -= grid[x][y];
return sum;
}
function displayCells() {
background(0);
translate(-300, -300, 0);
for (let x = 0; x < arrCurrent.length; x++) {
for (let y = 0; y < arrCurrent.length; y++) {
push();
translate(x * 50, y * 50, 0);
if (arrCurrent[x][y] === 1) box(50);
pop();
}
}
}
function logGrid() {
console.log(arrCurrent[0]);
console.log(arrCurrent[1]);
console.log(arrCurrent[2]);
console.log(arrCurrent[3]);
console.log(arrCurrent[4]);
console.log(arrCurrent[5]);
console.log(arrCurrent[6]);
console.log(arrCurrent[7]);
console.log(arrCurrent[8]);
console.log(arrCurrent[9]);
}
I know I'm very close, but I'm banging my head against this one since 2 hours.
Here's a little P5JS Web Editor, you can copy the code over and visually see the problem.
Any help is appreciated - thank you!
arrCurrent = arrNext.slice(); doesn't create a deep copy of the grid, it just creates a shallow copy of the first dimension.
It creates a grid, where columns of arrCurrent refers to the rows of arrNext.
You've to create a completely new grid:
arrCurrent = []
for (let x = 0; x < gridSize; x++)
arrCurrent.push(arrNext[x].slice());
let gridSize = 10;
let arrCurrent = create2dArray(gridSize);
let arrNext = create2dArray(gridSize);
function setup() {
createCanvas(800, 800, WEBGL);
background(0);
stroke(0, 255, 0);
noFill();
initGame();
frameRate(10)
}
function draw() {
displayCells();
calcNextGen();
}
//Returns a 2D Array
function create2dArray(size) {
let newArray = new Array(size);
for (let i = 0; i < newArray.length; i++) {
newArray[i] = new Array(1);
}
return newArray;
}
//Fills initial array with random values
function initGame() {
for (let x = 0; x < arrCurrent.length; x++) {
for (let y = 0; y < arrCurrent.length; y++) {
arrCurrent[x][y] = Math.round((Math.random()));
}
}
}
//Calculates next generation
// - A live cell dies if it has fewer than two live neighbors.
// - A live cell with two or three live neighbors lives on to the next generation.
// - A live cell with more than three live neighbors dies.
// - A dead cell will be brought back to live if it has exactly three live neighbors.
function calcNextGen() {
for (let x = 0; x < gridSize; x++) {
for (let y = 0; y < gridSize; y++) {
let neighbors = countNeighbors1(arrCurrent, x, y);
let state = arrCurrent[x][y];
//If cell is dead and has exactly 3 neighbors, it starts living
if (state === 0 && neighbors === 3) {
arrNext[x][y] = 1;
}
//If cell lives and has too few or too many neighbors, it dies
else if (state === 1 && (neighbors < 2 || neighbors > 3)) {
arrNext[x][y] = 0;
}
else {
arrNext[x][y] = state;
}
}
}
arrCurrent = []
for (let x = 0; x < gridSize; x++)
arrCurrent.push(arrNext[x].slice());
}
function countNeighbors1(grid, x, y) {
let sum = 0;
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
let col = (x + i + gridSize) % gridSize;
let row = (y + j + gridSize) % gridSize;
sum += grid[col][row];
}
}
sum -= grid[x][y];
return sum;
}
function displayCells() {
background(0);
translate(-75, -75, 0);
stroke(128);
box(50*gridSize, 50*gridSize, 50);
translate(-225, -225, 0);
stroke(0, 255, 0);
for (let x = 0; x < arrCurrent.length; x++) {
for (let y = 0; y < arrCurrent.length; y++) {
push();
translate(x * 50, y * 50, 0);
if (arrCurrent[x][y] === 1) box(50);
pop();
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
I'm experiencing a bug in my code that doubles the display and ends up drawing it twice, besides itself in a weird resolution. After changing a global variable (total_sand) to a different integer, and changing it back, the display has actually tripled.
The intended result is for it to display just once in full resolution (in this case, 301x301 pixels). This bug didn't happen immediately and seemed to happen randomly upon changing the code one day.
total_sand = 100000;
sandpiles = [];
var next_sandpiles;
function setup() {
createCanvas(301, 301);
for (var x = 0; x < width; x++) {
sandpiles[x] = [];
for (var y = 0; y < height; y++) {
sandpiles[x][y] = 0;
}
}
next_sandpiles = sandpiles;
//STARTING CONDITIONS
if (width % 2 == 0) {
sandpiles[width/2][height/2] = total_sand;
} else {
sandpiles[(width-1)/2][(height-1)/2] = total_sand;
}
}
function topple() {
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (sandpiles[x][y] > 3) {
toppling = true;
next_sandpiles[x][y] = next_sandpiles[x][y] - 4;
if (x > 0) {
next_sandpiles[x-1][y]++;
}
if (x < width - 1) {
next_sandpiles[x+1][y]++;
}
if (y > 0) {
next_sandpiles[x][y-1]++;
}
if (y < height - 1) {
next_sandpiles[x][y+1]++;
}
}
}
}
sandpiles = next_sandpiles;
}
function update() {
loadPixels();
var r;
var g;
var b;
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
if (sandpiles[x][y] == int(0)) {
r = 255;
g = 255;
b = 0;
} else if(sandpiles[x][y] == 1) {
r = 0;
g = 185;
b = 63;
} else if(sandpiles[x][y] == 2) {
r = 0;
g = 104;
b = 255;
} else if(sandpiles[x][y] == 3) {
r = 122;
g = 0;
b = 229;
} else {
r = 255;
g = 0;
b = 0;
}
var index = (x + y * width)*4;
pixels[index] = r;
pixels[index+1] = g;
pixels[index+2] = b;
pixels[index+3] = 255; // alpha
}
}
updatePixels();
}
function draw() {
background(0);
topple();
update();
}
I have an array (2d matrix of ones and zeros) like below and like to change it's size and so I've developed a function you can also find below.
'011111' '001111111111'
'000000' '001111111111'
'000011' ---> '000000000000'
'000001' '000000001111'
'000000001111'
'000000000011'
'011111' '001111111111'
'000000' '001111111111'
'000011' <--- '000000000000'
'000001' '000000001111'
'000000001111'
'000000000011'
So the example task above is working fine with the code below. But scaling down a big matrix (2000*1000) to (40*20) takes a LONG time. Also in the other direction (40*20) to (2000*1000)
So does anybody has an idea how to edit my code to make it working way faster?
So I would be very thankful if somebody shares some working code matching my problem, however.. Thanks a million in advance,
Nina.
var matrix=[
'011111000000000000000000001111000000000000000000000000000000000000000011111110000000000000001011',
'001111000000000000000000011110000000000000000011111000000000000000000001111111000000000000011101',
'001111100000000000000000111110000000000000111111111111100000000000000000011111100000000000010100',
'011111000000000000000000111100000000000111111111111111111000000000000000000111110000000000111000',
'000000000000000000000001111100000000001111111111111111111110000000000000000001100000000000111000',
'000000000000000000000001111000000000111111111111111111111111000000000000000000000000000001110000',
'000000000000000000000011110000000001111111111111111111111111100000000000000000000000000001110000',
'000000000000000000000111110000000011111111111111111111111111111000000000000000000000000011100000',
'000000000000000000000111100000000111111111111111111111111111111000000000000000000000000111000000',
'000000000000000000001111100000001111111111111111111111111111111100000000000000000000000111000001',
'000000000000000000011111000000011111111111111111111111111111111110000000000000000000001110000001',
'000000000000000000011110000000011111111111111111111111111111111111000000000000000000001110000000',
'000000000000000000111110000000111111111111111111111111111111111111110000000000000000000111000000',
'000000000000000000111100000001111111111111111111111111111111111111100000000000000000011000000001',
'000000000000000001111100000001111111111111111111111111111111111111111000000000000000001110000000',
'000000000000000011111000000001111111111111111111111111111111111111111000000000000000011100000000',
'000000000000000011111000000011111111111111111111111111111111111111111110000000000000001111000001',
'000000000000000111110000000011111111111111111111111111111111111111111110000000000000011100000001',
'000000000000001111100000000011111111111111111111111111111111111111111100000000000001110000000001',
'000000000000001111100000000011111111111111111111111111111111111111111110000000000000011100000001',
'000000000000011111000000000111111111111111111111111111111111111111111110000000000001110000000001',
'000000000000011111000000000111111111111111111111111111111111111111111110000000000111000000000001',
'000000000000111110000000000111111111111111111111111111111111111111111110000000000011000000000001',
'000000000000111100000000000111111111111111111111111111111111111111111110000000000011000000000001',
'000000000000111100000000000111111111111111111111111111111111111111111110000000111000000000000001',
'000000000001111000000000000111111111111111111111111111111111111111111110000000010100000000000001',
'000000000001111000000000000111111111111111111111111111111111111111111100011100000000000000000001',
'000000000111110000000000000111111111111111111111111111111111111111111000001111000000000000000001',
'000000000111100000000000000011111111111111111111111111111111111111111000000011100000000000000001',
'000000000111100000000000000011111111111111111111111111111111111111110000001111000000000000000001',
'000000000111100000000000000011111111111111111111111111111111111111100000000111000000000000000001',
'000000101111110000000000000001111111111111111111111111111111111111100000000110000000000000000001',
'000000001111111000000000000001111111111111111111111111111111111111000000111000000000000000000001',
'000000000111111110000000000000111111111111111111111111111111111110000000011110000000000000000001',
'000000000011111111100000000000111111111111111111111111111111111100000000011100000000000000000001',
'000000000001111111110000000000011111111111111111111111111111111100000000111000000000000000000001',
'000000000000011111111000000000001111111111111111111111111111111000000001111000000000000000000001',
'000000000000001111111100000000001111111111111111111111111111110000000001110000000000000000000001',
'000000000000000011111111000000000011111111111111111111111111100000000001110000000000000000000001',
'000000000000000001111111110000000001111111111111111111111111000000000010000000000000000000000001',
'000000000000000000111111111000000000111111111111111111111100000000000111100000000000000000000001',
'000000000000000000001111111110000000001111111111111111111000000000000111000000000000000000000001',
'000000000000000000000011111111100000000011111111111111000000000000001111000000000000000000000001',
'000000000000000000000001111111111000000000001111111000000000000000001110000000000000000000000001',
'000000000000000000000000011110111100000000000000000000000000000000011100000000000000000000000001'
]
Array.prototype.scale_matrix = function(scale_factor) {
var matrix = this;
var scale = 1 / scale_factor;
var array = duplicate_matrix(Math.round(this.length * scale_factor), Math.round(this[0].length * scale_factor), '0').map(str => Array.from(str, String))
if (scale_factor < 1) {
for (var y = 0; y < array.length; y++) {
for (var x = 0; x < array[0].length; x++) {
_y = Math.round(y / scale_factor);
_x = Math.round(x / scale_factor);
var old_values = []
for (var oldx = _x; oldx < _x + scale; oldx++) {
for (var oldy = _y; oldy < _y + scale; oldy++) {
try {
old_values.push(matrix[oldy][oldx]);
}
catch (e) {}
}
}
var new_value = old_values.sort((a, b) => old_values.filter(v => v === a).length - old_values.filter(v => v === b).length).pop();
array[y][x] = matrix[_y][_x];
}
}
}
else {
for (var y = 0; y < matrix.length; y++) {
for (var x = 0; x < matrix[0].length; x++) {
_y = Math.round(y * scale_factor);
_x = Math.round(x * scale_factor);
for (var newx = _x; newx < _x + scale_factor; newx++) {
for (var newy = _y; newy < _y + scale_factor; newy++) {
try {
array[newy][newx] = matrix[y][x];
}
catch (e) {}
}
}
}
}
}
return array.map(a => [a.join('')]).concat.apply([], array.map(a => [a.join('')]));
}
function duplicate_matrix(rows, cols, value) {
var arr = [];
for (var i = 0; i < rows; i++) {
arr.push([]);
arr[i].push(new Array(cols));
for (var j = 0; j < cols; j++) arr[i][j] = value;
};
return arr;
}
console.log(matrix.scale_matrix(0.3).join('\n'));
console.log('\n\n>------<\n\n');
console.log(matrix.scale_matrix(1.3).join('\n'));
.as-console-wrapper { max-height: 100% !important; top: 0; }
I can't figure out why the memory is increasing and it stays there each time I run this code:
easingFunction = function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
processFrame = function () {
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
tile.percent += 4;
if (tile.percent > 0) {
var TH = Math.max(0, Math.min(TILE_HEIGHT, targetObj.height - tile.imageY));
var TW = Math.max(0, Math.min(TILE_WIDTH, targetObj.width - tile.imageX));
var SW, SH, SX, SY, amount;
draw.save();
draw.translate(tile.imageX, tile.imageY);
if (direction == "tb" || direction == "bt") {
amount = easingFunction(tile.percent, 0, TW, 100);
SW = Math.min(TW, amount);
SH = TH;
SX = 0;
SY = 0;
} else {
amount = easingFunction(tile.percent, 0, TH, 100);
SW = TW;
SH = Math.min(TH, amount);
SX = 0;
SY = 0;
}
draw.drawImage(copycanvas, tile.imageX, tile.imageY, SW, SH, SX, SY, SW, SH);
draw.restore();
}
}
var ok = true;
for (i = 0; i < tiles.length; i++) {
if (tiles[i].percent < 100) {
ok = false;
break;
}
}
if (ok) {
clearInterval(interval);
showComplete();
}
};
this.show = function (target, hideTarget) {
createTiles();
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
tile.percent = 0 - i * 10;
}
}
var intervalDelay = (config.duration * 1000) / (tiles.length * 3 + 25);
interval = setInterval(function () {
processFrame();
}, intervalDelay);
};
function Tile() {
this.imageX = 0;
this.imageY = 0;
this.percent = 0;
};
};
I left out some unimportant code. The ideea is that I call externally the show() function. The setInterval is initialized and runs processFrame() about 100 times.
I've tried to leave some code outside from processFrame, and I got to :
processFrame = function () {
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
tile.percent += 4;
}
var ok = true;
for (i = 0; i < tiles.length; i++) {
if (tiles[i].percent < 100) {
ok = false;
break;
}
}
if (ok) {
clearInterval(interval);
showComplete();
}
};
But the memory still increases.
Try validating your code with JSLint. http://www.jslint.com/
Right now your adding easingFunction & processFrame to the Global object (which isn't a good thing). Not that this is the cause of the problem, but I've found that mismanagement of my objects is the usual cause of memory leaks.
You'll want to do something like:
var MyObject = {};
MyObject.easingFunction = function(){};
MyObject.processFrame = function(){};
In short make sure you declare all objects with var before using them.
I found the problem. I was continuously redrawing the canvas. To resolve this problem I had to erase the canvas each time before modifying it.