Questions about rotating images

i imported an image into my lookAndFeel-class. I wanna use it in my drawRotarySlider-method but i can’t find a method for rotating an image. what’s the juce way to do that?

(resizability doesn’t matter to me in this case)

edit: so that i can define some point (in this case the center of the image) and let it rotate around it

For scaling, translation and rotation usually an affine transform is used to describe how to transform the thing you want to draw. So to draw an Image with a transform there is Graphics:: drawImageTransformed . Take a look at the docs for that function here – reading the docs is always a good idea to find what you might be looking for, I think I never used that particular function, I just searched the Graphics documentation page for Image and found it.

That being said, a lot of modern UI design approaches use vector based graphics (directly described as Path in the source code or imported into a Drawable from an SVG file) and not bitmap images – I never worked on any bitmap-based UI. Vector based graphics stay crispy at all sizes and after all kinds of transforms applied to them in contrast to bitmap images. However I think most people that use bitmaps for their knobs export a filmstrip like series of pre-rotated pictures and draw the one that fits the current rotation angle instead of rotating it at runtime. This way the quality will likely be a lot better and consistent for each rotation angle, furthermore this way your knobs can have a drop shadow that is not rotated while the knob itself rotates.

1 Like

thanks :slight_smile: yeah, i know that vector graphics are more modern and i already experimented with them a bit but i it’s hard to draw knobs that looks pretty real that way. you know, with lighting and pseudo 3d look. so i thought maybe i should check out some image-based functions as well, especially considering that not every plugin has to be resizable so the image can have a hardcoded size and the only interpolation errors occur while turning it. i like your idea about using an array of turned images instead of turning the image in the code, especially considering that i can have some extra features like shadows then.

still i’d love to know a solution to how to rotate anything around a specific point. i’ve experimented with the affine transform a bit but it still feels a bit “random” to me. i mean i get that by default it rotates around the point 0,0, but how can i make it rotate around itself instead?

Yes of course, if you want the photo-realistic kind of plugin UI vector graphics are most likely not the best choice, just wanted to make clear the differences/advantages.

Have you seen that the rotation function has a second overloaded version that lets you specify a different point to rotate around than 0, 0?

1 Like

Which is worse IMHO, since you are bound to rotate the light sources with the image. And that will look quite awkward.

2 Likes

omg, that’s exactly what i was looking for. no matter if i actually use it for images or for vectorbased graphics, this will be really helpful

yeah, you are right about that :smiley: just tried it on my knob and it looks a bit silly. but hey, at least it works for now. i’m taking small steps and i need to try stuff before i can really blow up :>

That’s great, learning by doing, the motto of our boys scouts founder :slight_smile:

What I use to get lighting is, to create masks of the parts (e.g. a sickle where the shadow falls) and fill it with a gradient. This part shouldn’t rotate.
A lot to play around…

1 Like

so you actually draw shadows while using vector based graphics… nice.

edit: btw i changed the title because i just noticed that it was the wrong title all along. apparently juce forum still had my last unfinished draft saved that i never wanted to post anyway

1 Like

The most trivial to start with:
Freq-New-Knobs 2

A radial gradient slightly off center towards the sun gives it a rounded surface.

But there are people who do much better…

2 Likes

i think it looks awesome. i immediatly saw the “roundness” even though it’s just a gradient on a circle.

btw i also add my code here just in case some other newbs wanna try rotating their images around their center:

class HDLLookAndFeel : public LookAndFeel_V4{
public:
    HDLLookAndFeel(){
        ventilGold = ImageFileFormat::loadFrom(BinaryData::ventilGold_png, BinaryData::ventilGold_pngSize);
    }

    void drawRotarySlider(Graphics& g, int x, int y, int width, int height, float sliderPos,
        const float rotaryStartAngle, const float rotaryEndAngle, Slider& slider) override{

        int radius = jmin(width, height);
        int centreX = int(width / 2);
        int centreY = int(height / 2);
        float ventilCentreX = float(ventilGold.getWidth()) * .5f;
        float ventilCentreY = float(ventilGold.getHeight()) * .5f;
        float rotation = MathConstants<float>::twoPi * sliderPos;

        ventilGold = ventilGold.rescaled(radius, radius, Graphics::ResamplingQuality::highResamplingQuality);

        AffineTransform transform;
        float centreImage = float(centreX) - ventilCentreX;

        transform = transform.rotation(rotation, ventilCentreX, ventilCentreY).translated(centreImage,0);
        g.drawImageTransformed(ventilGold, transform, false);
    }
private:
    Image ventilGold;
};

I also just made up a quick’n dirty PIP where I squeeze an image that’s loaded from a file dialogue into a component and let the user rotate it by an amount of choice – maybe a nice for all people that want to play around with affine transforms and see what happens if you change the order of the transforms, etc.

ImageRotationExample.h (3.6 KB)

1 Like

hi, i am used to rotate only the value indicator, a bar or an arrow styled, all the rest, including the shadow is part of the background… whatever is an image or a vector knob
there are various options to you… just choose one that correspond to you.

i confirm that within vector, you can get something very realistic and more important, scalable !
bye

1 Like

i’m sure abou that :slight_smile: i just need to try harder. however my knob is actually a valve so it’s not something where you can just rotate the indicator. there isn’t even one actually, lol. but yeah, ofc for the traditional knob design it’s desirable not to rotate the image that has the shadow by using a seperated image or vector as indicator. i like resizability a lot btw but it’s not my highest priority. many small plugins don’t need a 100% flexible gui to be cool

Unless they are displayed on a 4k display, where they eventually will end up

1 Like

you might be onto something there. i was at a friend with a huuuuuuuge tv once and he had his computer connected to it. most plugins really shined with that high fidelity. especially when they had some kinda background texture on some stuff it looked really different and pleasing compared to my computer- and laptop screens.

People have regular (small) monitors which are 4K, 5K or even 6K. It’s simply higher density of pixels. Now a “fixed” plugin will look too small or it will be upscaled (stretched) and look blurry. Vector is the way to go. The shadows can be pre-calculated at a higher resolution and then scaled in real-time (to be smaller = still looks good).

Here is an example:

image

The shadow is created in real-time (just a circle that gets blurred) and then cached for future re-draws.

4 Likes

yeah, you are right. i should use images for other stuff probably. btw do you know how to put a textbox in the middle of the knob instead of some place next to it? i looked at the slider class reference but there is no function to override that lets me draw my own textbox in relation to the slider