文字と色が変わるときの連動

Question

アイスクリームの味を決めるプログラミングを作っています。マウスをクリックして色が決まった時に、味がテキストで表示されるようにしてほしいです。

//バニラ、イチゴ、ラムネ、抹茶、メロン、オレンジ、チョコ
let colors=["#FEFAE0","#FFC8DD","#9BF6FF","#2D6A4F","#CAFFBF","#FFB700","#99582A"];

let c=random(colors[6]);

function setup() {
  frameRate(10);
	createCanvas(windowWidth, windowHeight);
	background(229,171,229);
  noStroke();
}

function draw() {
  const x = width / 2;
  const y = height / 2;

  fill(random(colors));
	noStroke();
  ellipse(x, y, 200);

  fill(102,0,0);
  triangle(x - 100, y + 40, x + 100, y + 40, x, y + 290);

	
	//cone texture
  stroke(204,102,51);
	strokeWeight(4);
	line(x-100+15,y+40+30,x+100-15,y+40+30);
	line(x-100+24,y+40+60,x+100-24,y+40+60);
	line(x-100+38,y+40+90,x+100-38,y+40+90);
	line(x-100+50,y+40+120,x+100-50,y+40+120);
	line(x-100+62,y+40+150,x+100-62,y+40+150);
	line(x-100+75,y+40+180,x+100-75,y+40+180);
	line(x-100+85,y+40+210,x+100-85,y+40+210);
	line(x,y+40,x,y+280);
	line(x-40,y+40,x-40,y+190);
	line(x+40,y+40,x+40,y+190);
	line(x-80,y+40,x-80,y+90);
	line(x+80,y+40,x+80,y+90);
	
	//instructions
	fill(255,255,255);
	textAlign(CENTER, TOP);
	textSize(30);
	noStroke();
	text("アイスクリームの味何にする？", 770, 150);
	
if(colors[0]){
	text("バニラ",770,200);
}
	if(colors[1]){
  text("イチゴ",770,200);
}
}
function mouseClicked() {
  if (isLooping()) {
    noLoop();
  } else {
    loop();
  }
}

Answer 1

こんな感じでしょうか？

https://jsfiddle.net/cx20/ha73p062/

＜主な対応内容＞
・アイス名の配列を用意
・色の配列からランダムに色のインデックスを取得するよう対応
・決定したインデックスに応じて色コード、アイス名を表示するよう対応。

//バニラ、イチゴ、ラムネ、抹茶、メロン、オレンジ、チョコ
let colors = ["#FEFAE0", "#FFC8DD", "#9BF6FF", "#2D6A4F", "#CAFFBF", "#FFB700", "#99582A"];
let names = ["バニラ", "イチゴ", "ラムネ", "抹茶", "メロン", "オレンジ", "チョコ"];

console.log(names.length);
function setup() {
    frameRate(10);
    createCanvas(windowWidth, windowHeight);
    noStroke();
}

function draw() {
    background(229, 171, 229);

		const x = width / 2;
    const y = height / 2;

    // アイスの色を決定する（0～6を選択）
    const c = int(random(colors.length));

    // 先ほど決定したアイスの色を塗りつぶしに使用する色として指定
    fill(colors[c]);
    noStroke();
    ellipse(x, y, 200);

    fill(102, 0, 0);
    triangle(x - 100, y + 40, x + 100, y + 40, x, y + 290);

    //cone texture
    stroke(204, 102, 51);
    strokeWeight(4);
    line(x - 100 + 15, y + 40 + 30, x + 100 - 15, y + 40 + 30);
    line(x - 100 + 24, y + 40 + 60, x + 100 - 24, y + 40 + 60);
    line(x - 100 + 38, y + 40 + 90, x + 100 - 38, y + 40 + 90);
    line(x - 100 + 50, y + 40 + 120, x + 100 - 50, y + 40 + 120);
    line(x - 100 + 62, y + 40 + 150, x + 100 - 62, y + 40 + 150);
    line(x - 100 + 75, y + 40 + 180, x + 100 - 75, y + 40 + 180);
    line(x - 100 + 85, y + 40 + 210, x + 100 - 85, y + 40 + 210);
    line(x, y + 40, x, y + 280);
    line(x - 40, y + 40, x - 40, y + 190);
    line(x + 40, y + 40, x + 40, y + 190);
    line(x - 80, y + 40, x - 80, y + 90);
    line(x + 80, y + 40, x + 80, y + 90);

    //instructions
    fill(255, 255, 255);
    textAlign(CENTER, TOP);
    textSize(30);
    noStroke();
    text("アイスクリームの味何にする？", 270, 80);

    // 文字色を指定
    stroke(204, 102, 51);
    // アイスの色名を表示
    text(names[c], 270, 130);
}

function mouseClicked() {
    if (isLooping()) {
        noLoop();
    } else {
        loop();
    }
}

■ 実行結果

＜参考＞
■ p5.js | Reference | random()
https://p5js.org/reference/#/p5/random
■ P5.js 日本語リファレンス(int)
https://qiita.com/bit0101/items/40c2bd361982a61c6a5a

Comments

[maymain]

分かりやすいコードでありがとうございます。

[TN8001]

> // アイスの色名の部分を消去

draw冒頭でbackgroundすれば不要ですね。

もし「色が決まった時」**だけ**「テキストで表示」だったら面倒だなぁと思いましたが、noLoopしてもdrawは１回呼ばれるんでした^^;

[cx20]

TN8001 さん＞
> // アイスの色名の部分を消去
> draw冒頭でbackgroundすれば不要ですね。
たしかにそうですね。サンプルコード修正させていただきました。

[maymain]

アイス名の部分を消去がいまいちよくわからないので教えてください。

[maymain]

もう一つ質問ですが、backgroundをset up かdrawのどちらに書くことの違いは何でしょうか

[cx20]

先ほど、サンプルコード修正させて頂きました。
以前のコード）アイス名を表示するエリアを■■■という感じで紫色で毎回塗りつぶしていた。
現在のコード）シンプルにdraw冒頭でbackground（背景色）の塗りつぶしを行うようにした。

[cx20]

> backgroundをset up かdrawの違いは何でしょうか
呼ばれるタイミングの違いです。
setup() は初回に１回
draw() は、再描画する度に何度も呼ばれます。
＜参考＞
■ p5.js draw()関数を詳しく
https://himco.jp/2019/02/11/4_1%EF%BC%9A%E5%BF%9C%E7%AD%94%E3%82%92%E5%BE%97%E3%82%8B-p5-js-draw%E9%96%A2%E6%95%B0%E3%82%92%E8%A9%B3%E3%81%97%E3%81%8F/

[maymain]

drawにbackgroundを書けば、文字が書かれるごとに何度も呼ばれるからということですね。初めて知りました。ありがとうございます！！

[cx20]

パラパラ漫画みたいなものですね。ページ毎にdraw関数が呼ばれるようなイメージです。