I'm using Particles.js (see here: https://github.com/VincentGarreau/particles.js/ or http://vincentgarreau.com/particles.js/) for a design project.
Is it possible to have multiple images as 'shapes', different 'image.src'? If so how would I go about doing this?
Thanks
Yes, This is possible. See https://www.josh.ai/ (that's not my website but it does what you want).
Look at the source, but more specifically, I think he modified the particles.js file: https://www.josh.ai/static/js/particles.min.js
Take a look at this portion of the code:
switch (i.canvas.ctx.fillStyle = n, i.canvas.ctx.beginPath(), a.shape) {
case "circle":
i.canvas.ctx.arc(a.x, a.y, t, 0, 2 * Math.PI, !1);
break;
case "edge":
i.canvas.ctx.rect(a.x - t, a.y - t, 2 * t, 2 * t);
break;
case "triangle":
i.fn.vendors.drawShape(i.canvas.ctx, a.x - t, a.y + t / 1.66, 2 * t, 3, 2);
break;
case "polygon":
i.fn.vendors.drawShape(i.canvas.ctx, a.x - t / (i.particles.shape.polygon.nb_sides / 3.5), a.y - t / .76, 2.66 * t / (i.particles.shape.polygon.nb_sides / 3), i.particles.shape.polygon.nb_sides, 1);
break;
case "star":
i.fn.vendors.drawShape(i.canvas.ctx, a.x - 2 * t / (i.particles.shape.polygon.nb_sides / 4), a.y - t / 1.52, 2 * t * 2.66 / (i.particles.shape.polygon.nb_sides / 3), i.particles.shape.polygon.nb_sides, 2);
break;
case "image":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
r && e()
break;
case "image2":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex2a.png';
r = element;
r && e()
break;
case "image3":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex3a.png';
r = element;
r && e()
break;
case "image4":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex4a.png';
r = element;
r && e()
break;
case "image5":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex5a.png';
r = element;
r && e()
break;
case "image6":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex6a.png';
r = element;
r && e()
break;
case "image7":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex7a.png';
r = element;
r && e()
break;
case "image8":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex8a.png';
r = element;
r && e()
break;
case "image9":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex9a.png';
r = element;
r && e()
break;
case "image10":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
var element = document.createElement('img');
element.src = 'https://s3.amazonaws.com/josh.ai/hex10a.png';
r = element;
r && e()
}
Each case for image1, image2 and so on link to a different png file. I Think looking at that person's code should get you somewhere, if you are still interested.