# Rotate an Image

• @orange said in Rotate an Image:

@Dominik-Mayer Can we make this with animation image strips? It will loop the image strip. I tried but coulsn't figured it out. Please help...

So you don't need a rotate image function, just an amimated picture... isn't it?

• @ossian1961 Yes, definately.... Because I've allready made a rotated image animation inside the strip. I only need to loop it.

• I used do that on KSP... I never tried it on Hise, but I think it could be make a looped slider with buttons that handle on and off and fps into java script... @d-healey surely knows how do it

• @Christoph-Hart @d-healey Is it possible to make an animated image strip loop view? It will loop from first to last frame, over and over again.

• @orange Almost certainly but I've never done it

• The & operator is your friend here...

• @Christoph-Hart @d-healey Do you mean I should use && operator in an "if else" conditional statement?

• Oops, my smart-ass me wrote & (logical AND) instead of % (modulo). To my defense these two are equivalent if the loop length matches the formula (2 ^ x) - 1

• It works this way:

the g.drawImage() function takes the filmstrip, the position [x,y,width,height] and the offsets as parameters. (the x-offset doesn't work btw..)

on each tick you advance to the next frame with the y-offset. Therefore you need to calculate the y-offset position for each frame. The modulo % operator provides a neat trick to divide the increasing index by the amount of the total frames. It returns a "looping" index with which you can cycle through the frames of your filmstrip.

greetings,
d

Resource:
on_off_64_64_24.png

reg index = 0; // index of the filmstrip
reg total_frames = 24; // total frames in the filmstrip
reg frame_height = 64; // the height(y) of each frame

Panel1.setPaintRoutine(function(g){
g.drawImage("dot", [0, 0, this.get("width"), this.get("height")], 0, index * frame_height);
});

Panel1.setTimerCallback(function(){
index = (index + 1) % total_frames;
this.repaint();
});

// Custom Callback for Button1

inline function onButton1Control(component, value)
{
if (value)
{
Panel1.startTimer(100);
}
else
{
Panel1.stopTimer();
}
};

• @Dominik-Mayer Thank you so so much, that's what I am looking for By the way,

I will use this in a fx plugin. Normally this animation should stop when the DAW is stopped to play project. WHen the song starts, then plugin should start the animation. If we want to start animation when the daw is in play, should I use it onNoteOn function? Or what should we do to do it?

• Can I define the direction of rotation based on a value of a button? So say, if button value is 1, the image rotates to the right so:

angle = (angle + 1) % 360;

And if the button value is 0, the +1 gets changed to -1?

• @d-healey Awesome! I've been trying to figure it out for the past hour so any tip would be highly appreciated!

• @d-healey Ah, that totally makes sense. Thanks so much!

• Trying To Attach This "Animation" Script To A Momentery Button, Which Works Only In One Direction " Start To Finish" Then Stops.

I Mean, As Soon As I Press The Button, Animation Starts, Then When It Reaches To It's Max "Filmstrip" Stops.

And Again, By Pressing The Momentary Button, It Starts To Animating!!!

Any Idea?