Why can't I set manual images

[anthonycmain]

I am trying to make a specific set of icons float around that are clickable.

I want them to look similar to the attached. So I could use an icon font but I'm not sure how I can add the border.

In the meantime I have been trying to add an manual particles with individual icons. This is the code I am using, which generates 5 particles, 1 with an image (that doesnt work), 1 with a poop icon and 3 circles.

Any idea whats wrong with the image code?

tsParticles.load("primary-particles2", {
            fpsLimit: 60,
            fullScreen: {
                enable: true
            },
            manualParticles: [{
                position: { //Poop
                    x: 50,
                    y: 50
                },
                options: {
                    color: {
                        value: "#000"
                    },
                    shape: {
                        image: {
                            height: 182,
                            src: "https://vignette.wikia.nocookie.net/hollowknight/images/3/39/B_Pirmal_Aspid.png/revision/latest?cb=20170412194723",
                            width: 143
                        },
                        type: "image"
                    },
                    opacity: {
                        value: 1
                    },
                    size: {
                        value: 32
                    }
                }
            }, { // Image test
                position: {
                    x: 25,
                    y: 25
                },
                options: {
                    color: {
                        value: "#000"
                    },
                    shape: {
                        type: "char",
                        character: [{
                            fill: true,
                            font: "Verdana",
                            value: ["💩"],
                            style: "",
                            weight: 400
                        }]
                    }
                }
            }, {
                // Red one
                position: {
                    x: 75,
                    y: 75
                },
                options: {
                    color: {
                        value: "#f00"
                    }
                },
            }, { // Standard
                position: {
                    x: 25,
                    y: 75
                }
            }, { // Standard
                position: {
                    x: 75,
                    y: 25
                }
            }],
            particles: {
                number: {
                    value: 0,
                    density: {
                        enable: false,
                        value_area: 1000
                    }
                },
                color: {
                    value: "#1a3b4f"
                },
                shape: {
                    type: "circle",
                    stroke: {
                        width: 4,
                        color: "#ffffff"
                    },
                    polygon: {
                        nb_sides: 5
                    },
                    image: {
                        src: "",
                        width: 100,
                        height: 100
                    }
                },
                opacity: {
                    value: 1,
                    random: false,
                    anim: {
                        enable: false,
                        speed: 1,
                        opacity_min: 0.1,
                        sync: false
                    }
                },
                size: {
                    value: 35,
                    random: false,
                    anim: {
                        enable: false,
                        speed: 40,
                        size_min: 0.1,
                        sync: false
                    }
                },
                line_linked: {
                    enable: true,
                    distance: 300,
                    color: "#ffffff",
                    opacity: 1,
                    width: 2
                },
                move: {
                    enable: true,
                    speed: 2,
                    direction: "none",
                    random: false,
                    straight: false,
                    out_mode: "bounce",
                    bounce: true,
                    attract: {
                        enable: false,
                        rotateX: 600,
                        rotateY: 1200
                    }
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onHover: {
                        enable: true,
                        mode: "bubble"
                    },
                    onclick: {
                        enable: false,
                        mode: "push"
                    },
                    resize: true
                },
                modes: {
                    grab: {
                        distance: 400,
                        line_linked: {
                            opacity: 1
                        }
                    },
                    bubble: {
                        distance: 400,
                        size: 40,
                        duration: 2,
                        opacity: 8,
                        speed: 3
                    },
                    repulse: {
                        distance: -100,
                        duration: 0.4
                    },
                    push: {
                        particles_nb: 4
                    },
                    remove: {
                        particles_nb: 2
                    }
                }
            },
            detectRetina: true,
        });

[matteobruni]

I've tested your config and there's an issue with the legacy shape.image options.

I've updated it with the latest version using shape.options.image and it's working.

The updated config below

