This “unlimited objects” effect is something I saw for the first time at early 90’s in Amiga demos. I’ve implemented this earlier in Monkey X. This time it’s implemented in JavaScript. The idea is, that there’s one moving object, the rest is real time animation…
Video:
The source code:
<!DOCTYPE html>
<html lang="fi">
<head>
<link rel="StyleSheet" href="tyylit.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8"/>
<title>Unlimited amount of objects! :-)</title>
</head>
<script>
var canvases = [];
var CTXs = [];
var angle = 0;
var ctx = undefined;
var r = undefined;
var rr = 0;
var counter = 0;
var image = new Image();
window.onload = function() {
let canvas = document.getElementById("canvas");
canvas.setAttribute("width",document.documentElement.clientWidth);
canvas.setAttribute("height",document.documentElement.clientHeight);
ctx = canvas.getContext("2d");
let backCanvas = document.createElement("canvas");
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
for (let i = 0; i < 16; i++) {
let copy = backCanvas.cloneNode();
canvases.push(copy);
let context = copy.getContext("2d");
CTXs.push(context);
}
// Put your own image here
image.src = "image.png";
}
function unlimited_objects() {
ctx.clearRect(0,0,canvas.width,canvas.height);
r = (1 + Math.sin(angle)) * 100 + rr;
CTXs[counter].drawImage(image, Math.cos(angle) * r + canvas.width / 2, Math.sin(angle) * r + canvas.height / 2 - 100, 64, 64);
ctx.drawImage(canvases[counter], 0,0);
angle += Math.PI / 180;
rr+=0.1;
counter++;
if (counter == 16) {
counter = 0;
}
window.requestAnimationFrame(unlimited_objects);
}
image.onload = function() {
window.requestAnimationFrame(unlimited_objects);
}
</script>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
The line, where CSS style is loaded in not needed.
Feel free to use this code.
