inside arc

const colorNames = ['red', 'green', 'blue'];

const radius = 80;

​

let segments = [ 34, 55, 89 ];

let angles;

let colors;

​

let centerX, centerY;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  ellipseMode(RADIUS);

  angleMode(DEGREES);

  noStroke();

  let total = segments.reduce((v, s) => v + s, 0);

  angles = segments.map(v => v / total * 360);

  colors = colorNames.map(n => color(n));

​

  centerX = width / 2;

  centerY = height / 2;

}

​

function draw() {

  background(255)

  let start = 0;

  let mouseAngle = atan2(mouseY - centerY, mouseX - centerX);

  if (mouseAngle < 0) {

    mouseAngle += 360;

  }

  let mouseDist = dist(centerX, centerY, mouseX, mouseY);

  for (let ix = 0; ix < angles.length; ix++) {

    let hover = mouseDist < radius && mouseAngle >= start && mouseAngle < start + angles[ix];

    fill(red(colors[ix]), green(colors[ix]), blue(colors[ix]), hover ? 255 : 127);

    arc(centerX, centerY, radius, radius, start, start + angles[ix]);

    start += angles[ix];

  }

}