【p5.js】スクリプトの練習がてら、Webアニメーションを作ってみた☆

今回はいつもと違ってちょっと短めの単発記事です。連休を利用して勉強していた p5.js スクリプトを利用して、Webブラウザでアニメーションをさせてみた結果をご紹介します。

ブラウザだけでも完成度の高いものが作れそう!

p5.js とは、WebブラウザのJavaScriptを利用してイメージ処理やアニメーションプログラムなどを作ることができるスクリプト。ProcessingというシステムをJavaScript用に移植したものです。

まだ始めたばかりなので全然慣れていませんが、数時間いろいろと試しながらじっくりと取り組んでみた結果、何とか下に紹介している状態まで作れるようになりました。

特に何かできるわけでもない、無限ループのメッセージ出力とキャラクタのアニメーションのみですが、このスクリプトを使いこなせるようになればちょっとしたゲームも作れそうです。

ちなみにこのアニメーションで使ったキャラクタは、数年前にリリースしたことのあるiPhone用ゲームアプリで使ったキャラクタたち。練習作品的な感じで作った、ゲーム&ウォッチ風のシンプルアクションゲームでした。

この p5.js を使ってそのゲームを再現してみたいなぁ。ブラウザだけで遊べるから便利ですよね。Windows版Chrome・iOSのSafariで動作確認できています。他のブラウザでも普通に動くはず!

環境を選ばないスクリプトというのが、プログラムを作る側からしたらとても助かります。もっと色々できるようにならなければ!

それでは、練習作品ではありますがご覧下さいませ~☆


ERROR: failed to load html object!


ミニゲームなどを完成させることができたら、また記事としてアップさせたいと思います。いつになるかは全くわかりませんけどね☆

ということで、練習作品ひとまず完成報告でした。

人気ブログランキング参加中です♪

error: Content is protected !!