編集履歴

回答編集履歴

見直しキャンペーン中

2023/07/29 10:24

投稿

スコア9337

test CHANGED Viewed

@@ -118,4 +118,4 @@
   y += speed;
 }
 ```
-![アプリ画像](9e36601890cd50f831be24f6fc2f7ae0.png)
+![アプリ動画](https://ddjkaamml8q8x.cloudfront.net/questions/2023-07-29/414ba80c-7faf-4da7-8348-6e9b1848d754.gif)

のの

2022/09/21 11:43

投稿

TN8001

スコア9337

test CHANGED Viewed

@@ -1,241 +1,121 @@
 [【Processing】画像を自動スクロールさせる方法｜バイラルメディア「EVENING」｜note](https://note.com/eveningmusic/n/n5840fa320348)
 こちらを参考にされたようですね（参考にしたものがある場合は、**質問に明示**してください）
 しかし書かれたご本人もよくわかっていないようで、あまりいい記事とは言えませんね。。。
 何事も積み重ねです。順番にやっていきましょう。
 まずは単純に下がっていく画像を出してみましょう。これは簡単ですね。
 `image(img, 200, 100 + y);`のような感じになるでしょう。
 でも下がりっぱなしで画面外に行ってしまいました。。。
 ある程度下がったらまた上に戻ってくれないと、スクロールになりません。
 増え続ける`y`をある範囲の繰り返しにするには、剰余（`%`）を使うのが常套手段です。
 [Reference / % (modulo) / Processing.org](https://processing.org/reference/modulo.html)
 `image(img, 350, 100 + (y % img.height));`といった感じです（画像高さ分下がったらまた戻る）
 次は下がって足りなくなった部分を補います。
 もう１枚同じ画像を上に描画するようにしてみます。
 ```Processing
 image(img, 500, 100 + (y % img.height));
 image(img, 500, 100 + (y % img.height) - img.height);
 ```
 こんな感じでしょう。もうお気づきでしょうか？
 `image()`関数は描画位置や大きさは指定できますが、一部を切り出すような方法はありません。
 [Reference / image() / Processing.org](https://processing.org/reference/image_.html)
 そのため背景のスクロールのような場合はいいのですが（はみ出しても画面外）、今回のような部分スクロールには`for`しようが引数をいじろうが絶対にならないのです。
 もちろんはみ出した部分を何かで上書きして隠せる場合は、それで十分でしょう。
 では方法はないのかというと、一部を切り出すような関数も用意されています。
 [Reference / copy() / Processing.org](https://processing.org/reference/copy_.html)
 非常に柔軟な指定法ができるのですが、その分引数も多いです。
 `copy(src, sx, sy, sw, sh, dx, dy, dw, dh)`です。
 `src` 画像
 `sx` 画像の使いたい位置の左上隅のX座標
-`sy` 画像の使いたい位置のの左上隅のY座標
+`sy` 画像の使いたい位置の左上隅のY座標
 `sw` 画像の使いたい幅
 `sh` 画像の使いたい高さ
 `dx` 描画先の左上隅のX座標
 `dy` 描画先の左上隅のY座標
 `dw` 描画先の幅
 `dh` 描画先の高さ
 わたしは途中で分かんなくなりました^^;
 わかりやすいところから埋めて、難しいところは図でも書いて落ち着いて考えましょう。
 今回の場合は`sx`・`sw`・`dx`・`dw`は自明です。`sh`・`dh`は同じ値になります。
 ---
 あらかじめ縦に２つ並べた画像を作っておくと、だいぶ楽になるかもしれません。
 `copy`が１回で済みますし、ほとんどの引数が自明になって`sy`だけ考えればよくなります。
 ```Processing
 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;
 }
 ```
 ![アプリ画像](9e36601890cd50f831be24f6fc2f7ae0.png)

連結画像

2021/11/28 01:37

投稿

TN8001

スコア9337

test CHANGED Viewed

@@ -102,11 +102,19 @@
+---
+あらかじめ縦に２つ並べた画像を作っておくと、だいぶ楽になるかもしれません。
+`copy`が１回で済みますし、ほとんどの引数が自明になって`sy`だけ考えればよくなります。
 ```Processing
-PImage img;
+PImage img, img2;
 float y = 0;
@@ -126,6 +134,22 @@
   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();
 }
@@ -188,10 +212,30 @@
+  // 右下 事前に縦に２つ並べた画像から１つ分を切り出す
+  // 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;
 }
 ```
-![アプリ画像](b826648bc57daae49b09245733a8a07c.png)
+![アプリ画像](9e36601890cd50f831be24f6fc2f7ae0.png)