Rotate an Image

Jay

@Dominik-Mayer can I have the code ?

Jay

@Dominik-Mayer ???

d.healey

@Jay said in Rotate an Image:

@Dominik-Mayer ???

Have you tried to understand the code I gave you? If so, which part are you struggling with?

Dominik Mayer

Here is the script with a little embedded Task ;)
You can surely figure it out.

resource:

save as logo_bw.png in the Images Folder of your project.

Content.makeFrontInterface(600, 500);

const var Panel1 = Content.getComponent("Panel1");
const var Knob1 = Content.getComponent("Knob1");
const var Button1 = Content.getComponent("Button1");

reg angle = 0;
reg speed = 0;

Panel1.loadImage("{PROJECT_FOLDER}logo_bw.png", "test");

Panel1.setPaintRoutine(function(g){
    g.rotate(Math.toRadians(angle), [this.get("width")/2, this.get("height")/2]);
    g.drawImage("test", [0, 0, this.get("width"), this.get("height")], 0, 0);
});

Panel1.setTimerCallback(function(){
    angle = (angle + speed) % 360;
    this.repaint();
});


// Custom Callbacks for Knob1 and Button1

inline function onKnob1Control(component, value)
{
    // TASK: set something to the value of the Knob
};
Content.getComponent("Knob1").setControlCallback(onKnob1Control);


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

Content.getComponent("Button1").setControlCallback(onButton1Control);

HiseSnippet 1202.3ocsW0saaaCElxIpq1adXEnWrKILv.jwxRTZSyJZwvbiiyfWZRLhyJJvPQ.iDkLQjHEjnZhWP.1ixdT1k6wXOB6MX6PQJK4Fmz3BLcSxg77wy24Gd3wiREdzrLQJxp4ISSnHquvd7TtbR+IDFGMbWj0WYOJhHkTdVBiFQSQ6LMgjkQ8QVVq7SJsrZtJp36e9wcHQDtGsZID5MBlG80rXlrZ0Q81mEEsGwmdBKtl1a0anmf2WDIxAFshsKJg3cNIjdHQoVCaj0CF3yjhzwRhjlgrVcGg+zwSDWv05+FVF6rHpRXSzX3fzKumHxWwX0pn9SXQ9iJ87LDbJiphCqniCO19.lOa150iGpMvUHpGOrZbWzayOQ5YUidqpo2irG6kxRjU6n31maOjKooADHETmVZcQM9qUs6K.M3x0iImS2KEDlgvYaW20vOy0s6Ka2pcKHQjIwumjhGQ3znMw+.tDaHU1WDmH3ffSG81cTnpvrOWb1sCoX2O.wN4Rofe6XL62QytTZHlvCinf9tuTKmkPo9F41szzZ8HAweXLTB4z4pQGezOOn+Imt2Qud2AGecjHTb5YWrdBOryZ3NPBSZNcC1LpbDj1kGKxkLN0IHm6IYBtSX2qZ2BCegqmJToZmCHxIqKEGS7YDdlSA05tF9WkSXYJGwoyELe4jNc23IqgqVbBkENQpV8cJKqOR+TxEFJWvI3XfDiacblCaQG06JTsHId8G5Mpaao8IQQmAWqpbmRuoLfpoO9a0Qzt3uA+zscMzqvfozDUbwolQZ2ZiMv8yyjhXboExvAhxRAB2uLEqTlwifHJtjBXAuPMUpOUD43Ul2WCpMhxoca2xvQvJm7pw6+BL3N3LQLEHDODKE.ynZkwhfBA0IB7Cn2cVEpBLF6NKzLOcJ8vaRZiGc2ztIK.6TJq7gqvX8+n9JyNRRpN+3rkaYsv05+PixnFjK.mHQCqFnqKH7G4dzh8648H0YVycOTHoGA0KstpUyVWeicBBVzVliJRQwatqg62JLGdd7Yzzx.pQOnO37MZsueMZ8zgjZJJ3C4L4QIT9s09EYhiPi3FFRApJKZC+kl1viiX9vSiLna6mYWT5fJ3a8GBQ2FXcHu.bSaS7eAv+kg6RjD0yAFBAjLglJYJ+2ZW56g2Y0ONzzdWZ14PgAXpYYd3oSsYaW9zgp.pvpOzVWLgtrxfecuoUB3dEMblsPO+d51MyV4286gpYplezvyk0e0uxT+QXu3ZiT72I+YL4xZh8jzKkpSYrp0DJSRSFy9MZ8YPxxCBX.FaabpOBcy.vcF2qwqmWmWbike.XYffyGOPm1Ccy2ngIED94vvSyO9fZlIyFPk9buSqdKlmwjSq6OKwLEt26YJtuz8Q1iXRuIKluMV.eU2R9elulIzZaOHHf5IqH6p1681O0wwVBpnGGHDdxOsnN6v73wv.qdTfIb3djpcjUC0EdsrqRVEYFS49EB+K7Y1bSkrkYyMK2DES7REm5o6XnlA7gEq.bhWLJbS6CTx3YMJT7NFFL8TOOUf36.luXDOYoQ7zkFwVKMhmszH1doQ78KMhmeGHT+JfWkCi6nuV.KLZPQCZKqAbBTUUTAh9Ojd9pJF

