Function5 [エフェクトアイデア研究

エフェクトアイデア研究_01

■ 目的
JavaScriptを用いてのランダムな文字列による背景イメージの元素材を作成したい。

■ 原型（プロトタイプ）

・目標としてこのようなイメージを作りたい。

■ 作成

○	文字列入力（半角英数字のみ）、1行の文字数選択、行数選択
	文字数が多くなると処理時間が長くなりますので、制限を32文字までにしています。
	・文字列（入力）	：
	・文字の長さ（X軸）	：文字
	・行数（Y軸）	：行
	入力内容クリア	：

◎	内容確認	：
	確認結果	：

○	文字列、1行の文字数、行数の確認
	・文字列（確認）	：　文字
	・文字の長さ（X軸）	：文字
	・行数（Y軸）	：行

◎	作成	：
	↑上記「ランダム作成」ボタンを押下すると、入力文字列を分割後に文字の長さでランダムに連結し、行数分繰り返します。押下ごとに作成結果が変わります。

○	作成結果

	↑上のテキストエリアにフォーカスを当てると、選択領域になります。作成結果をテキストファイル等に複数個の作成結果を保存してください。

■ 活用例その１

◎	作成例
	○入力・選択情報
	・文字列（入力）	：「01」
	・文字の長さ（X軸）	：「32」文字
	・行数（Y軸）	：「17」行
	・作成文字列テキストデータ	：「5」

	○作成文字列元画像ファイル（データ数：５）

	・大きさ(W x H)	：360 x 360 px
	・文字サイズ	：16 px
	・フォント名	：MS ゴシック
	・その他	：フォントは「ボールド」
	★フォントの種類に、「P」が付く「プロポーショナルフォント」では、文字間を詰められ、レイアウトが崩れることがありますので、均等の文字間を保つフォントを選びます。
	・１：
	・２：
	・３：
	・４：
	・５：

	○作成文字列結合動画GIFファイル
	★作成文字列元画像ファイル１～５を、動画GIFファイルとして結合します。
	★動画GIF作成ツールを使用します。
	・描画間隔速度	：10 ミリ秒
	・その他	：ループ描画

■ 活用例その２

◎	活用例その１より応用
	★DivタグやSpanタグを用いて、レイヤーを重ねて切り抜きのように表示します。

	・レイヤー１
	上記の「作成文字列結合動画GIFファイル」を用います。


	・レイヤー２
	透過イメージファイルを用います。
	非透過部分は「白色」にしてあります。
	透過部分をわかりやすくするために背景を青色にしてあります。
	・大きさ(W x H)	：360 x 360 px


	・応用例

	<DIV レイヤー１><IMG レイヤー２></DIV>

	・<DIV レイヤー１>の大きさ(W x H)	：360 x 360 px
	・<IMG レイヤー２>の大きさ(W x H)	：360 x 360 px

	・sample[白版]


	・sample[黒版]

エフェクトアイデア研究_01