tsParticles.load("primary-particles2", {
  fpsLimit: 60,
  fullScreen: {
    enable: true
  },
  manualParticles: [
    {
      position: {
        //Poop
        x: 50,
        y: 50
      },
      options: {
        color: {
          value: "#000"
        },
        shape: {
          options: {
            image: {
              height: 182,
              src:
                "https://vignette.wikia.nocookie.net/hollowknight/images/3/39/B_Pirmal_Aspid.png/revision/latest?cb=20170412194723",
              width: 143
            }
          },
          type: "image"
        },
        opacity: {
          value: 1
        },
        size: {
          value: 32
        }
      }
    },
    {
      // Image test
      position: {
        x: 25,
        y: 25
      },
      options: {
        color: {
          value: "#000"
        },
        shape: {
          type: "char",
          character: [
            {
              fill: true,
              font: "Verdana",
              value: ["💩"],
              style: "",
              weight: 400
            }
          ]
        }
      }
    },
    {
      // Red one
      position: {
        x: 75,
        y: 75
      },
      options: {
        color: {
          value: "#f00"
        }
      }
    },
    {
      // Standard
      position: {
        x: 25,
        y: 75
      }
    },
    {
      // Standard
      position: {
        x: 75,
        y: 25
      }
    }
  ],
  particles: {
    number: {
      value: 0,
      density: {
        enable: false,
        value_area: 1000
      }
    },
    color: {
      value: "#1a3b4f"
    },
    shape: {
      type: "circle",
      stroke: {
        width: 4,
        color: "#ffffff"
      },
      polygon: {
        nb_sides: 5
      },
      image: {
        src: "",
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 1,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 35,
      random: false,
      anim: {
        enable: false,
        speed: 40,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 300,
      color: "#ffffff",
      opacity: 1,
      width: 2
    },
    move: {
      enable: true,
      speed: 2,
      direction: "none",
      random: false,
      straight: false,
      out_mode: "bounce",
      bounce: true,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onHover: {
        enable: true,
        mode: "bubble"
      },
      onclick: {
        enable: false,
        mode: "push"
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 400,
        line_linked: {
          opacity: 1
        }
      },
      bubble: {
        distance: 400,
        size: 40,
        duration: 2,
        opacity: 8,
        speed: 3
      },
      repulse: {
        distance: -100,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  detectRetina: true
});

[anthonycmain]

Thanks for your support, I see the subtle difference, I didnt notice this deprecation mentioned in the docs, but maybe I missed it. However I have tried this code and it doesnt work either. I still dont get the image particle appearing. Just the other 4

[anthonycmain]

Sorry my fault, I was using an old JSDelivr reference and I hadnt realised

All working now, thanks

[anthonycmain]

This works well, but for some reason I am getting duplicates for each manual particle any ideas why? @matteobruni

[anthonycmain]

So I have revised my code below, but for some reason the final image is the only icon that is displayed, the other particles appear but they all show the final image. They are also duplicated for some reason. This doesnt seem to happen if I only have 1 manual particle with an image. I think this is a bug

tsParticles.load("primary-particles", {
            fpsLimit: 60,
            fullScreen: {
                enable: true
            },
            manualParticles: [{ // List
                options: {
                    shape: {
                        options: {
                            image: {
                                height: 90,
                                src: "icons/list.png",
                                width: 90
                            }
                        },
                        type: "image"
                    },
                    opacity: {
                        value: 1
                    }
                }
            },
            { // Pin
                options: {
                    shape: {
                        options: {
                            image: {
                                height: 90,
                                src: "icons/map.png",
                                width: 90
                            }
                        },
                        type: "image"
                    },
                    opacity: {
                        value: 1
                    }
                }
            },
            { // News
                options: {
                    shape: {
                        options: {
                            image: {
                                height: 90,
                                src: "icons/rss.png",
                                width: 90
                            }
                        },
                        type: "image"
                    },
                    opacity: {
                        value: 1
                    }
                }
            },
            { // Chat
                options: {
                    shape: {
                        options: {
                            image: {
                                height: 90,
                                src: "icons/chat.png",
                                width: 90
                            }
                        },
                        type: "image"
                    },
                    opacity: {
                        value: 1
                    }
                }
            },
            { // Config
                options: {
                    shape: {
                        options: {
                            image: {
                                height: 90,
                                src: "icons/config.png",
                                width: 90
                            }
                        },
                        type: "image"
                    },
                    opacity: {
                        value: 1
                    }
                }
            },
            { // Lock
                options: {
                    shape: {
                        options: {
                            image: {
                                height: 90,
                                src: "icons/lock.png",
                                width: 90
                            }
                        },
                        type: "image"
                    },
                    opacity: {
                        value: 1
                    }
                }
            }
            ],
            particles: {
                number: {
                    value: 0,
                    density: {
                        enable: false,
                        value_area: 1000
                    }
                },
                color: {
                    value: "#1a3b4f"
                },
                shape: {
                    type: "circle",
                    stroke: {
                        width: 4,
                        color: "#ffffff"
                    },
                    polygon: {
                        nb_sides: 5
                    },
                    image: {
                        src: "",
                        width: 100,
                        height: 100
                    }
                },
                opacity: {
                    value: 1,
                    random: false,
                    anim: {
                        enable: false,
                        speed: 1,
                        opacity_min: 0.1,
                        sync: false
                    }
                },
                size: {
                    value: 35,
                    random: false,
                    anim: {
                        enable: false,
                        speed: 40,
                        size_min: 0.1,
                        sync: false
                    }
                },
                line_linked: {
                    enable: true,
                    distance: 300,
                    color: "#ffffff",
                    opacity: 1,
                    width: 2
                },
                move: {
                    enable: true,
                    speed: 2,
                    direction: "none",
                    random: false,
                    straight: false,
                    out_mode: "bounce",
                    bounce: true,
                    attract: {
                        enable: false,
                        rotateX: 600,
                        rotateY: 1200
                    }
                }
            },
            interactivity: {
                detect_on: "window",
                events: {
                    onHover: {
                        enable: true,
                        mode: "attract",
                    },
                    onClick: {
                        enable: true,
                        mode: "bubble"
                    },
                    resize: true
                },
                modes: {
                    attract: {
                        distance: 100,
                        duration: 0.4,
                        easing: "ease-out-quad",
                        factor: 1,
                        maxSpeed: 50,
                        speed: 1
                    },
                    grab: {
                        distance: 400,
                        line_linked: {
                            opacity: 1
                        }
                    },
                    bubble: {
                        distance: 400,
                        size: 60,
                        duration: 1,
                        opacity: 8,
                        speed: 3
                    },
                    repulse: {
                        distance: 100,
                        duration: 0.4
                    },
                    push: {
                        particles_nb: 4
                    },
                    remove: {
                        particles_nb: 2
                    }
                }
            },
            detectRetina: true,
        });

[matteobruni]

Yes, that's definitely a bug. Anyway, I have a workaround, but your config needs some changes.

You can see the workaround here: https://codepen.io/matteobruni/pen/wvrWaXb

This is what I did:

• I moved all the images together in the main particles.shape section
• I changed the default type to image so those images will be loaded in the container.
• I set reduceDuplicates: true above shape (the order is not important, but it's where I've placed it) so particles will follow an order instead of being random picked
• I added a position to manual particles to check that each particles will spawn with the same configuration

Let me know if it fits, I'll investigate the issue, I know what's wrong but it's tricky to fix.