Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

240
Vistas
¿Cómo identificar el cursor dentro de un arco en p5.js?

Estoy haciendo un gráfico circular y me gustaría que mis segmentos se destaquen cuando el cursor se mueva sobre ellos y luego se expandan cuando el usuario haga clic en el segmento. He visto muchos tutoriales sobre cómo hacer que un círculo o un cuadrado reconozcan que el cursor está dentro de su espacio, pero nada que pueda entender por un arco que puede cambiar de tamaño dependiendo del valor ingresado.

Así es como configuré mi gráfico:

 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 Respuestas
Responde la pregunta

0

Suponiendo que los segmentos de su gráfico circular se definen como una serie de ángulos y que las porciones circulares se originan en una dirección fija, entonces puede usar el desplazamiento horizontal y vertical desde el centro de su gráfico circular hasta el cursor del mouse, y luego usar funciones trigonométricas para encontrar el ángulo entre la línea desde el centro de su pastel hasta el cursor del mouse y el eje horizontal. Ese ángulo se puede usar para determinar sobre qué segmento circular se encuentra el mouse. La función trigonométrica específica que querrá usar es el arco tangente (también conocido como atan, tangente inversa o tan⁻¹), y la función p5.js específica es atan2() .

La función trigonométrica tangente toma un ángulo de una de las esquinas de un triángulo rectángulo y devuelve la relación entre la longitud del lado opuesto a ese ángulo y el lado adyacente (es decir, entre el ángulo y la esquina 90, no la hipotenusa) . Para el mismo ángulo, esta relación será la misma sin importar el tamaño del triángulo. El arco tangente realiza la operación inversa, tomando la relación y devolviendo el ángulo. Sin embargo, debido a que la razón es la misma para algunos triángulos en diferentes orientaciones, la función atan2 es una variante útil que en lugar de tomar una razón, toma los lados vertical y horizontal (firmados para indicar la dirección) y devuelve el ángulo correcto de 0 a 360 ° (o 0 a 2π en radianes). Obviamente, el ángulo en este escenario no es el ángulo real de la esquina del triángulo, sino el ángulo entre los ejes horizontales positivos y la hipotenusa del triángulo.

 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 Denunciar

0

Supongo que puedes hacer algo con los ángulos. puede obtener el ángulo desde el centro del gráfico con la función cos/sin simple, y luego puede determinar si el mouse está en la línea del arco por la distancia desde el centro del gráfico.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda