p5.play.jsでパラパラアニメをつくりたい。

catsAndDogsTiling
こんにちは。センバクです。
タイリングのコード(いつもおかずさんの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


少しずつ変化する絵を、たくさん書いていきます。今回は、あくびをする猫を、9枚分描きました。

コーディング!

準備完了です!
コーディングに移りましょう〜。

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~😆

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA