teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップProcessingに関する質問文字と色が変わるときの連動

編集履歴

回答編集履歴

3

コードを改善

2021/12/19 11:36

投稿

cx20
cx20

スコア4700

answer CHANGED
@@ -12,15 +12,17 @@
12
12
  let colors = ["#FEFAE0", "#FFC8DD", "#9BF6FF", "#2D6A4F", "#CAFFBF", "#FFB700", "#99582A"];
13
13
  let names = ["バニラ", "イチゴ", "ラムネ", "抹茶", "メロン", "オレンジ", "チョコ"];
14
14
 
15
+ console.log(names.length);
15
16
  function setup() {
16
17
  frameRate(10);
17
18
  createCanvas(windowWidth, windowHeight);
18
- background(229, 171, 229);
19
19
  noStroke();
20
20
  }
21
21
 
22
22
  function draw() {
23
+ background(229, 171, 229);
24
+
23
- const x = width / 2;
25
+ const x = width / 2;
24
26
  const y = height / 2;
25
27
 
26
28
  // アイスの色を決定する（0～6を選択）
@@ -57,13 +59,9 @@
57
59
  noStroke();
58
60
  text("アイスクリームの味何にする？", 270, 80);
59
61
 
60
- // 背景色と同じ色を指定
61
- fill(229, 171, 229);
62
- // アイス名の部分を消去
63
- rect(200, 120, 200, 60);
64
62
  // 文字色を指定
65
63
  stroke(204, 102, 51);
66
- // アイス名を表示
64
+ // アイスの色名を表示
67
65
  text(names[c], 270, 130);
68
66
  }
69
67
 

2

説明を改善

2021/12/19 11:36

投稿

cx20
cx20

スコア4700

answer CHANGED
@@ -3,9 +3,9 @@
3
3
  [https://jsfiddle.net/cx20/ha73p062/](https://jsfiddle.net/cx20/ha73p062/)
4
4
 
5
5
  ＜主な対応内容＞
6
- ・色の配列を用意
6
+ ・アイス名の配列を用意
7
- ・ランダムに色のインデックスを取得するよう対応
7
+ ・色の配列からランダムに色のインデックスを取得するよう対応
8
- ・色のインデックスを用いて描画色、色名を表示するよう対応。
8
+ ・決定したインデックスに応じて色コード、アイス名を表示するよう対応。
9
9
 
10
10
  ```JavaScript
11
11
  //バニラ、イチゴ、ラムネ、抹茶、メロン、オレンジ、チョコ
@@ -59,11 +59,11 @@
59
59
 
60
60
  // 背景色と同じ色を指定
61
61
  fill(229, 171, 229);
62
- // アイスの色名の部分を消去
62
+ // アイス名の部分を消去
63
63
  rect(200, 120, 200, 60);
64
64
  // 文字色を指定
65
65
  stroke(204, 102, 51);
66
- // アイスの色名を表示
66
+ // アイス名を表示
67
67
  text(names[c], 270, 130);
68
68
  }
69
69
 

1

不要なコードを削除、説明の追加

2021/12/19 11:17

投稿

cx20
cx20

スコア4700

answer CHANGED
@@ -2,12 +2,16 @@
2
2
 
3
3
  [https://jsfiddle.net/cx20/ha73p062/](https://jsfiddle.net/cx20/ha73p062/)
4
4
 
5
+ ＜主な対応内容＞
6
+ ・色の配列を用意
7
+ ・ランダムに色のインデックスを取得するよう対応
8
+ ・色のインデックスを用いて描画色、色名を表示するよう対応。
9
+
5
10
  ```JavaScript
6
11
  //バニラ、イチゴ、ラムネ、抹茶、メロン、オレンジ、チョコ
7
12
  let colors = ["#FEFAE0", "#FFC8DD", "#9BF6FF", "#2D6A4F", "#CAFFBF", "#FFB700", "#99582A"];
8
13
  let names = ["バニラ", "イチゴ", "ラムネ", "抹茶", "メロン", "オレンジ", "チョコ"];
9
14
 
10
- console.log(names.length);
11
15
  function setup() {
12
16
  frameRate(10);
13
17
  createCanvas(windowWidth, windowHeight);