Greetings,
d

orange

@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...

ossian1961

@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?

orange

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

ossian1961

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 ;)

orange

@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.

d.healey

@orange Almost certainly but I've never done it

Christoph Hart

The & operator is your friend here...

orange

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

d.healey

@orange & is not the same as && - https://www.w3schools.com/js/js_operators.asp

Christoph Hart

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 :)

Dominik Mayer

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.loadImage("{PROJECT_FOLDER}on_off_64_64_24.png", "dot");

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();
    }
};

HiseSnippet 1090.3ocsV8uaiSDDdcaLbIPPbR7.rJRmjCT5kTxUPpBQn4Gn.WaiZJm3DBEs0dc7pZuqk85qMpJua7Hwa.Lq20INsIkK+QspZ6Ny7sy2L6ryriSDtzzTQBxp5UyioHqO2dxbtLnW.gwQi5ir9R6wgDojxSiYzPZB5z4wjzTpGxxZ+eQYkU0Jn7u+4mNkDR3tzUhPn2IXtz2xhXxURG282XggCIdzqXQkrtS2QtBdOQnHCXz91sPwD2aHynmSTlsmMx5SF3wjhjIRhjlhrpbpva9j.wsbs8uikxtNjpVzFMA1Hs3ghPOEiURQ8BXgdiKh7TDrKiWkG1WmG9J6yXdrkxKmOTJvqPTNeXs2SQu1koWqOd5YUhdUzz6k1SbSXwxUZTb6yrGwkzDeBbDTlVZaQ68pJ18DfEb4gQjanCSfEKQ3bbqVGfeSqVMOods50fChTI9CjD7XBmF1F+i3BrynxdhnXAGV3zPqtgB0JLmlIkB91AYz2P6qD5LLi6QuCru0I3W+ZyJgOVFPw9rvnTIDBXsoRgjDN0OAJJRADG0IGRtTrQJiuNRMvbkSCnrYAR.3wFffgZYNyap7Ik3FnsUQt50zQ3ggBh2nHnZzow8iu7hecPuqlN7h21evkKD7oBe+oG2Q8yQcNLlOqwA3FdBoIBMaQJUNFJjjWJxjLN0wOi6JYBtyrl2WuFF9z+d1gdIjaMNSsKGf+S3vA9QFvRU4RmF2x7jAMZVVjNJZz7uxMUmC+50hZEaV7PJotDlziDFdMbaaEmJnTwIii9e9Fb6l3Ws1gvIZCyIRBMVEgNk7T8ZPVtWVpTDgKbC1WrrJQYAiGBIDbgywBtQop9IQD53VT7b.TfElQaVuFvupLerSwZEGtuHEp9JBQIIQGjNs0k2JkKz+gFlRMP2.PQrFWIPKxio+mxZUZ0v7kI1GFRp8rT7dtPRu.x50tuV0ZKdjFe+MoxrUgJJ9XsFtuUXN7rnqoIEYTicPSl06hYu8tXkax5pSIkLTvGwYxKho7s0aCYxiptbFRAlJy6w8Eldb5rFhAsxpZaRgnbFWdNC52G0mHIEaDrmfehoIRlJDr5S+.LGR27rpceZ5MvYKLRY4gGLZQ615EsVU0.4d8E155AzcqbXqtyKuH+xX4Ab5qakkfdrqdxHbKN6ueeWI8NXO9T675ZzCb8ztnGOt.FZI7xf43qOISM91n.pKVajgZr.OkImWd79yx3sOV59R6wLoavl46dafuPovyMeMOVnt8.eepqbEYqXO7Od9eY.ROGY1YDXFGTuXedVzD3sStTfIbnjUc40ZO00L85Vp0pLyDJ2Kew+BeFksUqsLJaWnDEQbSDSc0WNUOG4E4R.NwyeUVU6yTqwKuSp3cD7FoottpDw2BLeyHNZmQ7c6LhN6Lh2ryHNdmQ786Lhe3IPndP5OmASW0WK.AiGj2KzxZ.m.UU4Ufn+CSrMQs.

orange

@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?

tomekslesicki

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

@tomekslesicki Yes

tomekslesicki

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

d.healey

HiseSnippet 944.3ocsV8+ZaaDE+jiUoVatrB6Ofi.EjYoAo01zxJg5F+kgYKoh4rvfwnbQ5r8QjtSHcpIlRf82v9uZ+2r+C1d2cRVxspkTC69Aade+y6cu26TPlHjlmKxPV8NecJEY801yWykqFshv3nYiQVOv9TRtjlgMrNYcJIOmFgrr16GULr50EoO+yqNgDS3gzZVHzEBVH8mYILYM2fg+DKNdJIhdNKog1Oc3rPAejHVT.3YOaOTJI7JxR5YDkZcrQV2aRDSJxlKIRZNnyIhn0yWItlaz+BVN6xXphvGMGbjgMZzJVbTPUtliPVcCpy78LY92ZeJKhsgecE3azBv0VzrFX0YaH0cKH4+ofzTQbjxAeB3Y0.dcMv6g1yCyXoxZIJr8U1y3vkyBBT1aBKitnN+UG6QBPCt7vDxUzoY.wFKbOxy6.7y77F7x9N8cxnKwD9xXplBtJxk32QxvADNM1GeLtxSKoxQhjTAGHb22HdeiOLDGlSkAP4S9KhBIiScWTvCkLA2c4f9NuuuCFN5PAd07+2gkqX4JWeAItf5N.+H7SNxS6Tk1KU9zza35cyyGOUeTA0HcAzRcdFS6L2e2WkXa8yebfIPUVz24VChY7X.g3JDhE7SJjRA2WksYhX2vpT8.nZ.PqNCzj3iOF6geEtNyMIvi8Gf+gOhq+fWZhduRIYzTUgxUAla0.p8pbIn1efoNng1HRb7kvHh6GhYkyZjPmIjz2vcG37dmdN25f+PQKVzprRmESyZUrZ3M6yYnKuH4RZVUYqRQnid6Ql6c2FYBM0kFJJ3y3L4aRokz0CU9sLTgJKrpwqRDBpJ0CWOnb3xTFQLvI8rKqoHM7atTC8qyFSjjJGA9DhSJMSxToi0X56fkdlo1d1io4WIEov9qM2lPJaBa+pYZUufNp221zWftYS.+yoCWWG8ICulEIWgrrs9aKDZEksbkTQcfkNE2Dht2gL6ll9sNHAWOD8wKff0fhnhXhb6cipGAJE.29asDRsngmyjqa9HwWvBSuVWX15c6cDtOzNfICW0Nd6zBdg63+uwa4yO8smrXAMTVC1t1S+sc8slu.nX1Qu7ThLiAMD1mUjLG1xFRAjvgdwbU2UGUykg1SQqpLyo7HMw+BmRg9JZqRg9UBQIjvLwaCMScpG3tulCfIt9s8dvGY.z3MCa11dG5gRf2ceaXnpT7X.6say2uC17jcvlmtC17rcvli1Aad9NXyK9r1n9jmWWHEIlwDfQvD8ROKqIbBzko6HQ+Gfi+AaE

Rotate an Image

36

1.7k

11.9k

103.5k