Search code examples
javascriptprocessingp5.js

Changing color of arcs on click

Image

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>

Solution

  • 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>