demouth::blogスマートフォン用の表示で見るdemouth::blogこの広告は、90日以上更新していないブログに表示しています。LibrariesPHPにはGDモジュールという画像処理系のモジュールが用意されています。関数が使用する事ができ、基本的な機能は一通り用意されています。さくらのレンタルサーバーやロリポップでもこれらの関数を標準で使えたりするので、PHPでちょっとした画像処理や図形描画をする敷居は結構低いんじゃないかな、と思ってます。軽くググってみた感じ、PHPでの図形描画やアニメーションについて紹介をしている記事があまり見つからなかりませんでした。需要がないというのが理由なのだと思いますが、面白そうなのでサンプルを作りながら軽くPHPでのアニメーション表現について紹介してみようと思います。前置きGDの関数は結構癖があります。単純にリサイズしたりする程度なら簡単に実装でき問題ありませんが、少し複雑な事をしようとすると、その癖を知っておく必要があり面倒です。今回は生でGD系の関数を使うのでは無く、DmImageというラッパーライブラリを使用する事にします。ProcessingのソースコードをPHPに移植まずはメジャーなアニメーション表現のソースコードをPHPに移植しながら、説明をしていこうと思います。ビジュアル表現でメジャーなのはProcessingだと思います。ProcessingはJavaをベースにしつつビジュアル表現に特化したプログラミング環境となっており、開発環境の準備が手軽で、さらにサンプルコードもデフォルトで数多く用意されている為とっつきやすく人気が高いようです。このサンプルコードの中からPHPへ移植しやすそうなサンプルをピックアップしてみました。Treeというサンプルコードです。YouTubeまずProcessingの言語説明を軽くしておきます。Processingはsetup()関数を宣言しておくと一番最初に実行されます。この関数の中にはウィンドウサイズの初期化やフレームレートの指定などを書いたりします。draw()関数が1フレーム毎に呼ばれるので、ここに描画処理を書いておきます。次にこのProcessingのサンプルコードのdraw()関数の描画処理について説明をします。このサンプルでは、最初にマウス座標を取得し、このマウス座標を種として、二本の枝を再帰的に描画していきます。再帰的に描画する際、二本の枝を段々短かくなるように描画していき、ある程度の長さ未満になったら1フレーム分の描画を終了します。1フレーム分の描画が終わると、一定時間後に再度draw()関数が呼び出され、上記の処理を繰り返します。それによりマウスの座標によって枝の角度が変わるアニメーションになって見えます。これをPHPに移植しますが、いきなりアニメーションを実装するのは難しいので一旦静止画を生成する処理として移植する事にします。サーバー側で全ての処理を行うため、マウス座標を取得せずランダム値を使い、一回分の描画処理の後にgif画像として出力する事にします。Processingにデフォルトで用意されている関数の多くは、PHPでは用意されていないので、なるべく近いコードになるように移植します。※特にpushMatrix()やグローバル変数の使い方が違っています。移植結果の画像と、ソースコードは下記になります。キーワードを使ったり引数が多かったり結構無理やりです。PHPから出力された画像は上記の通りで、結構再現度高い気がします。アニメーションにしてみる静止画を出力する事に成功しましたので、今度はアニメーションさせてみます。先程作成したPHPのコードを書き換え、複数の画像ファイルを出力させてしまえば、あとは複数の画像ファイルをアニメーションにする方法はいくつかあります。ImageMagickを使ったり、インストール型のフリーソフトやWebサービスなどなどいろいろありますが、せっかくなのでこれもPHPでやっちゃいます。アニメーションgifを作るライブラリがあるので(こちらを参照)、これを少し使いやすくラップしたクラスを作っておきます。unlink($this->path.$file);}}}}そして前述の移植版プログラムを、少しずつ図形を変化させた画像を100枚ディレクトリに書き出すプログラムに書き換え、最後にgif画像としてマージさせてみます。$movedY);branch($h,$rotate-$theta,$movedX,$movedY);}この実行結果は下記の通りです。※100枚分の画像を生成するので何秒かかかります(環境によりますが)。それっぽくなったと思います。PHPでも気軽にアニメーション描画を実装出来る事が証明できたでしょうか。JavaScriptのソースコードをPHPに移植JavaScript(Canvas)で実装した映画マトリックスっぽい表現が、数週間前にGigazineで紹介され流行りました。ソースコードが短かく簡単に移植できそうなので、これもPHPに移植してみます。http://gigazine.net/news/20130321-matrix-javascript/まず、移植の前にJavaScriptのコードにコメントを書いて解析してみます。WindowのサイズにCanvas要素をリサイズする。33);上記の実装を、PHPで静止画を出力する様に移植してみました。$y+FONT_SIZE;}}JavaScript版と違う主な部分は、PHPにはマルチバイトに対応した文字列を生成する関数がない為、決めうちの配列を用意している適当に決めたフレーム数まで到達したら画像出力する様になっている。Windowサイズを取得せず、決めうちの値を指定しているなどなどです。これをアニメーション化させるとこんな感じになります。$y+FONT_SIZE;}}見た目はJavaScript版に大分近いのではないかと思います。オリジナルアニメーションここまで移植をしてきましたので、最後にオリジナルのアニメーションを作ってみる事にします。※今から実装するのはProcessingやFlashなどでたまに見かける表現ではありますが。仕様はこんな感じです。複数のパーティクルがランダムな座標からランダムな速度で等速移動するパーティクルどうしが近ければ線で結び、近ければ近い程太い線で結ぶ(ただし一定以上の太さにはならない)パーティクルを中心に円を描画し、近くにパーティクルがあればある程大きな円を描画する(ただし一定以上の太さにはならない)これをPHPで実装すると下記の様になりました。静止画バージョンから。2+$node[2]*$node[2]*0.3);}$image->display();そしてアニメーションバージョンは下記の通り。$c);$image->saveTo(DIR_PATH.'img'.$count.'.gif','gif');}これがPHPで動いているとは、なんだか不思議な感じがします。最後にいかがでしたでしょうか。PHPでもこんな事出来るなんて面白いですよね。アニメーションの実装に興味があるPHPerはもちろん、PHPに興味があるASerやJSer方も試してみてもらうと面白いのではないかと思います。詳しいソースはgithubにありますのでご興味ある方は参照ください。PHP7.1に移植してみた。Capture」というアニメーションGifを作るChrome...2013-07-27描画処理のパフォーマンス比較canvasのcontext2dのarc()関数のパフォーマンス比較をしてみま...2012-11-15PHPでドラえもんを描く先日紹介したDmImageを使用すると色々な図形が描けます。(2)月別アーカイブ検索リンクdemouth.netはてなブログをはじめよう!y_dさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。