Image

Voici un code que j'ai écrit dans lequel j'ai fait deux arcs différents à l'intérieur d'un cercle. A partir de maintenant, les deux arcs changent de couleur en même temps lorsqu'ils sont cliqués à l'intérieur du cercle.

Je ne trouve pas de moyen de changer la couleur de l'arc spécifique sur lequel on clique.

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>
1
Ankit kumar 15 nov. 2020 à 20:34

1 réponse

Meilleure réponse

Vous avez besoin de 2 couleurs. Je recommande d'utiliser 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);
}

Définissez un angle de départ et un angle de fin :

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

Calculez l'angle du vecteur du centre de l'arc à la souris :

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

Modifiez l'une des couleurs en conséquence :

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>
1
Rabbid76 15 nov. 2020 à 17:58