teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

見直しキャンペーン中

2023/07/29 10:24

投稿

TN8001
TN8001

スコア10111

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

2

のの

2022/09/21 11:43

投稿

TN8001
TN8001

スコア10111

answer CHANGED
@@ -1,121 +1,121 @@
1
- [【Processing】画像を自動スクロールさせる方法|バイラルメディア「EVENING」|note](https://note.com/eveningmusic/n/n5840fa320348)
2
-
3
- こちらを参考にされたようですね(参考にしたものがある場合は、**質問に明示**してください)
4
- しかし書かれたご本人もよくわかっていないようで、あまりいい記事とは言えませんね。。。
5
-
6
- 何事も積み重ねです。順番にやっていきましょう。
7
-
8
- まずは単純に下がっていく画像を出してみましょう。これは簡単ですね。
9
- `image(img, 200, 100 + y);`のような感じになるでしょう。
10
-
11
- でも下がりっぱなしで画面外に行ってしまいました。。。
12
- ある程度下がったらまた上に戻ってくれないと、スクロールになりません。
13
- 増え続ける`y`をある範囲の繰り返しにするには、剰余(`%`)を使うのが常套手段です。
14
- [Reference / % (modulo) / Processing.org](https://processing.org/reference/modulo.html)
15
- `image(img, 350, 100 + (y % img.height));`といった感じです(画像高さ分下がったらまた戻る)
16
-
17
- 次は下がって足りなくなった部分を補います。
18
- もう1枚同じ画像を上に描画するようにしてみます。
19
- ```Processing
20
- image(img, 500, 100 + (y % img.height));
21
- image(img, 500, 100 + (y % img.height) - img.height);
22
- ```
23
- こんな感じでしょう。もうお気づきでしょうか?
24
- `image()`関数は描画位置や大きさは指定できますが、一部を切り出すような方法はありません。
25
- [Reference / image() / Processing.org](https://processing.org/reference/image_.html)
26
-
27
- そのため背景のスクロールのような場合はいいのですが(はみ出しても画面外)、今回のような部分スクロールには`for`しようが引数をいじろうが絶対にならないのです。
28
- もちろんはみ出した部分を何かで上書きして隠せる場合は、それで十分でしょう。
29
-
30
-
31
- では方法はないのかというと、一部を切り出すような関数も用意されています。
32
- [Reference / copy() / Processing.org](https://processing.org/reference/copy_.html)
33
-
34
- 非常に柔軟な指定法ができるのですが、その分引数も多いです。
35
- `copy(src, sx, sy, sw, sh, dx, dy, dw, dh)`です。
36
-
37
- `src` 画像
38
-
39
- `sx` 画像の使いたい位置の左上隅のX座標
40
- `sy` 画像の使いたい位置の左上隅のY座標
41
- `sw` 画像の使いたい幅
42
- `sh` 画像の使いたい高さ
43
-
44
- `dx` 描画先の左上隅のX座標
45
- `dy` 描画先の左上隅のY座標
46
- `dw` 描画先の幅
47
- `dh` 描画先の高さ
48
-
49
- わたしは途中で分かんなくなりました^^;
50
- わかりやすいところから埋めて、難しいところは図でも書いて落ち着いて考えましょう。
51
- 今回の場合は`sx`・`sw`・`dx`・`dw`は自明です。`sh`・`dh`は同じ値になります。
52
-
53
- ---
54
-
55
- あらかじめ縦に2つ並べた画像を作っておくと、だいぶ楽になるかもしれません。
56
- `copy`が1回で済みますし、ほとんどの引数が自明になって`sy`だけ考えればよくなります。
57
-
58
- ```Processing
59
- PImage img, img2;
60
- float y = 0;
61
- float speed = 1;
62
-
63
-
64
- void setup() {
65
- size(800, 400);
66
-
67
- // 95*95px
68
- img = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");
69
-
70
- // あらかじめ縦に2つ並べた画像を作っておく
71
- PGraphics pg = createGraphics(img.width, img.height * 2);
72
- pg.beginDraw();
73
- pg.image(img, 0, 0);
74
- pg.image(img, 0, img.height);
75
- pg.endDraw();
76
- img2 = pg.get();
77
- }
78
-
79
- void draw() {
80
- background(0);
81
-
82
- // 左端 オリジナル画像
83
- image(img, 50, 100);
84
-
85
-
86
- // 左から2番目 単純に下げてみる
87
- image(img, 200, 100 + y);
88
-
89
-
90
- // 左から3番目 下がりっぱなしでなく、ちゃんとループするようにする
91
- image(img, 350, 100 + (y % img.height));
92
-
93
-
94
- // 左から4番目 足りなくなるところを、もう一枚追加して補う
95
- image(img, 500, 100 + (y % img.height));
96
- image(img, 500, 100 + (y % img.height) - img.height);
97
-
98
-
99
- // 右端 はみ出ないように、位置・サイズを調整して描画
100
- // copy(src, sx, sy, sw, sh, dx, dy, dw, dh)
101
- copy(img, 0, 0, img.width, img.height - int(y % img.height),
102
- 650, 100 + int(y % img.height), img.width, img.height - int(y % img.height));
103
-
104
- copy(img, 0, img.height - int(y % img.height), img.width, int(y % img.height),
105
- 650, 100, img.width, int(y % img.height));
106
-
107
-
108
- // 右下 事前に縦に2つ並べた画像から1つ分を切り出す
109
- // copyが1回で済むし、ほとんどの引数が自明になってsyだけ考えればよい
110
- copy(img2, 0, img2.height / 2 - int(y % (img2.height / 2)), img2.width, img2.height / 2,
111
- 650, 250, img2.width, img2.height / 2);
112
-
113
- // こうではない(スクロールが逆になる)
114
- //copy(img2, 0, int(y % (img2.height / 2)), img2.width, img2.height / 2,
115
- // 800, 100, img2.width, img2.height / 2);
116
-
117
-
118
- y += speed;
119
- }
120
- ```
1
+ [【Processing】画像を自動スクロールさせる方法|バイラルメディア「EVENING」|note](https://note.com/eveningmusic/n/n5840fa320348)
2
+
3
+ こちらを参考にされたようですね(参考にしたものがある場合は、**質問に明示**してください)
4
+ しかし書かれたご本人もよくわかっていないようで、あまりいい記事とは言えませんね。。。
5
+
6
+ 何事も積み重ねです。順番にやっていきましょう。
7
+
8
+ まずは単純に下がっていく画像を出してみましょう。これは簡単ですね。
9
+ `image(img, 200, 100 + y);`のような感じになるでしょう。
10
+
11
+ でも下がりっぱなしで画面外に行ってしまいました。。。
12
+ ある程度下がったらまた上に戻ってくれないと、スクロールになりません。
13
+ 増え続ける`y`をある範囲の繰り返しにするには、剰余(`%`)を使うのが常套手段です。
14
+ [Reference / % (modulo) / Processing.org](https://processing.org/reference/modulo.html)
15
+ `image(img, 350, 100 + (y % img.height));`といった感じです(画像高さ分下がったらまた戻る)
16
+
17
+ 次は下がって足りなくなった部分を補います。
18
+ もう1枚同じ画像を上に描画するようにしてみます。
19
+ ```Processing
20
+ image(img, 500, 100 + (y % img.height));
21
+ image(img, 500, 100 + (y % img.height) - img.height);
22
+ ```
23
+ こんな感じでしょう。もうお気づきでしょうか?
24
+ `image()`関数は描画位置や大きさは指定できますが、一部を切り出すような方法はありません。
25
+ [Reference / image() / Processing.org](https://processing.org/reference/image_.html)
26
+
27
+ そのため背景のスクロールのような場合はいいのですが(はみ出しても画面外)、今回のような部分スクロールには`for`しようが引数をいじろうが絶対にならないのです。
28
+ もちろんはみ出した部分を何かで上書きして隠せる場合は、それで十分でしょう。
29
+
30
+
31
+ では方法はないのかというと、一部を切り出すような関数も用意されています。
32
+ [Reference / copy() / Processing.org](https://processing.org/reference/copy_.html)
33
+
34
+ 非常に柔軟な指定法ができるのですが、その分引数も多いです。
35
+ `copy(src, sx, sy, sw, sh, dx, dy, dw, dh)`です。
36
+
37
+ `src` 画像
38
+
39
+ `sx` 画像の使いたい位置の左上隅のX座標
40
+ `sy` 画像の使いたい位置の左上隅のY座標
41
+ `sw` 画像の使いたい幅
42
+ `sh` 画像の使いたい高さ
43
+
44
+ `dx` 描画先の左上隅のX座標
45
+ `dy` 描画先の左上隅のY座標
46
+ `dw` 描画先の幅
47
+ `dh` 描画先の高さ
48
+
49
+ わたしは途中で分かんなくなりました^^;
50
+ わかりやすいところから埋めて、難しいところは図でも書いて落ち着いて考えましょう。
51
+ 今回の場合は`sx`・`sw`・`dx`・`dw`は自明です。`sh`・`dh`は同じ値になります。
52
+
53
+ ---
54
+
55
+ あらかじめ縦に2つ並べた画像を作っておくと、だいぶ楽になるかもしれません。
56
+ `copy`が1回で済みますし、ほとんどの引数が自明になって`sy`だけ考えればよくなります。
57
+
58
+ ```Processing
59
+ PImage img, img2;
60
+ float y = 0;
61
+ float speed = 1;
62
+
63
+
64
+ void setup() {
65
+ size(800, 400);
66
+
67
+ // 95*95px
68
+ img = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");
69
+
70
+ // あらかじめ縦に2つ並べた画像を作っておく
71
+ PGraphics pg = createGraphics(img.width, img.height * 2);
72
+ pg.beginDraw();
73
+ pg.image(img, 0, 0);
74
+ pg.image(img, 0, img.height);
75
+ pg.endDraw();
76
+ img2 = pg.get();
77
+ }
78
+
79
+ void draw() {
80
+ background(0);
81
+
82
+ // 左端 オリジナル画像
83
+ image(img, 50, 100);
84
+
85
+
86
+ // 左から2番目 単純に下げてみる
87
+ image(img, 200, 100 + y);
88
+
89
+
90
+ // 左から3番目 下がりっぱなしでなく、ちゃんとループするようにする
91
+ image(img, 350, 100 + (y % img.height));
92
+
93
+
94
+ // 左から4番目 足りなくなるところを、もう一枚追加して補う
95
+ image(img, 500, 100 + (y % img.height));
96
+ image(img, 500, 100 + (y % img.height) - img.height);
97
+
98
+
99
+ // 右端 はみ出ないように、位置・サイズを調整して描画
100
+ // copy(src, sx, sy, sw, sh, dx, dy, dw, dh)
101
+ copy(img, 0, 0, img.width, img.height - int(y % img.height),
102
+ 650, 100 + int(y % img.height), img.width, img.height - int(y % img.height));
103
+
104
+ copy(img, 0, img.height - int(y % img.height), img.width, int(y % img.height),
105
+ 650, 100, img.width, int(y % img.height));
106
+
107
+
108
+ // 右下 事前に縦に2つ並べた画像から1つ分を切り出す
109
+ // copyが1回で済むし、ほとんどの引数が自明になってsyだけ考えればよい
110
+ copy(img2, 0, img2.height / 2 - int(y % (img2.height / 2)), img2.width, img2.height / 2,
111
+ 650, 250, img2.width, img2.height / 2);
112
+
113
+ // こうではない(スクロールが逆になる)
114
+ //copy(img2, 0, int(y % (img2.height / 2)), img2.width, img2.height / 2,
115
+ // 800, 100, img2.width, img2.height / 2);
116
+
117
+
118
+ y += speed;
119
+ }
120
+ ```
121
121
  ![アプリ画像](9e36601890cd50f831be24f6fc2f7ae0.png)

1

連結画像

2021/11/28 01:37

投稿

TN8001
TN8001

スコア10111

answer CHANGED
@@ -50,9 +50,13 @@
50
50
  わかりやすいところから埋めて、難しいところは図でも書いて落ち着いて考えましょう。
51
51
  今回の場合は`sx`・`sw`・`dx`・`dw`は自明です。`sh`・`dh`は同じ値になります。
52
52
 
53
+ ---
53
54
 
55
+ あらかじめ縦に2つ並べた画像を作っておくと、だいぶ楽になるかもしれません。
56
+ `copy`が1回で済みますし、ほとんどの引数が自明になって`sy`だけ考えればよくなります。
57
+
54
58
  ```Processing
55
- PImage img;
59
+ PImage img, img2;
56
60
  float y = 0;
57
61
  float speed = 1;
58
62
 
@@ -62,6 +66,14 @@
62
66
 
63
67
  // 95*95px
64
68
  img = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");
69
+
70
+ // あらかじめ縦に2つ並べた画像を作っておく
71
+ PGraphics pg = createGraphics(img.width, img.height * 2);
72
+ pg.beginDraw();
73
+ pg.image(img, 0, 0);
74
+ pg.image(img, 0, img.height);
75
+ pg.endDraw();
76
+ img2 = pg.get();
65
77
  }
66
78
 
67
79
  void draw() {
@@ -93,7 +105,17 @@
93
105
  650, 100, img.width, int(y % img.height));
94
106
 
95
107
 
108
+ // 右下 事前に縦に2つ並べた画像から1つ分を切り出す
109
+ // copyが1回で済むし、ほとんどの引数が自明になってsyだけ考えればよい
110
+ copy(img2, 0, img2.height / 2 - int(y % (img2.height / 2)), img2.width, img2.height / 2,
111
+ 650, 250, img2.width, img2.height / 2);
112
+
113
+ // こうではない(スクロールが逆になる)
114
+ //copy(img2, 0, int(y % (img2.height / 2)), img2.width, img2.height / 2,
115
+ // 800, 100, img2.width, img2.height / 2);
116
+
117
+
96
118
  y += speed;
97
119
  }
98
120
  ```
99
- ![アプリ画像](b826648bc57daae49b09245733a8a07c.png)
121
+ ![アプリ画像](9e36601890cd50f831be24f6fc2f7ae0.png)