User defined curve GUI element

I’m new to JUCE. I’d like to make a GUI element similar to the envelopes in Serum. A curve that the user can change the slope of with their mouse.

I know line and path classes exist. Would I want to use those for this? Or would I need to make my own graphic class to achieve this? I’d really appreciate a point in in the right direction, thanks!
IMG_3885

We’ve done lots of these. If you are new it can be a bit of a headache.

Firstly solve making a point you can drag around. Have that as a subcomponent (g.fillEllipse(getLocalBounds()); in it’s paint method) and then render the line between two of the points in the parent components paint method (g.drawLine(…)).

Much of the other stuff is constants on the movement of that point.

You’ll have to decide what kind of curves you want to draw if you want bendy lines - lots of performance, complexity tradeoffs there :slight_smile:

You may find, if you want to support multi-select in the future, you need to move all the mouse handling to the parent component and setInterceptsMouseClicks(false, false) on your draggable points.

For the curve definitely read Signalsmiths blog:

There is also code in it

5 Likes