Programming

In script.js, l.149ff:

	drawImage(Image, topLeftX, topLeftY) {
		for (let row = 0; row < Image.length; row++) {
			for(let column = 0; column < Image[row].length; column++) {
				this.nextFrame[(topLeftX + column)*this.height + (topLeftY+row)] = Image[row][column];
			}
		}
	}

The term topLeftX + column * this.height can be rewritten as topLeftX * this.height + column * this.height. The first term of this is a constant and can be extracted into a variable const verticalOffset = topLeftX * this.height.

Similarly, topLeftY + row doesn’t need to be recomputed in every iteration of the inner for loop. Move it out into the outer for loop.

Also notice that the variable part, column * this.height is all the integer multiples of this.height. Therefore, instead of a multiplication, you can simply add this.height to a running total. Sums should be faster than multiplications.

With these three changes you get [Edit: I think I made mistakes during the replacements.]

drawImage(Image, topLeftX, topLeftY) {
	const TODO_NAME_THIS = topLeftX * this.height
	let TODO_NAME_THIS_ALSO = topLeftY
	for (let row = 0; row < Image.length; row++) {
		let TODO_NAME_THIS_TOO = 0
		for(let column = 0; column < Image[row].length; column++) {
			this.nextFrame[TODO_NAME_THIS + TODO_NAME_THIS_TOO + TODO_NAMES_THIS_ALSO] = Image[row][column];
			TODO_NAME_THIS_TOO += this.height
		}
		TODO_NAME_THIS_ALSO += row
	}
}