We Keep Coding

Need assistance getting a P5 line draw function to work

I'm trying to replicate the crude line connection function that I have working here, https://editor.p5js.org/knectar/sketches/0Thp1IJn but using objects in an array. It seems like this code should work, but the values aren't populating as needed to draw the connecting line. Any assistance would be appreciated!
Here's the code (or here https://editor.p5js.org/knectar/sketches/HYPwtjge):
var dotCount = 2;
var dot;
var xTempPos, yTempPos;
var xEndPos, xEndPos;
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
fill(200);
for (let i = 0; i < dotCount; i++) {
dotArray.push(new Dot());
}
}
function draw() {
// background(0);
for (let i = 0; i < dotArray.length; i++) {
dotArray[i].sketch();
}
for (let i = dotArray.length - 1; i > 0; i--) {
dotArray[i].connect();
xEndPos = dotArray[i].xPos;
xEndPos = dotArray[i].yPos;
xTempPos = dotArray[i - 1].xPos;
yTempPos = dotArray[i - 1].yPos;
console.log(xTempPos);
}
}
class Dot {
constructor() {
this.xStartPos = random(width);
this.yStartPos = random(height);
this.rad = 5;
}
sketch() {
ellipse(this.xStartPos, this.yStartPos, this.rad);
}
connect() {
stroke(200);
strokeWeight(1);
line(this.xStartPos, this.yStartPos, xTempPos, yTempPos);
if (xTempPos <= xEndPos) {
xTempPos = xTempPos + 1;
}
if (yTempPos <= xEndPos) {
yTempPos = yTempPos + 1;
}
}
}```

The declaration of dotArray is missing.
var dotArray = [];
Furthermore it has to be xStartPos, yStartPos rather than xPos, yPos.
See the example:
var dotCount = 2;
var dot;
var xTempPos, yTempPos;
var xEndPos, xEndPos;
var dotArray = [];
function setup() {
//createCanvas(windowWidth, windowHeight);
createCanvas(400, 200);
for (let i = 0; i < dotCount; i++) {
dotArray.push(new Dot());
}
}
function draw() {
background(255, 255, 255);
fill(255, 0, 0);
stroke(255, 0, 0);
strokeWeight(1);
for (let i = 0; i < dotArray.length; i++) {
dotArray[i].sketch();
}
for (let i = dotArray.length - 1; i > 0; i--) {
dotArray[i].connect();
xEndPos = dotArray[i].xStartPos;
xEndPos = dotArray[i].yStartPos;
xTempPos = dotArray[i - 1].xStartPos;
yTempPos = dotArray[i - 1].yStartPos;
console.log(xTempPos);
}
}
class Dot {
constructor() {
this.xStartPos = random(width);
this.yStartPos = random(height);
this.rad = 5;
}
sketch() {
ellipse(this.xStartPos, this.yStartPos, this.rad);
}
connect() {
line(this.xStartPos, this.yStartPos, xTempPos, yTempPos);
if (xTempPos <= xEndPos) {
xTempPos = xTempPos + 1;
}
if (yTempPos <= xEndPos) {
yTempPos = yTempPos + 1;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

Processes for optimizing canvas animations

I've got a small web app in development to simulate the Ising model of magnetism. I've found that the animation slows down considerably after a few seconds of running, and it also doesn't loop after 5 seconds like I want it to with the command:
setInteval(main, 500)
I've added start and stop buttons. When I stop the animation, and then restart it, it begins fresh at the usual speed, but again slows down.
My question is: what steps can I take to troubleshoot and optimize the performance of my canvas animation? I hope to reduce or mitigate this slowing effect.
JS code:
window.onload = function() {
var canvas = document.getElementById("theCanvas");
var context = canvas.getContext("2d");
var clength = 100;
var temperature = 2.1;
var playAnim = true;
canvas.width = clength;
canvas.height = clength;
var imageData = context.createImageData(clength, clength);
document.getElementById("stop").addEventListener("click",function(){playAnim=false;});
document.getElementById("start").addEventListener("click",function(){playAnim=true;});
function init2DArray(xlen, ylen, factoryFn) {
//generates a 2D array of xlen X ylen, filling each element with values defined by factoryFn, if called.
var ret = []
for (var x = 0; x < xlen; x++) {
ret[x] = []
for (var y = 0; y < ylen; y++) {
ret[x][y] = factoryFn(x, y)
}
}
return ret;
}
function createImage(array, ilen, jlen) {
for (var i = 0; i < ilen; i++) {
for (var j = 0; j < jlen; j++) {
var pixelIndex = (j * ilen + i) * 4;
if (array[i][j] == 1) {
imageData.data[pixelIndex] = 0; //r
imageData.data[pixelIndex+1] = 0; //g
imageData.data[pixelIndex+2] = 0; //b
imageData.data[pixelIndex+3] = 255; //alpha (255 is fully visible)
//black
} else if (array[i][j] == -1) {
imageData.data[pixelIndex] = 255; //r
imageData.data[pixelIndex+1] = 255; //g
imageData.data[pixelIndex+2] = 255; //b
imageData.data[pixelIndex+3] = 255; //alpha (255 is fully visible)
//white
}
}
}
}
function dU(i, j, array, length) {
var m = length-1;
//periodic boundary conditions
if (i == 0) { //top row
var top = array[m][j];
} else {
var top = array[i-1][j];
}
if (i == m) { //bottom row
var bottom = array[0][j];
} else {
var bottom = array[i+1][j];
}
if (j == 0) { //first in row (left)
var left = array[i][m];
} else {
var left = array[i][j-1];
}
if (j == m) { //last in row (right)
var right = array[i][0];
} else {
var right = array[i][j+1]
}
return 2.0*array[i][j]*(top+bottom+left+right); //local magnetization
}
function randInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var myArray = init2DArray(clength, clength, function() {var c=[-1,1]; return c[Math.floor(Math.random()*2)]}); //creates a 2D square array populated with -1 and 1
function main(frame) {
if (!playAnim){return;} // stops
window.requestAnimationFrame(main);
createImage(myArray, clength, clength);
context.clearRect(0,0,clength,clength);
context.beginPath();
context.putImageData(imageData,0,0);
for (var z = 0; z < 10*Math.pow(clength,2); z++) {
i = randInt(clength-1);
j = randInt(clength-1);
var deltaU = dU(i, j, myArray, clength);
if (deltaU <= 0) {
myArray[i][j] = -myArray[i][j];
} else {
if (Math.random() < Math.exp(-deltaU/temperature)) {
myArray[i][j] = -myArray[i][j];
}
}
}
}
var timer = setInterval(main, 500);
}

PIXI.JS - Gradually Remove Slot Game Reels

I'm in the process learning to code a slot game, I have the below code which handles the spinning of the game. I want to add a border to the reels and have the sprites gradually disappear behind the border before they are removed and returned to the top.
function spingame(){
spin.interactive = false;
if (reelcount === 2){
if((reel[0].y >= 10) && (reel[5].y >= 400) && (reel[10].y >= renderer.height / 790)){
cancelAnimationFrame(spingame);
reelcount = 0;
console.log(reelarray);
checkwinnings();
balanceUpdate();
spin.interactive = true;
refresh();
}
else{
for (var i = 0; i < 15; i++){
reel[i].y += anispeed;
}
requestAnimationFrame(spingame);
refresh();
}
}
else if (reel[0].y >= 790) {
cancelAnimationFrame(spingame);
rowNo = 5;
reelSet();
for (var i = 0; i < 5; i++) {
reel[i].y = 10;
}
refresh();
spingame();
reelcount = reelcount + 1;
}
else if (reel[5].y >= 790) {
cancelAnimationFrame(spingame);
rowNo = 10;
reelSet();
for (var i = 5; i < 10; i++) {
reel[i].y = 10;
}
refresh();
spingame();
}
else if (reel[10].y >= 790) {
cancelAnimationFrame(spingame);
rowNo = 15;
reelSet();
for (var i = 10; i < 15; i++) {
reel[i].y = 10;
}
refresh();
spingame();
}
else{
for (var i = 0; i < 15; i++) {
reel[i].setTexture(symb[reelarray[i]]);
reel[i].y += anispeed;
}
requestAnimationFrame(spingame);
refresh();
}
What should I be looking for?
I've tried making the Sprites a child of the border but they're still visible when they move outside of the border.

Turns out I was looking in the wrong place. Assign a mask to a rectangle in the center of the screen and it's now working
var masksContainer = new PIXI.Container();
stage.addChild(masksContainer);
var mask = new PIXI.Graphics();
mask.beginFill(0xffffff);
mask.drawRect(renderer.width / 6 , renderer.height / 7, renderer.width / 1.6 , renderer.height / 1.3);
mask.endFill();
masksContainer.addChild(mask);
for (var i = 0 ; i < 15; i++){
masksContainer.addChild(reel[i]);
reel[i].mask = mask;
refresh();
}

Javascript game of life array gets reset

For a fun little project I decided to program conway's game of life in javascript. My logic seems to make sense and each individual function does its job however I still dont get my intended result. I have an array called grid, which stores the value of all the cells, and if they are alive or dead. I check each individual cell, then check all 8 surrounding cells to count neighbors, repeat for every other cell. At some point my grid no longer stores the correct value and resets. At this point I'm starting to think it's a javascript problem.
<body>
<style>
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
canvas {
background: #FFFFFF;
display: block;
margin: 0 auto;
}
</style>
<canvas id="canvas" style="border:1px solid #000000;"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var Game = {};
var nextGrid, emptyGrid, grid;
Game.horCells = 30;
Game.cellSize = canvas.width / Game.horCells;
Game.verCells = Math.floor(canvas.height / Game.cellSize);
Game.startLives = 80;
config();
//setInterval(run, 1000);
function config() {
console.log("in config");
emptyGrid = newGrid(Game.horCells, Game.verCells);
grid = emptyGrid;
nextGrid = emptyGrid;
//Manual Setup
for (var i = 0; i < Game.startLives; i++) {
//grid[getRandomInt(0, Game.horCells - 1)][getRandomInt(0, Game.verCells - 1)] = true;
}
grid[0][3] = true;
grid[1][3] = true;
grid[2][3] = true;
}
function run() {
console.log("gread" + grid[3][3]);
draw();
update();
}
function draw() {
console.log("Draw");
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < Game.horCells; i++) {
for (var j = 0; j < Game.verCells; j++) {
if (grid[i][j] === false) {
ctx.fillStyle = "#FFFFFF";
} else if (grid[i][j] === true) {
console.log("drawing live");
ctx.fillStyle = "#000000";
}
ctx.fillRect(i * Game.cellSize, j * Game.cellSize, Game.cellSize, Game.cellSize);
}
}
}
function update() {
for (var p = 0; p < Game.horCells; p++) {
for (var k = 0; k < Game.verCells; k++) {
nextGrid[p][k] = survival(p, k);
}
}
}
function survival(x, y) {
var neighbours = 0;
for (var l = 0; l < 3; l++) {
for (var m = 0; m < 3; m++) {
var sx = (x - 1) + l;
var sy = (y - 1) + m;
//Check bounds
if (inBounds(sx, sy) === true && grid[sx][sy]) {
neighbours++;
}
}
}
if (grid[x][y]) {
neighbours--;
if (neighbours === 2 || neighbours === 3) {
return true;
} else if (neighbours < 2 || neighbours > 3) {
console.log("DIED");
return false;
}
} else if (grid[x][y] === false && neighbours === 3) {
return true;
} else {
console.log("DIED");
return false;
}
}
function inBounds(x, y) {
return (x >= 0 && x < Game.horCells && y >= 0 && y < Game.horCells);
}
function newGrid(xCells, yCells) {
var gridd = new Array(xCells);
for (var i = 0; i < xCells; i++) {
gridd[i] = new Array(yCells);
}
for (var j = 0; j < xCells; j++) {
for (var k = 0; k < yCells; k++) {
gridd[j][k] = false;
}
}
return gridd;
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

emptyGrid = newGrid(Game.horCells, Game.verCells);
grid = emptyGrid;
nextGrid = emptyGrid
Creates 1 grid, then assigns grid and nextGrid to the same object. Again, grid and nextGrid are the same object. Any changes you make to 1 will happen to the other.
Create 2 separate grids so they can be changed independently:
grid = newGrid(Game.horCells, Game.verCells);
nextGrid = newGrid(Game.horCells, Game.verCells);
Or, to neaten it up slightly:
var g = () => newGrid(Game.horCells, Game.verCells);
grid = g();
nextGrid = g();
Just to clear up the question in the comments:
var g = () => newGrid(Game.horCells, Game.verCells);
Is (basically) the same thing as:
var g = function() {
return newGrid(Game.horCells, Game.verCells);
}
It's known as a "fat-arrow" function.
Both bits do the same thing though: they create a function that returns a new grid. This has the benefit of not needing to write newGrid(Game.horCells, Game.verCells); twice.
I used an arrow function instead of the function keyword because the latter is giant and ugly, which takes away from the goal of cleaning up the code.

Keep the clicked objects in an array in javascript

I made a puzzle game in javascript. I have made objects to keep some attributes relevant to the each pazzle squares. I want to get the object id which is relevant to the onclick.(not the div id). How to get the specific object id relevant to the clicked div?
window.onload = function() {
createDivs();
objects();
random();
onclickeventHanlder(event);
};
var getId;
var x = 3;
var counting = 0;
var tileSize = 600 / x;
var array2 = [];
var object = [];
function createDivs() {
var count = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var id = i + "" + j;
var element = document.createElement('div');
element.setAttribute("class", "pieces");
element.setAttribute("id", id);
element.style.width = 600 / x + "px";
element.style.height = 600 / x + "px";
element.style.margin = "0px auto";
element.style.overflow = "hidden";
element.setAttribute("onclick", "onclickeventHanlder(this)");
if (count > 0) { // to break row-wise
if (i == count && j == 0) {
element.style.clear = "both";
}
}
element.style.float = "left";
document.getElementById('puzzle-body').appendChild(element);
}
count++;
}
}
function objects(){
var count = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var objName = new Object();
objName.position = -(j * tileSize) + "px" + " " + -(i * tileSize) + "px";
objName.divID = document.getElementById(i + "" + j);
objName.id = count;
if(count<x*x-1){
objName.state = true; // if image is there
}else{
objName.state = false; // if image isn't there
}
object[count] = objName;
count++;
}
}
}
function reset(){
var looping = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var obj = object[looping];
if(obj.id<8){
var urlString = 'url("../images/Golden.jpg")';
obj.divID.style.backgroundImage = urlString;
obj.divID.style.backgroundPosition = obj.position;
}
looping++;
}
}
}
function random(){
var array = [];
while (array.length < ((x * x) - 1)) {
var randomnumber = Math.floor(Math.random() * ((x * x) - 1));
var found = false;
for (var i = 0; i < array.length; i++) {
if (array[i] == randomnumber) {
found = true;
break;
}
}
if (!found) {
array[array.length] = randomnumber;
}
}
var looping = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
if (looping < x * x-1) {
var random = array[looping];
var obj = object[random];
var obj2 = object[looping];
if(obj.id<8){
var urlString = 'url("../images/Golden.jpg")';
obj.divID.style.backgroundImage = urlString;
obj.divID.style.backgroundPosition = obj2.position;
}
}
looping++;
}
}
}
function onclickeventHanlder(event) {
var pos = event;
}