I am facing a small issue and I want to incorporate an animation from: http://codepen.io/chuckeles/pen/mJeaNJ
My main query is how can I modify it so that instead of dots, there would be small images? Which part of the code should I edit for this purpose? I am unsure about where to begin, so any guidance on which section needs editing to change dots to images would be greatly appreciated. Full Javascript code provided below:
// --- CANVAS ---
var canvas = document.getElementById("bg");
var ctx = canvas.getContext("2d");
// --- UTILS ---
// request frame
var requestFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
// window resizing
(window.onresize = function() {
// set new canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})();
// --- STARS ---
var Star = function(x, y) {
this.x = x || 0;
this.y = y || 0;
this.mx = 0;
this.my = 0;
this.distance = 0;
this.mult = Math.random() * 0.4 + 0.6;
};
// --- GLOBALS ---
// the star array
var stars = [];
// stars to remove from the array
var starsToRemove = [];
// create random stars
for (var i = 0; i < 60; ++i) {
// pos
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
// create
stars.push(new Star(x, y));
}
...
// start loop
requestFrame(loop);