【Processing】画像を自動スクロールさせる方法

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回は、一枚の画像を横スクロールする方法を紹介したいと思います。

画像の準備

まず、スクロールさせたい画像を用意しましょう。
今回は、以下のような星空のイラストを作ってみました。これをずっと横に流れる（スクロールする）ようにプログラムを作っていきます。

コードです。Enterキーを押すと、画像として保存できます。Processingメニューの スケッチ＞スケッチフォルダーを開く の中に保存されています。

void setup() {
 size(1280, 720);
 background(0);
 for (int i=0; i<20; i++) {
   star(random(50,width-50), random(25,height-25));
 }
}

void star(float x, float y) {

 fill(255,255,50);
 noStroke();

 beginShape();
 vertex(x, y);
 vertex(x+20, y);
 vertex(x+25, y-15);
 vertex(x+30, y);
 vertex(x+50, y);
 vertex(x+35, y+10);
 vertex(x+40, y+25);
 vertex(x+25, y+15);
 vertex(x+10, y+25);
 vertex(x+15, y+10);
 endShape(CLOSE);
}

void keyPressed() {
 if (keyCode == ENTER) {
   save("hoshizora" + ".png");
 }
}

アニメーションの作成

実際にスクロールするプログラムを書いてみました。
用意したhoshizora.pngの画像をⅹ軸マイナス方向に動かし、画像の右上のx座標の位置が0より小さくなった時、今表示している画像のすぐ後ろ（x座標が1280動いた位置）に次のhoshizora.pngを貼りつけることで、ループしているように見せ、スクロールを表現しています。今回はそれを30回繰り返しています。
また、saveFrame()関数をコメントアウトしていますが、これを有効にすると、実行しているアニメーションを一コマ一コマ保存することができます。しかし、frameRateはデフォルトの60fpsのまま（一秒間に60コマ）ですので、あまり長く実行すると、コマ画像の量がすごいことになります。

PImage img;
float x =0, speed = 3;

void setup() {
 size(1280, 720);
 img = loadImage("hoshizora.png");
}

void draw() {
 background(0);
 x -= speed;
 image(img, x, 0);
 if (x<0) {
   for (int i=0; i<30; i++) {
     image(img, x+1280*i, 0);
   }
 }
 //saveFrame("frames/######.png");
}

30回と繰り返しをせずに、最初表示した画像だけで作成できた方がシンプルだと思うのですが、作り方が分からなかったので、このような方法で表現しました。

今回は以上になります。

音楽情報バイラルメディアEVENING： https://evening-mashup.com/
※ インターンシップの詳細はこちらから： https://evening-mashup.com/home/music-intern
※ 就職活動に関する情報はこちらから： https://evening-mashup.com/evening-job

本気で遊ぼう。音楽で。- EVENING -

音楽情報バイラルメディア「EVENING」は、音楽業界に関連するニュースやエンターテイメント情報を提供するWebメディアです。