Rotating image of Retro Disk

Hi,

I’m creating a rotating disk using an image of a disk. I simply need to rotate the image slowly while music is playing to give my player a retro look. I’m not controlling anything with a rotating disk. The code I’m using in paint method is shown below.

What should I do to make the image keep rotating slowly? Please suggest.

juce::Image image = juce::ImageCache::getFromFile(juce::File::getCurrentWorkingDirectory().getChildFile("disk.png"));
    //g.drawImageAt(image, 20, 20, false);

    float rotationAmount = 0.0f;

    auto componentArea = getLocalBounds();
    auto imageBounds = image.getBounds().toFloat();

    auto scaleWidth = componentArea.getWidth() / imageBounds.getWidth();
    auto scaleHeight = componentArea.getHeight() / imageBounds.getHeight();

    // first scale the image so that it fits the main component. Might look ugly but serves as an example
// then rotate it around the centre of the component
    auto transform = juce::AffineTransform::scale(scaleWidth, scaleHeight).rotated(rotationAmount, componentArea.getCentreX(), componentArea.getCentreY());

    g.drawImageTransformed(image, transform);

I inherited MainComponent from juce::Timer and implemented timerCallback() where I increase the value of rotationAmount but the rotation is very weird.

I’m not sure what am I need to fix to get a proper rotation of the disk around its centre.

You’re using the component bounds for the centre, probably want to use the image bounds instead.

@asimilon thanks for the reply. As you can see from the code, the problem I’m facing now is that it is rotating smoothly after calling repaint() inside timerCallback() BUT the axis of rotation is not in the center of the image. I’m not sure how to bring it to the center of image so the disk rotates with axis of rotation in the centre of it.

#include "MainComponent.h"

//==============================================================================
MainComponent::MainComponent()
{
    setSize (600, 400);
    float rotationAmount = 0.0f;
    Timer::startTimerHz(60);
    angle = 0;
    
}

MainComponent::~MainComponent()
{
    Timer::stopTimer();
}

void MainComponent::timerCallback() 
{
    repaint();
}



//==============================================================================
void MainComponent::paint (juce::Graphics& g)
{
    //drawRotary(g,150,150,160,160);
    juce::Image image = juce::ImageCache::getFromFile(juce::File::getCurrentWorkingDirectory().getChildFile("disk.png"));
    //g.drawImageAt(image, 20, 20, false);
    auto componentArea = getLocalBounds();
    auto imageArea = image.getBounds();
    auto transform = juce::AffineTransform::rotation(angle).translated(imageArea.getWidth()/2, imageArea.getHeight()/2);
    g.drawImageTransformed(image, transform);
    angle += 0.005;
}


void MainComponent::resized()
{
    // This is called when the MainComponent is resized.
    // If you add any child components, this is where you should
    // update their positions.
}

I found it here Questions about rotating images - #6 by Mrugalla that
I need to use

auto transform = juce::AffineTransform::rotation(angle, imageArea.getWidth() / 2, imageArea.getHeight() / 2);

to make it work.

After that disk is rotating smoothly around its own axis.