tsparticles / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
https://particles.js.org
MIT License
7.73k stars 848 forks source link

[Bug]: I think character shape is broken #2138

Closed JulianCataldo closed 3 years ago

JulianCataldo commented 3 years ago

Contact Details

No response

What happened?

Hello there,

it seems like none of the options for the character shape is working.

When using the live demo or within my project I don't get other styles than default.

Can you change font-size, font-family ?

Thanks a lot.

Version

2.12.2

Which library are you using?

Vue.js 2.x (particles.vue)

tsParticles Configuration

particles:
  number:
    value: 12
    density:
      enable: true
      value_area: 800
  color:
    value: '#ffffff'
  shape:
    type: char
    options:
      character:
        value:
          - V #ue.js
          - N #ext.js
          - N #ode.js
          - W #ordpress
          - G #it
        font: 'Impact'
        # style:
        weight: 800
        fill: true
        size: 80px
    # type: circle
    # stroke:
    #   width: 0
    #   color: '#000000'
    # polygon:
    #   nb_sides: 3
    # image:
    #   # src: bitmap/github.svg
    #   width: 100
    #   height: 100
  opacity:
    value: 0.820681448077164
    random: true
    anim:
      enable: false
      speed: 1
      opacity_min: 0.15
      sync: false
  size:
    value: 112.2385068270074
    random: true
    anim:
      enable: false
      speed: 40
      size_min: 0.08
      sync: false
  line_linked:
    enable: true
    distance: 572.5792308655894
    color: '#ffffff'
    opacity: 0.2
    width: 2
  move:
    enable: true
    speed: 0.3
    direction: top-right
    random: true
    straight: false
    out_mode: out
    bounce: false
    attract:
      enable: true
      rotateX: 1000
      rotateY: 1000
interactivity:
  detect_on: canvas
  events:
    onhover:
      enable: false
      mode: bubble
    onclick:
      enable: false
      mode: repulse
    resize: true
  modes:
    grab:
      distance: 400
      line_linked:
        opacity: 1
    bubble:
      distance: 267.98629615531024
      size: 85.2683669585078
      duration: 2.59865499302119
      opacity: 0.4222814363659434
      speed: 3
    repulse:
      distance: 300.40223321913464
      duration: 0.8
    push:
      particles_nb: 4
    remove:
      particles_nb: 2
retina_detect: true

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

xscode-auto-reply[bot] commented 3 years ago

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.

For urgent issues and priority support, visit https://xscode.com/matteobruni/tsparticles

matteobruni commented 3 years ago

Hi @JulianCataldo,

I just tried here: https://particles.js.org/samples/index.html#chars

and changing the options it works, the font size is not an option, it uses the particle size.

Let me know if you have issues there.