回答編集履歴
3
見直しキャンペーン中
test
CHANGED
@@ -118,4 +118,4 @@
|
|
118
118
|
y += speed;
|
119
119
|
}
|
120
120
|
```
|
121
|
-
![アプリ画
|
121
|
+
![アプリ動画](https://ddjkaamml8q8x.cloudfront.net/questions/2023-07-29/414ba80c-7faf-4da7-8348-6e9b1848d754.gif)
|
2
のの
test
CHANGED
@@ -1,241 +1,121 @@
|
|
1
1
|
[【Processing】画像を自動スクロールさせる方法|バイラルメディア「EVENING」|note](https://note.com/eveningmusic/n/n5840fa320348)
|
2
2
|
|
3
|
-
|
4
|
-
|
5
3
|
こちらを参考にされたようですね(参考にしたものがある場合は、**質問に明示**してください)
|
6
|
-
|
7
4
|
しかし書かれたご本人もよくわかっていないようで、あまりいい記事とは言えませんね。。。
|
8
|
-
|
9
|
-
|
10
5
|
|
11
6
|
何事も積み重ねです。順番にやっていきましょう。
|
12
7
|
|
13
|
-
|
14
|
-
|
15
8
|
まずは単純に下がっていく画像を出してみましょう。これは簡単ですね。
|
16
|
-
|
17
9
|
`image(img, 200, 100 + y);`のような感じになるでしょう。
|
18
10
|
|
19
|
-
|
20
|
-
|
21
11
|
でも下がりっぱなしで画面外に行ってしまいました。。。
|
22
|
-
|
23
12
|
ある程度下がったらまた上に戻ってくれないと、スクロールになりません。
|
24
|
-
|
25
13
|
増え続ける`y`をある範囲の繰り返しにするには、剰余(`%`)を使うのが常套手段です。
|
26
|
-
|
27
14
|
[Reference / % (modulo) / Processing.org](https://processing.org/reference/modulo.html)
|
28
|
-
|
29
15
|
`image(img, 350, 100 + (y % img.height));`といった感じです(画像高さ分下がったらまた戻る)
|
30
16
|
|
31
|
-
|
32
|
-
|
33
17
|
次は下がって足りなくなった部分を補います。
|
34
|
-
|
35
18
|
もう1枚同じ画像を上に描画するようにしてみます。
|
36
|
-
|
37
19
|
```Processing
|
38
|
-
|
39
20
|
image(img, 500, 100 + (y % img.height));
|
40
|
-
|
41
21
|
image(img, 500, 100 + (y % img.height) - img.height);
|
42
|
-
|
43
22
|
```
|
44
|
-
|
45
23
|
こんな感じでしょう。もうお気づきでしょうか?
|
46
|
-
|
47
24
|
`image()`関数は描画位置や大きさは指定できますが、一部を切り出すような方法はありません。
|
48
|
-
|
49
25
|
[Reference / image() / Processing.org](https://processing.org/reference/image_.html)
|
50
26
|
|
51
|
-
|
52
|
-
|
53
27
|
そのため背景のスクロールのような場合はいいのですが(はみ出しても画面外)、今回のような部分スクロールには`for`しようが引数をいじろうが絶対にならないのです。
|
54
|
-
|
55
28
|
もちろんはみ出した部分を何かで上書きして隠せる場合は、それで十分でしょう。
|
56
29
|
|
57
30
|
|
58
|
-
|
59
|
-
|
60
|
-
|
61
31
|
では方法はないのかというと、一部を切り出すような関数も用意されています。
|
62
|
-
|
63
32
|
[Reference / copy() / Processing.org](https://processing.org/reference/copy_.html)
|
64
33
|
|
65
|
-
|
66
|
-
|
67
34
|
非常に柔軟な指定法ができるのですが、その分引数も多いです。
|
68
|
-
|
69
35
|
`copy(src, sx, sy, sw, sh, dx, dy, dw, dh)`です。
|
70
|
-
|
71
|
-
|
72
36
|
|
73
37
|
`src` 画像
|
74
38
|
|
75
|
-
|
76
|
-
|
77
39
|
`sx` 画像の使いたい位置の左上隅のX座標
|
78
|
-
|
79
|
-
`sy` 画像の使いたい位置の
|
40
|
+
`sy` 画像の使いたい位置の左上隅のY座標
|
80
|
-
|
81
41
|
`sw` 画像の使いたい幅
|
82
|
-
|
83
42
|
`sh` 画像の使いたい高さ
|
84
43
|
|
85
|
-
|
86
|
-
|
87
44
|
`dx` 描画先の左上隅のX座標
|
88
|
-
|
89
45
|
`dy` 描画先の左上隅のY座標
|
90
|
-
|
91
46
|
`dw` 描画先の幅
|
92
|
-
|
93
47
|
`dh` 描画先の高さ
|
94
48
|
|
95
|
-
|
96
|
-
|
97
49
|
わたしは途中で分かんなくなりました^^;
|
98
|
-
|
99
50
|
わかりやすいところから埋めて、難しいところは図でも書いて落ち着いて考えましょう。
|
100
|
-
|
101
51
|
今回の場合は`sx`・`sw`・`dx`・`dw`は自明です。`sh`・`dh`は同じ値になります。
|
102
|
-
|
103
|
-
|
104
52
|
|
105
53
|
---
|
106
54
|
|
107
|
-
|
108
|
-
|
109
55
|
あらかじめ縦に2つ並べた画像を作っておくと、だいぶ楽になるかもしれません。
|
110
|
-
|
111
56
|
`copy`が1回で済みますし、ほとんどの引数が自明になって`sy`だけ考えればよくなります。
|
112
57
|
|
113
|
-
|
114
|
-
|
115
58
|
```Processing
|
116
|
-
|
117
59
|
PImage img, img2;
|
118
|
-
|
119
60
|
float y = 0;
|
120
|
-
|
121
61
|
float speed = 1;
|
122
62
|
|
123
63
|
|
124
|
-
|
125
|
-
|
126
|
-
|
127
64
|
void setup() {
|
128
|
-
|
129
65
|
size(800, 400);
|
130
66
|
|
131
|
-
|
132
|
-
|
133
67
|
// 95*95px
|
134
|
-
|
135
68
|
img = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");
|
136
69
|
|
137
|
-
|
138
|
-
|
139
70
|
// あらかじめ縦に2つ並べた画像を作っておく
|
140
|
-
|
141
71
|
PGraphics pg = createGraphics(img.width, img.height * 2);
|
142
|
-
|
143
72
|
pg.beginDraw();
|
144
|
-
|
145
73
|
pg.image(img, 0, 0);
|
146
|
-
|
147
74
|
pg.image(img, 0, img.height);
|
148
|
-
|
149
75
|
pg.endDraw();
|
150
|
-
|
151
76
|
img2 = pg.get();
|
152
|
-
|
153
77
|
}
|
154
78
|
|
155
|
-
|
156
|
-
|
157
79
|
void draw() {
|
158
|
-
|
159
80
|
background(0);
|
160
81
|
|
161
|
-
|
162
|
-
|
163
82
|
// 左端 オリジナル画像
|
164
|
-
|
165
83
|
image(img, 50, 100);
|
166
84
|
|
167
85
|
|
168
|
-
|
169
|
-
|
170
|
-
|
171
86
|
// 左から2番目 単純に下げてみる
|
172
|
-
|
173
87
|
image(img, 200, 100 + y);
|
174
88
|
|
175
89
|
|
176
|
-
|
177
|
-
|
178
|
-
|
179
90
|
// 左から3番目 下がりっぱなしでなく、ちゃんとループするようにする
|
180
|
-
|
181
91
|
image(img, 350, 100 + (y % img.height));
|
182
92
|
|
183
93
|
|
184
|
-
|
185
|
-
|
186
|
-
|
187
94
|
// 左から4番目 足りなくなるところを、もう一枚追加して補う
|
188
|
-
|
189
95
|
image(img, 500, 100 + (y % img.height));
|
190
|
-
|
191
96
|
image(img, 500, 100 + (y % img.height) - img.height);
|
192
97
|
|
193
98
|
|
194
|
-
|
195
|
-
|
196
|
-
|
197
99
|
// 右端 はみ出ないように、位置・サイズを調整して描画
|
198
|
-
|
199
100
|
// copy(src, sx, sy, sw, sh, dx, dy, dw, dh)
|
200
|
-
|
201
101
|
copy(img, 0, 0, img.width, img.height - int(y % img.height),
|
202
|
-
|
203
102
|
650, 100 + int(y % img.height), img.width, img.height - int(y % img.height));
|
204
103
|
|
205
|
-
|
206
|
-
|
207
104
|
copy(img, 0, img.height - int(y % img.height), img.width, int(y % img.height),
|
208
|
-
|
209
105
|
650, 100, img.width, int(y % img.height));
|
210
106
|
|
211
107
|
|
212
|
-
|
213
|
-
|
214
|
-
|
215
108
|
// 右下 事前に縦に2つ並べた画像から1つ分を切り出す
|
216
|
-
|
217
109
|
// copyが1回で済むし、ほとんどの引数が自明になってsyだけ考えればよい
|
218
|
-
|
219
110
|
copy(img2, 0, img2.height / 2 - int(y % (img2.height / 2)), img2.width, img2.height / 2,
|
220
|
-
|
221
111
|
650, 250, img2.width, img2.height / 2);
|
222
112
|
|
223
|
-
|
224
|
-
|
225
113
|
// こうではない(スクロールが逆になる)
|
226
|
-
|
227
114
|
//copy(img2, 0, int(y % (img2.height / 2)), img2.width, img2.height / 2,
|
228
|
-
|
229
115
|
// 800, 100, img2.width, img2.height / 2);
|
230
116
|
|
231
117
|
|
232
|
-
|
233
|
-
|
234
|
-
|
235
118
|
y += speed;
|
236
|
-
|
237
119
|
}
|
238
|
-
|
239
120
|
```
|
240
|
-
|
241
121
|
![アプリ画像](9e36601890cd50f831be24f6fc2f7ae0.png)
|
1
連結画像
test
CHANGED
@@ -102,11 +102,19 @@
|
|
102
102
|
|
103
103
|
|
104
104
|
|
105
|
+
---
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
あらかじめ縦に2つ並べた画像を作っておくと、だいぶ楽になるかもしれません。
|
110
|
+
|
111
|
+
`copy`が1回で済みますし、ほとんどの引数が自明になって`sy`だけ考えればよくなります。
|
112
|
+
|
105
113
|
|
106
114
|
|
107
115
|
```Processing
|
108
116
|
|
109
|
-
PImage img;
|
117
|
+
PImage img, img2;
|
110
118
|
|
111
119
|
float y = 0;
|
112
120
|
|
@@ -126,6 +134,22 @@
|
|
126
134
|
|
127
135
|
img = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");
|
128
136
|
|
137
|
+
|
138
|
+
|
139
|
+
// あらかじめ縦に2つ並べた画像を作っておく
|
140
|
+
|
141
|
+
PGraphics pg = createGraphics(img.width, img.height * 2);
|
142
|
+
|
143
|
+
pg.beginDraw();
|
144
|
+
|
145
|
+
pg.image(img, 0, 0);
|
146
|
+
|
147
|
+
pg.image(img, 0, img.height);
|
148
|
+
|
149
|
+
pg.endDraw();
|
150
|
+
|
151
|
+
img2 = pg.get();
|
152
|
+
|
129
153
|
}
|
130
154
|
|
131
155
|
|
@@ -188,10 +212,30 @@
|
|
188
212
|
|
189
213
|
|
190
214
|
|
215
|
+
// 右下 事前に縦に2つ並べた画像から1つ分を切り出す
|
216
|
+
|
217
|
+
// copyが1回で済むし、ほとんどの引数が自明になってsyだけ考えればよい
|
218
|
+
|
219
|
+
copy(img2, 0, img2.height / 2 - int(y % (img2.height / 2)), img2.width, img2.height / 2,
|
220
|
+
|
221
|
+
650, 250, img2.width, img2.height / 2);
|
222
|
+
|
223
|
+
|
224
|
+
|
225
|
+
// こうではない(スクロールが逆になる)
|
226
|
+
|
227
|
+
//copy(img2, 0, int(y % (img2.height / 2)), img2.width, img2.height / 2,
|
228
|
+
|
229
|
+
// 800, 100, img2.width, img2.height / 2);
|
230
|
+
|
231
|
+
|
232
|
+
|
233
|
+
|
234
|
+
|
191
235
|
y += speed;
|
192
236
|
|
193
237
|
}
|
194
238
|
|
195
239
|
```
|
196
240
|
|
197
|
-
![アプリ画像](
|
241
|
+
![アプリ画像](9e36601890cd50f831be24f6fc2f7ae0.png)
|