processing 縦スクロールのやり方

Question

前提・実現したいこと

決められた範囲の中で同じ画像が縦にループするようにしたいです。

発生している問題・エラーメッセージ

範囲外に余計なものがでてきてしまう。

該当のソースコード

processing
PImage img1;
PImage img2;
float y =0, speed = 3;

void setup() {
fullScreen();

background(#42A1BC);

img1=loadImage("sekaichizu.png");
img2=loadImage("12dd5f5ec9b518b91da031fb472d446b_t.jpeg");
}

void draw() {

//image(img1, 100, 100);
image(img2,width3/4,height2/3,width/3,height/2);

//background(#42A1BC);

y += speed;

if (y>0) {
for (int i=0; i<30; i++) {
image(img2, width3/4, height2/3, width/3, y-height/2*i);
}
}

image(img1, 100, 100);

}

試したこと

スクロールに影響していると思われる部分の値や掛け方を変えてみたりした。

補足情報（FW/ツールのバージョンなど）

最近使い始めたばかりの初心者です。

Answer 1

【Processing】画像を自動スクロールさせる方法｜バイラルメディア「EVENING」｜note

こちらを参考にされたようですね（参考にしたものがある場合は、質問に明示してください）
しかし書かれたご本人もよくわかっていないようで、あまりいい記事とは言えませんね。。。

何事も積み重ねです。順番にやっていきましょう。

まずは単純に下がっていく画像を出してみましょう。これは簡単ですね。
image(img, 200, 100 + y);のような感じになるでしょう。

でも下がりっぱなしで画面外に行ってしまいました。。。
ある程度下がったらまた上に戻ってくれないと、スクロールになりません。
増え続けるyをある範囲の繰り返しにするには、剰余（%）を使うのが常套手段です。
Reference / % (modulo) / Processing.org
image(img, 350, 100 + (y % img.height));といった感じです（画像高さ分下がったらまた戻る）

次は下がって足りなくなった部分を補います。
もう１枚同じ画像を上に描画するようにしてみます。

image(img, 500, 100 + (y % img.height));
image(img, 500, 100 + (y % img.height) - img.height);

こんな感じでしょう。もうお気づきでしょうか？
image()関数は描画位置や大きさは指定できますが、一部を切り出すような方法はありません。
Reference / image() / Processing.org

そのため背景のスクロールのような場合はいいのですが（はみ出しても画面外）、今回のような部分スクロールにはforしようが引数をいじろうが絶対にならないのです。
もちろんはみ出した部分を何かで上書きして隠せる場合は、それで十分でしょう。

では方法はないのかというと、一部を切り出すような関数も用意されています。
Reference / copy() / Processing.org

非常に柔軟な指定法ができるのですが、その分引数も多いです。
copy(src, sx, sy, sw, sh, dx, dy, dw, dh)です。

src 画像

sx 画像の使いたい位置の左上隅のX座標
sy 画像の使いたい位置の左上隅のY座標
sw 画像の使いたい幅
sh 画像の使いたい高さ

dx 描画先の左上隅のX座標
dy 描画先の左上隅のY座標
dw 描画先の幅
dh 描画先の高さ

わたしは途中で分かんなくなりました^^;
わかりやすいところから埋めて、難しいところは図でも書いて落ち着いて考えましょう。
今回の場合はsx・sw・dx・dwは自明です。sh・dhは同じ値になります。

---

あらかじめ縦に２つ並べた画像を作っておくと、だいぶ楽になるかもしれません。
copyが１回で済みますし、ほとんどの引数が自明になってsyだけ考えればよくなります。

PImage img, img2;
float y = 0;
float speed = 1;


void setup() {
  size(800, 400);

  // 95*95px
  img = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");

  // あらかじめ縦に２つ並べた画像を作っておく
  PGraphics pg = createGraphics(img.width, img.height * 2);
  pg.beginDraw();
  pg.image(img, 0, 0);
  pg.image(img, 0, img.height);
  pg.endDraw();
  img2 = pg.get();
}

void draw() {
  background(0);

  // 左端 オリジナル画像
  image(img, 50, 100);


  // 左から２番目 単純に下げてみる
  image(img, 200, 100 + y);


  // 左から３番目 下がりっぱなしでなく、ちゃんとループするようにする
  image(img, 350, 100 + (y % img.height));


  // 左から４番目 足りなくなるところを、もう一枚追加して補う
  image(img, 500, 100 + (y % img.height));
  image(img, 500, 100 + (y % img.height) - img.height);


  // 右端 はみ出ないように、位置・サイズを調整して描画
  // copy(src, sx, sy, sw, sh, dx, dy, dw, dh)
  copy(img, 0, 0, img.width, img.height - int(y % img.height),
            650, 100 + int(y % img.height), img.width, img.height - int(y % img.height));

  copy(img, 0, img.height - int(y % img.height), img.width, int(y % img.height),
            650, 100, img.width, int(y % img.height));


  // 右下 事前に縦に２つ並べた画像から１つ分を切り出す
  // copyが１回で済むし、ほとんどの引数が自明になってsyだけ考えればよい
  copy(img2, 0, img2.height / 2 - int(y % (img2.height / 2)), img2.width, img2.height / 2,
             650, 250, img2.width, img2.height / 2);

  // こうではない（スクロールが逆になる）
  //copy(img2, 0, int(y % (img2.height / 2)), img2.width, img2.height / 2,
  //           800, 100, img2.width, img2.height / 2);


  y += speed;
}

Comments

[TN8001]

マスクとかでもっと簡単にやる方法もあるんですかね？ｗ

[RY54828]

TN8001様
ご丁寧にありがとうございました。回答してくださった内容をもとに改めて自分で挑戦してみます。

[thkana]

酷いですね>参照先
そもそも「自動」スクロールって何と思いますが、しばらく放置しておくと真っ黒。ちょっと動かして「あ～動いた動いた」で終わりにしたのがよくわかる。

マスクは、PGraphicsとか使って「仮想画面」の話になりがちなので、一度つかめば感覚的にはわかりやすいですが説明は結構大変かも。

[TN8001]

＠thkanaさん
OpenProcessingとかを見ていてもプログラマ目線（プロではありませんがｗ）で見ると、「うぎゃ～！」ってのが結構あります。

でもまあアートですから「まあいいんじゃない？」と思いつつ、手元では超リファクタしちゃいますｗ

Answer 2

質問の編集画面に入り、コード部分を選択して、<code>を押してください( ヘルプを参照。スマホの場合は...知りません)。そうすると、コード部分が区切られてインデントも表示され、非常に見やすくなります(というかそうでないのが見にくい)

それと、

範囲外に余計なものがでてきてしまう。

あなたがどういう画面を得られたら満足なのか、「縦スクロール」という言葉以外には示されていませんし、あなたのローカルの画像ファイルを読み込むサンプルプログラムではどんな画になるのか私には想像もつきません。
「範囲」とはなんの範囲ですか? 「余計」とは? スクリーンショットを示すとか、あるいは手で簡単な説明の画を描いてもいいですけど、「何も知らない相手」に説明するのだ、ということを考えてみてください。

ちょっと質問の範囲からは外れるかも知れませんが

//冒頭の操作(<code>)でこういう表示になります
    for (int i=0; i<30; i++) {
      image(img2, width*3/4, height*2/3, width/3, y-height/2*i);
    }

image関数の第5パラメータ、画像の高さですが、例えばいわゆるFullHDのディスプレイだったとすると
y=3,i=0のとき3
y=3,i=1のとき-537
y=3,i=2のとき-1077
y=3,i=1のとき-1617
...
と、多分どんどん大きな負の値になるかと思いますが、それは意図したものですか? (画像の高さに負の値を与えるとなにが表示されるんだろう? 画像がひっくり返るんだっけ?)

---

TN8001さんの回答みてて、そう言えばgetで切り出しってできなかったっけ? ということで試してみたもの。ご参考まで。

PImage single;
PImage quad;
int w, h;
float x = 0, vx = 0.05; //値は適宜いじってみてください
float y = 0, vy = -0.5;

void setup() {
  size(640, 480);
  //文字列を切っているのは単にソースコードの横幅を抑えるため
  single = loadImage("https://teratail-v2.storage.googleapis.com/uploads/"+
    "avatars/u10/107752/752e11b31475761a_thumbnail.png");
  w=single.width; //よく使うので見やすくするため
  h=single.height;
  image(single, 0, 0);//4枚並べて表示
  image(single, 0, h);
  image(single, w, 0);
  image(single, w, h);
  //画面外にはみ出す場合はgetで画素が取れないので
  //PGraphicsで仮想画面とか考える必要あり(今回は大丈夫)
  quad=get(0, 0, w*2, h*2);//並べた画像を取り込む
  background(0); //小細工の証拠隠滅
  noFill();
  stroke(0, 255, 0);
}

void draw() {
  int x0=50;
  int y0=height/2-h;//上下真ん中に表示したい
  int x1=350;
  int y1=height/2-h/2;

  background(0);
  
  //この2行は切り出し位置を表示しているだけ
  image(quad, x0, y0);
  rect(x+x0, y+y0, w, h);

  //getで切り出した部分画像を表示
  image(quad.get((int)x, (int)y, w, h), x1, y1);

  //切り出し位置更新
  x=x+vx;
  if (x<0)x=w;
  if (x>w)x=0;
  y=y+vy;
  if (y<0)y=h;
  if (y>w)y=0;
}