【Blotter.js】３Dやノイズが入ったようにテキストを表現きるjQuery

こんにちは、ハル@haru_elpisです。

テキストをユラユラさせたり、３Dのようにできる［Blotter.js］の紹介です。

Blotter.jsの使い方

公式ホームページ

Blotter.js

A JavaScript API for drawing unconventional text effects on ...

blotter.js.org

ダウンロード

GitHub - bradley/Blotter: A JavaScript API for drawing unconventional text effects on the web.

A JavaScript API for drawing unconventional text effects on ...

github.com

ダウンロードしたファイルのbuildフォルダ内の「blotter.min.js」・「fliesMaterial.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

HTML head

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/blotter.min.js"></script>
<script src="./js/fliesMaterial.js"></script>

HTML body

<div id="target"></div>

JavaScript

// テキストの設定です。詳細なプロパティは公式のドキュメントにあります。
    let text = new Blotter.Text("Hello", {
        family : "serif",
        size : 200,
        fill : "#171717"
    });
 
    // 仕様するエフェクトを定義。
    let material = new Blotter.FliesMaterial();
    material.uniforms.uSpeed.value = 1.0; // プロパティはこんな感じで設定
    material.uniforms.uPointCellWidth.value = 0.008; //ユニットの大きさ
    material.uniforms.uPointRadius.value = 0.9; //玉の大きさ
 
    // 設定したテキストとエフェクトをセット。
    let blotter = new Blotter(material, { texts : text });
 
    // ほぼおまじない。
    let scope = blotter.forText(text);
 
    // 任意のDOMを用意
    let target = document.getElementById('target');
    scope.appendTo(target);