Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

239
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!