Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

242
Visualizações
How to identify the cursor within an arc in p5.js?

I'm making a pie chart and would like my segments to highlight when the cursor moves over them, then to expand when the user clicks on the segment. I've seen many tutorials on how to have a circle or square recognize the cursor is within their space but nothing that I can wrap my head around for an arc that can change in size dependent on the value input.

Here's how I've set my chart up:

chartX = 250;
chartY = 250;
chartW = 250;
chartH = 250;

// Movie Genres
com = 32;
act = 52;
rom = 40;
dra = 18;
sci = 26;
totalMovies = com+act+rom+dra+sci;

function setup() {
  createCanvas(500, 500);
  background(255);
}

function draw() {
  startAngle = 0;
  totalRadians = TWO_PI;
  
  // Pie Chart  
  noFill();
  ellipse(chartX, chartY, chartW);
 
  fill(38,70,83);
  arc(chartX, chartY, chartW, chartH, startAngle, (totalRadians/(totalMovies/com)),PIE);
  startAngle = (totalRadians/(totalMovies/com));

  fill(42,157,143);
  arc(chartX, chartY, chartW, chartH, startAngle, startAngle + (totalRadians/(totalMovies/act)),PIE);
  startAngle+=(totalRadians/(totalMovies/act));
 
  fill(233,196,106);
  arc(chartX, chartY, chartW, chartH, startAngle, startAngle + (totalRadians/(totalMovies/rom)),PIE);
  startAngle+=(totalRadians/(totalMovies/rom));
 
  fill(244,162,97);
  arc(chartX, chartY, chartW, chartH, startAngle, startAngle + (totalRadians/(totalMovies/dra)),PIE);
  startAngle+=(totalRadians/(totalMovies/dra));
 
  fill(231,111,81);
  arc(chartX, chartY, chartW, chartH, startAngle, startAngle + (totalRadians/(totalMovies/sci)),PIE);

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Assuming your pie chart segments are defined as a series of angles and that the pie slices originate from a fix direction, then you can use the horizontal and vertical offset from the center of your pie to the mouse cursor, and then use trigonometric functions to find the angle between the line from the center of your pie to the mouse cursor and the horizontal axis. That angle can then be used to determine which pie segment the mouse is over. The specific trigonometric function you will want to use is the arc tangent (a.k.a atan, inverse tangent, or tan⁻¹), and the specific p5.js function is atan2().

The trigonometric function tangent takes an angle from one of the corners of a right triangle and returns the ratio between the length of the side opposite that angle and the side adjacent to it (that is between the angle and the 90 corner, not the hypotenuse). For the same angle, this ratio will be the same no matter the size of the triangle. The arc tangent performs the reverse operation, taking the ratio and returning the angle. However, because the ratio is the same for some triangles in different orientations, the atan2 function is a helpful variant that instead of taking a ratio, takes the vertical and horizontal sides (signed to indicate direction) and returns the correct angle from 0 to 360° (or 0 to 2π in radians). Obviously the angle in this scenario is not the actual angle of the corner of the triangle, but the angle between the positive horizontal axes and the hypotenuse of the triangle.

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];
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>

about 4 years ago · Juan Pablo Isaza Relatório

0

I assume you can do something with angles. you can get the angle from the middle of the chart with simple cos/sin function, and then you can determine if the mouse is on the line of the arc by the distance from the middle of the chart.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda