14 Commentsto With all this material.. Here’s a bit of animation! I’d like to see what you guys might do with it!!

1. Anonymous says:

   February 2, 2015 at 12:03 am

   < ![CDATA[

   var c=LL.getEvent().getContainer();

   
   

   var cw=c.getWidth();

   
   

   var ch=c.getHeight();

   
   

   var cx=c.getPositionX();

   
   

   var cy=c.getPositionY();

   
   

   
   

   var math={

   
   

   pnt:function(a,b,c){return a+((b-a)*c);},

   
   

   pthg:function(a,b){return Math.sqrt((a*a)+(b*b));}

   
   

   };

   
   

   
   

   var i=c.getOpener();

   
   

   
   

   b=cy%ch/ch;

   
   

   
   

   
   

   var hex=[

   
   

   
   

   0xff795548,//brown

   
   

   0xff259b24,//green

   
   

   0xffff9800,//orange

   
   

   0xff00bcd4,//cyan

   
   

   0xffE51C23,//red

   
   

   
   

   0Xff9C27B0,//purple

   
   

   0Xff673AB7,//deep purple

   
   

   0XffE91E63,//indigo

   
   

   0Xff3F51B5,//pink

   
   

   0xff009688,//teal

   
   

   0xff607d8b//greyblue

   
   

   ];

   
   

   var page=cy<0?0:Math.floor(cy/ch)%hex.length;

   
   

   
   

   var p = new Paint();

   
   

   p.setColor(hex[(page+1)%hex.length]);

   
   

   
   

   
   

   img=LL.createImage(cw,ch);

   
   

   i.setBoxBackground(img,”n s”);

   
   

   canvas = img.draw();

   
   

   
   

   var r=math.pthg(cw,ch)/2;

   
   

   r=math.pnt(0,r,b);

   
   

   
   

   if(cy>=ch){canvas.drawColor(hex[page]);}

   
   

   canvas.drawCircle(cw/2, math.pnt(ch+r,ch/2,b), r, p);

   ]]>

   Reply
2. Anonymous says:

   February 2, 2015 at 4:41 am

   < ![CDATA[

   Haha! That’s pretty dang cool!

   ]]>

   Reply
3. Anonymous says:

   February 2, 2015 at 4:44 am

   < ![CDATA[

   What’s the setup for this? I see it’s several vertical panels, but what all is involved?

   ]]>

   Reply
4. Anonymous says:

   February 2, 2015 at 5:20 am

   < ![CDATA[

   Fantastic

   ]]>

   Reply
5. Anonymous says:

   February 2, 2015 at 6:16 am

   < ![CDATA[

   Awesome!!!

   ]]>

   Reply
6. Anonymous says:

   February 2, 2015 at 6:33 am

   < ![CDATA[

   Great..

   
   

   How can i use this?

   ]]>

   Reply
7. Anonymous says:

   February 2, 2015 at 7:29 am

   < ![CDATA[

   Math.floor with two parameters? Can’t find that in any wiki. What does it do?

   ]]>

   Reply
8. Anonymous says:

   February 2, 2015 at 1:33 pm

   < ![CDATA[

   No setup thomas greer​.. Just set this as the position changed event in on a panel.. Those four vertical items are just that.. Items.

   ]]>

   Reply
9. Anonymous says:

   February 2, 2015 at 1:34 pm

   < ![CDATA[

   TrianguloY​, good catch! I’m surprised it didn’t throw an error.. I just removed it

   ]]>

   Reply
10. Anonymous says:

    March 10, 2015 at 10:26 am

    < ![CDATA[

    Works great with opaque colors, but not with (semi)transparent colors. Any idea?

    ]]>

    Reply
11. Anonymous says:

    March 10, 2015 at 4:59 pm

    < ![CDATA[

    I’m going to have to play with it a bit.. I’m thinking clipPath(), but I’ve never used it before

    ]]>

    Reply
12. Anonymous says:

    March 10, 2015 at 5:37 pm

    < ![CDATA[

    Check this

    
    

    http://developer.android.com/reference/android/graphics/PorterDuff.Mode.html

    ]]>

    Reply
13. Anonymous says:

    March 10, 2015 at 5:40 pm

    < ![CDATA[

    That’s way easier than what I was thinking! Thanks TrianguloY​

    
    

    
    

    I was planning on drawing the rectangle for the background with the circle cut out.. Then drawing the circle..

    ]]>

    Reply
14. Anonymous says:

    March 10, 2015 at 8:27 pm

    < ![CDATA[

    TrianguloY Thanks, that works! Just added that one statement before setColor to get it working:

    
    

    
    

    var p = new Paint();

    
    

    p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));

    
    

    p.setColor(hex[(page+1)%hex.length]);

    ]]>

    Reply