Rotate an Image

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

tomekslesicki

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

Natan

This post is deleted!

Rotate an Image

39

1.7k

11.9k

103.5k