Greetings! I have four bezier curves (pasted code for two below as MCVE), and would like to be able to show only one if the mouse is hovered over the respective one. I tried finding how to assign a class to the curve, use a distance condition, but all were failed attempts. I could use some guidan…

Thanks for the post! I will admit, I read and have to yet read your response multiple times to make sense of it. Seems a bit too complicated for where I am at the moment, which is stuck trying to figure out why I’m not even able to define a new class for one curve on one of the two canvases. Seems…

What would be the purpose to hide all but one curve?? User would have to move the mouse randomly to find other curves! Consider all curves are pale and one curve is highlighted? Also, you didn’t understand mcve. Your mcve should be runnable so people can improve it instead of giving advice withou…

Thanks for the message, Chrisir! Sure, all pale and one curve highlighted sounds good. I meant to hide all but one ‘only on hover’ of the respective one. So curve A,B,C,D loads just fine but when user hovers over A, the others B,C and D could be hidden or even better as you suggested, pale. Thanks …

We talk about an animation here because view changes depending on mouse position: which curve is highlighted. Hence you should let your mcve have setup and draw()/loop

Yup, setup and draw now included.

Here I worked with beziers [image] Camera Animation: Move camera on 3D curve Gallery Hello all, when making a movie, I always wanted to go by the scene or object with a flying camera. This would be cool for Animation. I made a sketch now that features two different cur…

If you have four curves and they aren’t updating every frame, then the picking algorithm is probably faster and more flexible. create an index of colors, 1 for each stroke. create a Graphics set a thick stroke (e.g. 3-4), and draw each curve to the Graphics in a different color. update only when t…

Thanks for the your response, Jeremy! I have SO much to learn. Could you help with resources on where to start? [image] jeremydouglass: then the picking algorithm is probably faster and more flexible. Kindly advice what is a picking algorithm? By index of colors, did you mean an array (j…

Here is a simple demonstration. Hopefully it answers your questions. https://editor.p5js.org/jeremydouglass/sketches/83XyPImMP [26%20PM] Notice that there are two kinds of drawing from the curve data: drawing the map, which is done in unique colors that are added to an index. drawing on the sk…

Hi Jeremy! Thank you so much for illustrating with a simple and yet very helpful example. :raised_hands: If I may, could I use this logic for data that’s pulled from a JSON file? In other words, say if I would be drawing the bezier curves by first setting up a class in setup for eg, curve1 = new …

Hide all bezier curves except the one on mouse hover

p5.js Coding Questions

Chrisir August 27, 2019, 6:36am 13

Here I worked with beziers

I hope this helps.

Topic		Replies	Views
Could somebody proof-read my curve Class? Coding Questions	4	407	October 22, 2020
Help with dragging an object using mousePressed Coding Questions	44	3191	September 28, 2021
Drawing array of curves from PVector Coding Questions	12	900	December 9, 2021
Distance to a bezier curve Gallery	8	877	August 24, 2018
Pattern Attractors Project Guidance	21	5195	August 16, 2018

Hide all bezier curves except the one on mouse hover

Related topics