Function5-Diary 2016年日記

MASTER →　 ADMIN / NEW ENTRY / COMMENT

今日・昨日あったこと、未来予定？をなんか描いています。管理サイトはこちら→「Function5」と「ふらくたる - FRACTAL -」

プロフィール

ＨＮ：

踊る猫耳

ＨＰ：

性別：

非公開

趣味：

日々チョコチョコと絵を描ければいいなぁ・・・と。

なにか

リンク

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

◎魑魅魍魎に黙秘権は無い「objEnemy.split();」

・夢見の目覚めの記憶が消えない現象等による現実との境界があやふやになった世界での出来事。

■ 前置き
当ブログでの構文の表示崩れがあります。
本家サイトに先行ページを設置してあります。
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>

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