单击更改弧的颜色

Question

这是我写的一段代码，我在一个圆内做了两条不同的弧线。截至目前，当在圆圈内单击时，两个圆弧会同时改变颜色。

我找不到改变被点击的特定圆弧颜色的方法。

代码

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

您需要 2 种颜色。我建议使用 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);
}

定义起始角和结束角：

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

计算从圆弧中心到鼠标的矢量角度：

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);
    }
}

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>

单击更改弧的颜色

Changing color of arcs on click

javascript

processing

p5.js