パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化(PixiJSの応用) 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
![JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/df999aa72a7a98e1a860191c97d31925bbbd7257/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F221216%2Fimages%2Feyecatch.png)