2

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

Atom Digital
  • 23
  • 1
  • 5

1 Answers1

2

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.

SamuelN
  • 1,341
  • 1
  • 10
  • 19
  • How is this even being used? You show the place where the change happens, but how does your json look to create multiple images? – Michael Jun 09 '17 at 13:27
  • 1
    That link isn't relevant anymore. I don't know what I was thinking back then. It was relevant for what OP wanted (and pretty much how I found out how to do it) back then, and thus I decided to share. For context, the code basically replaces the switch statement in the minified `particle.min.js`, which latest version is [here](https://github.com/VincentGarreau/particles.js). I apologize if I'm not helping at all, but that's as much as I recall. – SamuelN Jun 09 '17 at 16:45