回答編集履歴
1
見直しキャンペーン中
test
CHANGED
@@ -1,301 +1,151 @@
|
|
1
1
|
> 112行目にalarm();を呼び出した場合特定のフレーム数でのみON/OFFが実行される
|
2
|
-
|
3
2
|
> 112行目にalarmを呼び出した場合、アラームオシレーターはosc.amp(0.05, 0.05);だけが反映される
|
4
|
-
|
5
|
-
|
6
3
|
|
7
4
|
「//ここにアラーム関数入れる」この行のことですよね?
|
8
5
|
|
9
|
-
|
10
|
-
|
11
6
|
ここに入るのはボタンを押した一瞬だけです(高速でON・OFFを繰り返さないように`state`を作ったんですよね?)
|
12
|
-
|
13
7
|
その瞬間が`frameCount % 10 == 0`なら音が鳴りますし(「ピー」)、そうでないなら鳴りません。
|
14
|
-
|
15
8
|
当然「ピピピ」にもならないです。
|
16
|
-
|
17
|
-
|
18
9
|
|
19
10
|
`alarm()`を入れるなら、`if (obj.sw)`のほうじゃないですか?
|
20
11
|
|
21
|
-
|
22
|
-
|
23
|
-
```
|
12
|
+
```js
|
24
|
-
|
25
13
|
// 左ボタンを生成する関数
|
26
|
-
|
27
14
|
function button(x, y, size, obj) {
|
28
|
-
|
29
15
|
push();
|
30
|
-
|
31
16
|
if (mouseIsPressed && dist(x, y, mouseX, mouseY) < size / 2) {
|
32
|
-
|
33
17
|
if (!obj.state) {
|
34
|
-
|
35
18
|
obj.state = true;
|
36
|
-
|
37
19
|
obj.sw = !obj.sw;
|
38
|
-
|
39
20
|
}
|
40
|
-
|
41
21
|
} else {
|
42
|
-
|
43
22
|
obj.state = false;
|
44
|
-
|
45
23
|
}
|
46
|
-
|
47
24
|
|
48
|
-
|
49
25
|
if (obj.sw) {
|
50
|
-
|
51
26
|
fill("red");
|
52
|
-
|
53
27
|
alarm();
|
54
|
-
|
55
28
|
} else {
|
56
|
-
|
57
29
|
fill("blue");
|
58
|
-
|
59
30
|
osc.amp(0, 0.05);
|
60
|
-
|
61
31
|
}
|
62
|
-
|
63
32
|
strokeWeight(2.5);
|
64
|
-
|
65
33
|
ellipse(x, y, size, size);
|
66
|
-
|
67
34
|
pop();
|
68
|
-
|
69
35
|
return obj.sw;
|
70
|
-
|
71
36
|
}
|
72
|
-
|
73
37
|
```
|
74
|
-
|
75
|
-
|
76
38
|
|
77
39
|
---
|
78
40
|
|
79
|
-
|
80
|
-
|
81
41
|
以下勝手に改良^^;
|
82
42
|
|
83
|
-
|
84
|
-
|
85
43
|
この場合は`mouseIsPressed`より、`mousePressed()`のほうが扱いやすいと思います(押したときに1回だけ呼ばれるので)
|
86
|
-
|
87
44
|
[reference | mousePressed()](https://p5js.org/reference/#/p5/mousePressed)
|
88
|
-
|
89
|
-
|
90
45
|
|
91
46
|
`Oscillator`が動き続けている?のも何となく気持ち悪いです(明示的に`start`・`stop`したほうが意図が分かりやすくないですか)
|
92
47
|
|
93
|
-
|
94
|
-
|
95
48
|
`button_2()`は明らかに重複コードですよね(どうまとめるかですが、`b1`・`b2`を拡張しました。クラスにしてもいいかもしれません)
|
96
49
|
|
97
|
-
|
98
|
-
|
99
|
-
```
|
50
|
+
```js
|
100
|
-
|
101
51
|
// コンストラクタで指定できます new p5.Oscillator([freq], [type])
|
102
|
-
|
103
52
|
const osc = new p5.Oscillator(1000, 'square');
|
104
53
|
|
105
|
-
|
106
|
-
|
107
54
|
// mousePressed()でstateがいらなくなった buttonを共通化するためx, y, sizeを追加
|
108
|
-
|
109
55
|
const b1 = { x:80, y:80, size:50, sw:false };
|
110
|
-
|
111
56
|
const b2 = { x:520, y:80, size:50, sw:false };
|
112
57
|
|
113
|
-
|
114
|
-
|
115
58
|
function setup() {
|
116
|
-
|
117
59
|
createCanvas(600, 600);
|
118
|
-
|
119
60
|
frameRate(60);
|
120
|
-
|
121
61
|
}
|
122
62
|
|
123
|
-
|
124
|
-
|
125
63
|
function draw() {
|
126
|
-
|
127
64
|
background(50);
|
128
65
|
|
129
|
-
|
66
|
+
push();
|
67
|
+
translate(width / 2, height / 2);
|
68
|
+
noFill();
|
69
|
+
stroke(255);
|
70
|
+
strokeWeight(5);
|
71
|
+
circle(0, 0, 445);
|
130
72
|
|
131
73
|
push();
|
132
|
-
|
133
|
-
translate(width / 2, height / 2);
|
134
|
-
|
135
|
-
noFill();
|
136
|
-
|
137
|
-
stroke(255);
|
138
|
-
|
139
|
-
strokeWeight(5);
|
140
|
-
|
141
|
-
circle(0, 0, 445);
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
push();
|
146
|
-
|
147
74
|
for (let i = 0; i < 12; i++) {
|
148
|
-
|
149
75
|
rotate(TWO_PI / 12);
|
150
|
-
|
151
76
|
noStroke();
|
152
|
-
|
153
77
|
fill(255);
|
154
|
-
|
155
78
|
circle(0, -185, 32);
|
156
|
-
|
157
79
|
}
|
158
|
-
|
159
80
|
pop();
|
160
81
|
|
161
|
-
|
162
|
-
|
163
82
|
const h = (hour() + minute() / 60) / 12 * TWO_PI;
|
164
|
-
|
165
83
|
const m = (minute() + second() / 60) / 60 * TWO_PI;
|
166
|
-
|
167
84
|
const s = second() / 60 * TWO_PI;
|
168
|
-
|
169
85
|
drawHands(100, h, 5); // strokeWeightはdrawHands内に
|
170
|
-
|
171
86
|
drawHands(125, m, 3);
|
172
|
-
|
173
87
|
drawHands(150, s, 1);
|
174
88
|
|
175
|
-
|
176
|
-
|
177
89
|
digitalTime(0, -50); // 引数を渡すならちゃんと使ったほうがw
|
178
|
-
|
179
90
|
pop();
|
180
91
|
|
181
|
-
|
182
|
-
|
183
92
|
toggleButton(b1);
|
184
|
-
|
185
93
|
toggleButton(b2);
|
186
94
|
|
187
|
-
|
188
|
-
|
189
95
|
if (b1.sw) {
|
190
|
-
|
191
96
|
alarm();
|
192
|
-
|
193
97
|
}
|
194
|
-
|
195
98
|
}
|
196
99
|
|
197
|
-
|
198
|
-
|
199
100
|
function drawHands(len, angle, weight) {
|
200
|
-
|
201
101
|
const x = len * sin(angle);
|
202
|
-
|
203
102
|
const y = len * -cos(angle);
|
204
|
-
|
205
103
|
stroke(255);
|
206
|
-
|
207
104
|
strokeWeight(weight);
|
208
|
-
|
209
105
|
line(0, 0, x, y);
|
210
|
-
|
211
106
|
}
|
212
107
|
|
213
|
-
|
214
|
-
|
215
108
|
function digitalTime(x, y) {
|
216
|
-
|
217
109
|
noStroke();
|
218
|
-
|
219
110
|
fill(225);
|
220
|
-
|
221
111
|
textSize(28);
|
222
|
-
|
223
112
|
textAlign(CENTER);
|
224
|
-
|
225
113
|
|
226
|
-
|
227
114
|
// nfは1を01にします nf(値, [整数部の桁数], [少数部の桁数])
|
228
|
-
|
229
115
|
text(nf(hour(), 2) + ':' + nf(minute(), 2) + ':' + nf(second(), 2), x, y);
|
230
|
-
|
231
116
|
}
|
232
117
|
|
233
|
-
|
234
|
-
|
235
118
|
function toggleButton(obj) {
|
236
|
-
|
237
119
|
fill(obj.sw ? 'red' : 'blue'); // 条件演算子(3項演算子)でスッキリします
|
238
|
-
|
239
120
|
strokeWeight(2.5);
|
240
|
-
|
241
121
|
circle(obj.x, obj.y, obj.size);
|
242
122
|
|
243
|
-
|
244
|
-
|
245
123
|
textSize(24);
|
246
|
-
|
247
124
|
fill(225);
|
248
|
-
|
249
125
|
text(obj.sw ? 'ON' : 'OFF', obj.x - 20, obj.y - 35);
|
250
|
-
|
251
126
|
}
|
252
127
|
|
253
|
-
|
254
|
-
|
255
128
|
function alarm() {
|
256
|
-
|
257
129
|
if (frameCount % 10 == 0) {
|
258
|
-
|
259
130
|
osc.amp(0.05, 0.05);
|
260
|
-
|
261
131
|
} else if (frameCount % 10 == 5) {
|
262
|
-
|
263
132
|
osc.amp(0, 0.05);
|
264
|
-
|
265
133
|
}
|
266
|
-
|
267
134
|
}
|
268
135
|
|
269
|
-
|
270
|
-
|
271
136
|
function mousePressed() { // マウスを押したとき...
|
272
|
-
|
273
137
|
if (dist(b1.x, b1.y, mouseX, mouseY) < b1.size / 2) {
|
274
|
-
|
275
138
|
b1.sw = !b1.sw;
|
276
|
-
|
277
139
|
|
278
|
-
|
279
140
|
if (b1.sw) {
|
280
|
-
|
281
141
|
osc.start();
|
282
|
-
|
283
142
|
} else {
|
284
|
-
|
285
143
|
osc.stop();
|
286
|
-
|
287
144
|
}
|
288
|
-
|
289
145
|
}
|
290
|
-
|
291
146
|
|
292
|
-
|
293
147
|
if (dist(b2.x, b2.y, mouseX, mouseY) < b2.size / 2) {
|
294
|
-
|
295
148
|
b2.sw = !b2.sw;
|
296
|
-
|
297
149
|
}
|
298
|
-
|
299
150
|
}
|
300
|
-
|
301
151
|
```
|