Losowe prostokąty - efekt przejścia między obrazami w 15 liniach czystego JavaScript

Kolejny fajny i łatwy programik: wprowadzenie obrazu przy pomocy losowych prostokątów!

Działa to w następujący sposób (kod źródłowy poniżej):

[Linie 1-4] Ustaw HTML5 Canvas
[5-6] obraz źródłowy
[7-8] weź 2d context naszego płótna (Canvas)
[9] wymiary prostokąta
[10] liczba rzędów i kolumn losowych prostokątów
[12] kiedy obraz zostanie wgrany:
[13-14] oblicz szerokość i wysokość prostokątów
[15] rozpocznij animację!
[18-23] Główna funkcja animacji:
[19-20] wylosuj prostokąt
[21] Oto najważniejsza część naszego rozwiązania:
Kopiujemy prostokątną bitmapę, o wymiarach boxWidth x boxHeight i współrzędnych (x * boxWidth, y * boxHeight) z image do Canvas.

<html>

<body>

let image = new Image();

image.src = "example1.jpg";

let canvas = document.getElementById("myCanvas");

let context = canvas.getContext("2d");

let boxWidth, boxHeight;

let rows = 10, columns = 20;

image.onload = function() {

boxWidth = image.width / columns;

boxHeight = image.height / rows;

requestAnimationFrame(animate);

};

function animate() {

let x = Math.floor(Math.random() * columns);

let y = Math.floor(Math.random() * rows);

context.drawImage(image, x * boxWidth, y * boxHeight, boxWidth, boxHeight, x * boxWidth, y * boxHeight, boxWidth, boxHeight);

requestAnimationFrame(animate);

}

</script>

</body>

</html>

Ten program działa w nieskończoność i po prostu wciąż kopiuje prostokąty, które zostały już skopiowane.

Oto ciekawsza wersja, która przełącza dwa obrazy:

Aby to osiągnąć, musimy wprowadzić licznik - counter [13], który będzie zwiększany po każdej ramce animacji [26].
[27-28] Jeżeli licznik osiągnie wartość 500, wyświetl cały obraz. Dzięki temu unikamy sytuacji, gdzie zostały do narysowania 2 lub 3 prostokąty, lecz komputer wciąż losuje inne.
[30-35] Po kolejnych stu ramkach, zamieniamy obraz źródłowy i resetujemy licznik.

<html>

<body>