こんにちは。センバクです。
タイリングのコード（いつもおかずさんのnote記事を参考にしています）であそぼうと思い立ったのですが、特に模様も思い浮かばなかったので、手書きの絵を表示させたら可愛いかな、と猫と犬の絵を四枚描き、コードで編集し、作品にしました。
なんとなく物足りない気がして、この絵が動いたらいいのに…と思いました。なので今日は絵を動かしてみようと思います。
p5.jsでアニメーションを作れるライブラリがあったことを思い出しました。p5.playです。試してみたら、とても簡単にアニメーションが作れたので紹介します。ただ、いろいろある機能のうち、パラパラアニメのように、画像をつなげてアニメーションにする機能しか試していないので、それだけを紹介します。公式のExampleの、 Animations – creationの部分に当たります。
Exampleを見ていると、もっといろいろできそうで楽しそうです！
準備
-
http://molleindustria.github.io/p5.play/ ここからライブラリをダウンロードします。解凍したフォルダの中に、「lib」というフォルダがあります。さらにその中に「p5.play.js」というファイルがあるので、手元のライブラリフォルダにそのp5.play.jsをコピペしていれます。
-
htmlファイルの ヘッドの中の、ライブラリ参照している場所に以下の文を足します。「../libraries」の部分は、さっきp5.play.jsを入れたフォルダの名前にしてください。。
<script src="../libraries/p5.play.js" type="text/javascript"></script> -
アニメーションさせたい絵を準備します。パラパラ漫画やGIFアニメを作ったことはありますか？ そう、この作業が一番ボリュームがあります！今回絵は一枚ずつ、pngで保存しましたが、一枚の画面に整列させて描いても、アニメーションさせられそうでした。-> Creating animations from sprite sheets
少しずつ変化する絵を、たくさん書いていきます。今回は、あくびをする猫を、９枚分描きました。
コーディング！
準備完了です！
コーディングに移りましょう〜。
let cat;
function preload() {
cat = loadAnimation("img/00.png", "img/01.png", "img/01.png", "img/02.png", "img/03.png", "img/04.png", "img/05.png", "img/06.png", "img/07.png", "img/08.png", "img/07.png", "img/08.png", "img/07.png", "img/06.png");
}- まずは画像を読み込みます。index.htmlやsketch.jsと同じフォルダの中に、画像を盛り込んだimgというフォルダを作りました。"img/00.png"は、imgフォルダの中の、00.pngというファイル、という感じでしょうか。絵に、連番で名前をつけておくと、
//create an animation from a sequence of numbered images
一連の番号付き画像からアニメーションを作成します
//pass the first and the last file name and it will try to find
最初と最後のファイル名を渡すと、その間にあるファイルを見つけようとします
とのことです。今回は量も多くなかったし、絵を並べ替えたりして調整したかったので、最初と最後だけ書いて間のファイルを取得させるのではなく、直接全部書きました。
そして、あとはもう簡単です。
function setup() {
createCanvas(600, 600);
noStroke();
}
function draw() {
background("#f4f1de"); //いいクリーム色
push();
translate(width/2,height/2);
scale(width/1200)
animation(cat,0,0)
pop();
}- 元の絵のサイズのままだと大きいので、scale()で小さくしました。
-
animation(画像たちに設定した変数 , x, y); これで表示されます！原点(0,0)は、画像の中心のようでした。
さてさて、できた画像はこちら！
↓コードの全体です。
let cat;
function preload() {
cat = loadAnimation("img/00.png", "img/01.png", "img/01.png", "img/02.png", "img/03.png", "img/04.png", "img/05.png", "img/06.png", "img/07.png", "img/08.png", "img/07.png", "img/08.png", "img/07.png", "img/06.png");
}
function setup() {
createCanvas(600, 600);
noStroke();
}
function draw() {
background("#f4f1de"); //いいクリーム色
//stroke("#355070");
push();
translate(width/2,height/2);
scale(width/1200)
animation(cat,0,0)
pop();
}
タイリングもしてみました。思ったより重くないです！
絵をたくさん書くのが苦ではないよ！という方、ぜひやってみてくださいな。HappyCoding~😆