canvas-confetti でハート型の紙吹雪を飛ばしたい

Question

実現したいこと　　js

とあるサイトでハート型の紙吹雪を飛ばしたいと思っております。

具体的には
https://www.kirilv.com/canvas-confetti/ 　ページ内のSchool Pride という画面の両端から紙吹雪が飛び出る動きが理想なのですが、出てくる紙吹雪をハートのシェイプにしたいです。

ハートのシェイプは同一ページ内のValentine’s day で出てくるものを使いたいです。

わかる方がいらっしゃいましたらご協力よろしくお願いいたします。

発生している問題・エラーメッセージ

School Pride のjsに

const colors = ["#bb0000", "#ffffff"];
const shapes: ["heart"],
という風にheartの記述を加えたのですが、吹雪が出なくなってしまいました。

補足情報（FW/ツールのバージョンなど）

Particles.jsというのも見てみましたが少しちがうようでしたのでやめました。
https://vincentgarreau.com/particles.js/

参考
https://confetti.js.org/

Answer 1

紛らわしいですが
https://github.com/catdad/canvas-confetti
https://github.com/matteobruni/tsparticles
は、別のライブラリのようです。

shapes に heart が使えるのは
https://github.com/matteobruni/tsparticles
の方でした。

以下、tsparticles で heart を使った場合の例になります。
https://jsfiddle.net/cx20/kd5wrnaL/3/

Comments

[cx20]

> ハートのシェイプを用いつつ、
> School Prideのような両端から飛び出す動き

こんな感じで如何でしょうか？
https://jsfiddle.net/cx20/kd5wrnaL/17/

[higashi]

ありがとうございます。まさにこの動きです。昨日も自分で半日くらいいろいろ調べていたんですが分からずどうしようかと迷っていたところでした。

ちなみにcx 20さんはMacで作業されていますでしょうか。
理由はわからないのですがwindowsで　https://jsfiddle.net/cx20/kd5wrnaL/17/　を
見ると動きが全然異なるんですよね
winだと下にむかって放射状に広がるような動きになります。

今回の質問とは関係ないですが、理由がわかれば教えてください

[cx20]

> ちなみにcx 20さんはMacで作業されていますでしょうか。
いいえ。Windowsです。

> winだと下にむかって放射状に広がるような動きになります。
なんでしょうね。自分が試した限りでは School Pride と同様に左右から花吹雪が表示されました。

[higashi]

そうなんですね　ご確認ありがとうございました。
なにかこちらでわかったらこちらに書き込みいたします。
いろいろとありがとうございました。本当に助かりました