Webサイトの背景やテクスチャに使える、依存関係ゼロのWebGL風Canvasシェーダー。npm経由(Reactまたはvanilla JS)で利用するか、Paper上で視覚的にデザインできます。
azlen/initialis
装飾的なドロップキャップや飾り文字を無数に生成し、閲覧、ブックマーク、ダウンロードできるブラウザベースのジェネレーター。
- スター
- 175
- フォーク
- 12
- 未解決の Issue
- 0
- 最終コミット
- 6 日前
これは何?
INITIĀLISは、装飾写本や印刷書籍の本文の冒頭に使われる、大きく装飾された頭文字を探索できる静的Webアプリです。文字、枠と地色、装飾、テクスチャ、2色または3色のインクを紙の背景に重ねて、頭文字をブラウザ上でリアルタイムに生成するため、画像をあらかじめ保存しておく必要はありません。
無限に広がるキャンバスをドラッグして閲覧し、頭文字をクリックしてバリエーションを生成できます。気に入ったものはブックマークして集められます。個別の頭文字やコレクション全体を、複数サイズのPNG、成長アニメーションのWebPまたはMP4、JSON設定としてダウンロードしたり、リンクで共有したりできます。ライブラリスクリプトを使えば、共有リンクや設定オブジェクトから同じ頭文字を他のページに埋め込めます。また、レンダラーはモジュール式で、新しいパターンや枠を個別のファイルとして追加できます。
このサイトの利用にはWebワーカー内でのWebGL2が必要です。古びたページのプレビューにはWebGPUを使い、利用できない場合はフラット表示にフォールバックします。ビルド工程は不要で、任意の静的ファイルサーバーからフォルダーを配信できます。
主な機能
- 01文字、枠、装飾、テクスチャ、インクの設定から、頭文字をブラウザ上でリアルタイムに生成します。
- 02無限に広がるキャンバスを閲覧し、選んだ頭文字のバリエーションを生成できます。
- 03気に入ったものをブックマークし、コレクションとしてダウンロードまたは共有できます。
- 04複数サイズのPNG、成長アニメーションのWebPまたはMP4、JSON設定としてエクスポートできます。
- 05小さなライブラリスクリプトや設定オブジェクトを使って、頭文字を他のページに埋め込めます。
- 06新しいパターンや枠を個別のモジュールとして追加できます。
ユースケース
- 印刷物やWebページのデザインに使う装飾的なドロップキャップを探す。
- 招待状、ポスター、書籍の章扉に使う、装飾写本風の文字を作成する。
- 共有リンクや設定ファイルから、生成した頭文字をWebサイトに埋め込む。
- デザインの着想を得るため、歴史的なものから現代的なものまで、装飾文字のスタイルを探索する。
クイックスタート
- 1
まだインストールしていない場合は、Python 3をインストールします
- 2
静的Webサーバーでプロジェクトフォルダーを配信します
python3 -m http.server 8000 - 3
WebGL2対応ブラウザーでローカルアドレスを開きます
使う前に知っておきたいこと
- このサイトはWebワーカー内でWebGL2を必要とするため、古いブラウザーでは動作しません。
- 「In context」機能にはWebGPUが必要です。利用できない場合は、フラットなページにフォールバックします。
トピック
よくある質問
- initialis とは?
- 装飾的なドロップキャップや飾り文字を無数に生成し、閲覧、ブックマーク、ダウンロードできるブラウザベースのジェネレーター。 INITIĀLISは、装飾写本や印刷書籍の本文の冒頭に使われる、大きく装飾された頭文字を探索できる静的Webアプリです。文字、枠と地色、装飾、テクスチャ、2色または3色のインクを紙の背景に重ねて、頭文字をブラウザ上でリアルタイムに生成するため、画像をあらかじめ保存しておく必要はありません。
- initialis は無料で使えますか?ライセンスは?
- initialis は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- initialis は今もメンテナンスされていますか?
- 活発にメンテナンス中。initialis の最終コミットは 2026年10月31日 です。
- initialis は何に使えますか?
- 印刷物やWebページのデザインに使う装飾的なドロップキャップを探す。 招待状、ポスター、書籍の章扉に使う、装飾写本風の文字を作成する。 共有リンクや設定ファイルから、生成した頭文字をWebサイトに埋め込む。 デザインの着想を得るため、歴史的なものから現代的なものまで、装飾文字のスタイルを探索する。
- initialis のインストール方法は?
- まだインストールしていない場合は、Python 3をインストールします 静的Webサーバーでプロジェクトフォルダーを配信します: python3 -m http.server 8000 WebGL2対応ブラウザーでローカルアドレスを開きます
- initialis はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/azlen/initialis
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
Windows、macOS、LinuxでOpenType、TrueType、UFOなどのフォントを作成・編集・変換できる、無料のオープンソースフォントエディター。
p5.jsは、Web上でのクリエイティブコーディングや描画、インタラクティブ/ジェネラティブなグラフィックス制作に使える、無料のオープンソースJavaScriptライブラリです。
OpenStreetMapのデータを使い、選んだ都市の全道路をブラウザー上で地図風に一括描画します。
点のリストから筆の動きを描き、毛先や墨、かすれの効果を再現するブラウザベースの毛筆エンジンです。
写真を、紙にペンや鉛筆、インク、絵の具で描いたような一筆描きに変換し、制作過程もブラウザー上で動画にします。