色指定とスロットのような連動

Question

前提・実現したいこと

アイスの味を変更するプログラムを作りたいです。
現段階ではマウスをクリックするとアイスの味のスロットが止まり、味が決まるのは出来ています。それにプラスしてもう一度クリックするとまたアイスの味スロットが動き出せるようにして欲しいです。

発生している問題・エラーメッセージ

色を指定しても反映されない。

該当のソースコード

ソースコード
```colorMode(HSB,360,100,100,100);
//バニラ、イチゴ、ラムネ、抹茶、メロン、オレンジ、チョコ
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() {
	fill(random(255),random(255),random(255));
  ellipse(width/2,height/2,200);
	fill(160,128,96);
	triangle(668,450,868,450,768,700);
}	
	function mouseClicked(){
		noLoop();
		}

Comments

[thkana]

それ、Yahoo知恵袋で見た。
https://teratail.com/help#posted-otherservice
「やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。」ということで。

[maymain]

ヤフー知恵袋は返事がなかったので削除した後、こちらに投稿させていただきました

Answer 1

noLoopとするとdrawが呼ばれなくなるので、また再開（loop）する必要があります。

isLooping()で今loopかnoLoopかがわかります。
reference | isLooping()

mouseClickedで、逆になるようにすればいいでしょう。

アイスの味（colors）を作っていますが使っていません。

アイス（ellipse）は画面の中央に描いているのに対し、コーン（triangle）は固定値なのでブラウザサイズによってアイスが乗らなくなってしまっています。

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

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

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

  fill(random(colors));
  ellipse(x, y, 200);
  
  fill(160, 128, 96);
  triangle(x - 100, y + 40, x + 100, y + 40, x, y + 290);
}

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