How would I make the circle parts change color when I press a button?

crashpotato

var cY
var cX
var cX1
var cY1
var cX2
var cY2
var rX
var rY
var r
var t
var spinning
var count
var song

function setup() {

  rect(100,30,30,30)

  spinning = false
  r = 1
  translate(width / 2, height / 2);
  createCanvas(400, 400);
  background('black');


  cX = 80
  cY = 100
  cX1 = 250
  cY1 = 440
  cX2 = 167
  cY2 = 250

 if (mouseX > 275 && mouseX < 375 &&
    mouseY > 250 && mouseY < 350 &&
    mouseIsPressed){
  fill(random(150,200),random(170,210),random(180,220))

}
  else{ fill('red')}
  rect(70, 60, 150, 72)
  fill('red')
  noStroke()

  translate(width / 2, height / 2);

  rotate(45.09);
  rect(-104, 27, 150, 72);
  rotate(-45.09);
  translate(-width / 2, -height / 2);
  translate(width / 2, height / 2);
  rotate(90.18);
  rect(-100, -32, 160, 72);
  rotate(-90.18);
  translate(-width / 2, -height / 2);



  fill('black')

  stroke('red')
  strokeWeight(7);
  ellipse(cX, cY, 100, 100)
  fill('grey')
  ellipse(cX, cY, 100, 100)
  fill('black')
  ellipse(cX, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX1, cY, 100, 100)
  fill('grey')
  ellipse(cX1, cY, 100, 100)
  fill('black')
  ellipse(cX1, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX2, cY2, 100, 100)
  fill('grey')
  ellipse(cX2, cY2, 100, 100)
  fill('black')
  ellipse(cX2, cY2, 70, 70)


rX = 100
rY = 150


}
function draw() {

  background('black')
 fill('blue')



  fill ('red')



  fill('darkred') 
rect(117,120,80,100)
  fill('red')
  rect(150, 340, 100, 50)
  stroke('white')
  fill('red')
  textSize(40)
  text("SPIN", 152, 375)
  noStroke()

fill('green')
  rect(30, 340, 100, 55)
  stroke('white')
  fill('red')
  textSize(40)
  text("SPIN", 33, 380)
  noStroke()

  if (mouseX > 150 && mouseX < 250 &&
    mouseY > 340 && mouseY < 390 &&
    mouseIsPressed){
   spinning = true 
    r = r + 55
  } else {
    spinning = false;}
     if (mouseX > 30 && mouseX < 250 && mouseY > 340 && mouseY < 390 &&
mouseIsPressed){
   spinning = true; 
    r = r + 0.3;

  } else {
    spinning = false;}     

  //r = r + 5;

  translate(width / 2 - 30, height / 2 - 37.98345359);

  if (spinning == true)
  {rotate(r)}

  translate(-width / 2 + 30, -height / 2 + 37.98345359);
  fill('blue')
  rect(70, 60, 150, 72)
  fill('blue')
  noStroke()
  translate(width / 2, height / 2);
  rotate(45.09);
  rect(-104, 27, 150, 72);
  rotate(-45.09);
  translate(-width / 2, -height / 2);
  translate(width / 2, height / 2);
  rotate(90.18);
  rect(-100, -32, 160, 72);
  rotate(-90.18);
  translate(-width / 2, -height / 2);
  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX, cY, 100, 100)
  fill('grey')
  ellipse(cX, cY, 100, 100)
  fill('black')
  ellipse(cX, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX1, cY, 100, 100)
  fill('grey')
  ellipse(cX1, cY, 100, 100)
  fill('black')
  ellipse(cX1, cY, 70, 70)

  fill('black')
  stroke('red')
  strokeWeight(7);
  ellipse(cX2, cY2, 100, 100)
  fill('grey')
  ellipse(cX2, cY2, 100, 100)
  fill('black')
  ellipse(cX2, cY2, 70, 70)

    ellipse(166,150,70,70)
} 

GoToLoop

You should create a class to represent each Circle element along w/ all its properties: *-:)
https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
https://GoogleChrome.GitHub.io/samples/classes-es6/index.html