diff --git a/script.js b/script.js index 15e7a23..4afbae5 100644 --- a/script.js +++ b/script.js @@ -6,6 +6,10 @@ // ["264653","2a9d8f","e9c46a","f4a261","e76f51"] // https://coolors.co/palette/264653-2a9d8f-e9c46a-f4a261-e76f51 +// +// Firefox seems to have an issue with rendering. Google works fine. +// + const canvas = document.getElementById('canvas1'); const ctx = canvas.getContext('2d'); canvas.width = 1024; @@ -20,15 +24,23 @@ this.y = y; this.width = this.effect.cellWidth; this.height = this.effect.cellHeight; + this.slideX = 0; + this.slideY = 0; this.image = document.getElementById('projectImage'); } draw(context) { - context.drawImage(this.image, this.x, this.y, this.width, this.height + context.drawImage(this.image, this.x + this.slideX, this.y + this.slideY, this.width, this.height , this.x, this.y, this.width, this.height); + // context.drawImage(this.image, 0, 0); context.strokeRect(this.x, this.y, this.width, this.height); } + update() { + // this.slideX = Math.random() * 10 - 10; + this.slideX -= 5; + } + } class Effect { @@ -42,8 +54,9 @@ this.cellHeight = this.height / this.numRows; this.imageGrid = []; this.createGrid(); + // this.cell = new Cell(this, 0, 0); - console.log(this.imageGrid); + // console.log(this.imageGrid); } createGrid() { @@ -61,8 +74,9 @@ } render(context) { - - this.imageGrid.forEach(cell => { + // this.cell.draw(context); + this.imageGrid.forEach(cell=> { + // cell.update(); cell.draw(context); }) } @@ -70,15 +84,15 @@ } const effect = new Effect(canvas); -console.log(effect); -effect.render(ctx); +// console.log(effect); +// effect.render(ctx); -// function animate() { -// ctx.clearRect(0, 0, canvas.width, canvas.height); -// requestAnimationFrame(animate); -// } +function animate() { + effect.render(ctx); + requestAnimationFrame(animate); +} -// animate(); +animate(); /* TODO: