Changing color of arcs on click

Question

Here is a code I wrote in which I made two different arcs inside a circle. As of now both the arcs changes color at the same time when clicked inside the circle.

I cannot find a way to change the color of the specific arc which is getting clicked on.

Code

 function setup() { createCanvas(500, 500); r = random(255); g = random(255); b = random(255); } function draw() { background(255); stroke(0); strokeWeight(10); fill(r, g, b, 127); arc(200, 200, 200, 200, HALF_PI, PI*1.75); stroke(0); strokeWeight(10); fill(r-200, g-20, b-55, 200); arc(200, 200, 200, 200, 5.50, HALF_PI); fill(255); ellipse(200, 200, 150, 150); } function mousePressed() { let d = dist(mouseX, mouseY, 200, 200); if (d < 100) { // Pick new random color values r = random(255); g = random(255); b = random(255); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Answer 1

You need 2 colors. I recommend to use color() :

let color1, color2;

function setup() {
    createCanvas(500, 500);
    color1 = color(random(255), random(255), random(255), 127);
    color2 = color(random(255), random(255), random(255), 200);
}

function draw() {
    // [...]

    fill(color1);
    arc(200, 200, 200, 200, startAngle, endAngle);

    // [...]

    fill(color2);
    arc(200, 200, 200, 200, endAngle, startAngle);
}

Define a start angle and end angle:

let startAngle = Math.PI/2;
let endAngle = Math.PI*1.75;

Compute the angle of the vector form the center of the arc to the mouse:

let angle = Math.atan2(mouseY - 200, mouseX - 200);
if (angle < 0) angle += Math.PI*2;

Change one of the colors accordingly:

if (d < 100 && d > 75) {
    if (angle > startAngle && angle < endAngle) {
        color1 = color(random(255), random(255), random(255), 127);
    } else {
        color2 = color(random(255), random(255), random(255), 127);
    }
}

 let color1, color2; let startAngle = Math.PI/2; let endAngle = Math.PI*1.75; function setup() { createCanvas(500, 500); color1 = color(random(255), random(255), random(255), 127); color2 = color(random(255), random(255), random(255), 200); } function draw() { background(255); stroke(0); strokeWeight(10); fill(color1); arc(200, 200, 200, 200, startAngle, endAngle); stroke(0); strokeWeight(10); fill(color2); arc(200, 200, 200, 200, endAngle, startAngle); fill(255); ellipse(200, 200, 150, 150); } function mousePressed() { let d = dist(mouseX, mouseY, 200, 200); let angle = Math.atan2(mouseY - 200, mouseX - 200); if (angle < 0) angle += Math.PI*2; if (d < 100 && d > 75) { if (angle > startAngle && angle < endAngle) { color1 = color(random(255), random(255), random(255), 127); } else { color2 = color(random(255), random(255), random(255), 127); } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>