キャンバスの勉強No.17(canvasにて描画No.14)

2021.05.31.07:00



 キャンバス内で「開閉もの」のアニメーショ

 ン画像を描く処理の第六弾です。

 前回のさっちゃんの障子の「開閉もの」のアニメ

 画像の改定版です。然しながら、これでも未だ完

 成したとは言えません。下欄の画像に示す通り、

 沢山の星の現れる画像と流れ星がひっきりなしに

 落ちる画像との2つのアニメ画像があるのですが、

 本来はこれらを1つの画像に纏めて合成したかった

 のです。色々と試行錯誤したのですが、中々上手く

 行きませんでした。この辺がキャンバスで描くアニ

 メ処理の限界かも知れません。



 これは、JavaScriptで使用するsetIntervalを

 キャンバスの画像処理に応用する際に、夕闇の迫

 タイマー時間と流れ星の落ちるスピードのタイマー

 時間が著しく異なる場合、これを1つのキャンバス

 枠に挿入した場合と、別々のキャンバスに挿入して

 2つのキャンバスをそれぞれ層状に配置した場合と

 も、いずれれの方法でもweb上で上手く合成されて

 表示する事が出来ませんでした。

 仕方がないので、以下にその2つのアニメ画像を

 載せて置きます。



 「夜へ」、「朝へ」のボタンを押すたびに

 夜になったり朝になったりします。



 「夜へ」、「朝へ」のボタンを押すたびに

 「流れ星」が次々と加速して落ちて行きます。

キャンバスの勉強No.16(canvasにて描画No.13)

2021.05.24.07:00



 キャンバス内で「開閉もの」のアニメーショ

 ン画像を描く処理の第五弾です。

 今回はさっちゃんのブログで掲載されていた障子

 の「開閉もの」のアニメ画像をお借りしました。

 然しながら未だ完成していません。実はこれも

 以前JavaScript変換によるフラッシュ画像を作成

 していました。ところがこれをキャンバスにより

 作り変えようとすると、なかなか上手く行かない

 のです。本来はアジサイの「夜へ」のボタンを押

 して夕闇が迫ると星や流星が現れる手筈なのです

 が、この処理をキャンバス内でJavaScript記述す

 るのに手古摺っていて、一週間では間に合いませ

 んでした。以下のブログ先の画像と見比べて下さ

 い。



 ParaFlaのロールバックと云う便利な機能

 に代わるものとしてJavaScriptではsetInterval

 やsetTimeoutと云うタイマー処理があります。

 また、JavaScriptでアニメーションを自由自在

 に制御するにはrequestAnimationFrameと云う

 ものもあります。目下これらを使って複数のア

 ニメ運動の同時進行や時間差処理を実装すべく

 悪戦苦闘しています。本来の原画の方は右側に

 もアジサイのボタンによるアニメ処理がありま

 す。これを来週までに完成させる事が出来るか

 どうかこれからの課題です。

 因みに小生が以前投稿した「開閉もの」のアニ

 メの記事は

ここをクリック


 です。また、さっちゃんが投稿された和室の

 障子の開閉アニメの記事は

ここをクリック


 して下さい。



 不本意ながら、未だ未完成の「開閉もの」

 のアニメ画像を載せて置きます。

キャンバスの勉強No.15(canvasにて描画No.12)

2021.05.17.07:00



 キャンバス内で「開閉もの」のアニメー

 ションを描く処理の第四弾です。

 今回はhanahanaさんのブログで掲載されていた

 カーテンの「開閉もの」のアニメ画像をお借りし

 ました。どっしりとした分厚いカーテンの後ろ側

 に半透明の薄いカーテンが掛かっています。厚い

 カーテンの開閉と共に薄いカーテン超しに見える

 窓の外から鳴き声と共に鳥達が代わる代わる現れ

 ます。



 フラッシユ時代はParaFlaにロールバックと

 云う機能があって、フレームカウントの位置を

 自由に設置する事により、複数のスクリプトを

 同時に進行させたり、時間差による進行を促し

 たりと多彩なアニメ運動を演出する事が出来ま

 した。然しながらキャンバスのsetIntervalで

 はそのような複雑な時間処理を行う事が出来ま

 せん。そこでここでは鳴き声の音声ファイルを

 全て10秒間に編集し直して、その時間に合わ

 せてカーテンの開閉や鳥達の交代の出現を調整

 しました

 因みにhanahanaさんのブログで掲載されたカー

 テンの「開閉もの」のアニメ画像は

ここをクリック


 して下さい。



 開閉するカーテンに連動して前回とは

 異なる10種類の鳥達の出現とその鳴き声

 をお楽しみ下さい。

キャンバスの勉強No.14(canvasにて描画No.11)

2021.05.10.07:00



 キャンバス内で「開閉もの」のアニメー

 ションを描く処理の第三弾です。

 今回はTASOGAREさんのブログで掲載されていた

 障子窓の「開閉もの」のアニメ画像をお借りし

 ました。また鳥と云えばその鳴き声が美しいで

 すよね。そこで美声の持ち主の鳥10羽を選んで

 そのボイスを取り込みました。鳥達の画像が代わ

 る度に一覧リストから選んで鳴き声をお聞き下さ

 い。



 本来は鳥画像の交代に連動してその鳴き声を

 表現したかったのですが、キャンバスではその

 制御がどうしても上手く行きませんでした。

 止むを得ずこのような一覧表から選択して個々に

 音声を流すように変更しました。

 開閉する障子窓の外に現われる鳥達と

 その鳴き声をお楽しみ下さい。

キャンバスの勉強No.13(canvasにて描画No.10)

2021.05.03.07:00



 キャンバス内で「開閉もの」のアニメー

 ションを描く処理の第二弾です。

 今回は金木犀さんのブログで掲載されていた

 障子の「開閉もの」のアニメ画像をお借りし

 ました。また前回の鳥達とは異なる20種類

 の鳥類を背景画像に配置しました。更にそれ

 ぞれの鳥達の名前も画像に連動して配置して

 描画しました。



 フラッシユ時代には文字列を表示する際にも

 その出現から消滅するまでの過程の描画を複雑

 なアニメ運動により演出する事が出来ました。

 然しながら、このキャンバスではそのような

 スクリプト処理が出来ません。せいぜいフォン

 トや文字色やサイズ等を設定する事しか出来ま

 せん。従って、踊るような文字列の動きを表現

 出来ず、ただ静的に無味乾燥な表示に留まるの

 みです。

 因みに金木犀さんのブログで掲載された障子の

 「開閉もの」のアニメ画像は

ここをクリック


 して下さい。

 開閉する障子枠の背景に現われる

 鳥達の画像をご覧下さい。

プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR