Rotate an Image



  • deskrotate.gif
    HISE Turntable Tapemachine?



  • @Dominik-Mayer yes something like this



  • @Dominik-Mayer can I have the code ?





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



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

    resource:
    logo_new.png
    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



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



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


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


 

4
Online

410
Users

1.4k
Topics

9.9k
Posts