"Life is too short to make bad art."

Sunday, July 5, 2015

Animation of an insect's wing motion

This is a quick video I put together after doing an animation of a butterfly and a ladybug for the kid's educational application. The reference image of the flying insect had an odd way to animated the wings. 
Rather than flap the wings they were just rotated. A way to animate wings that seems rather common. The deform instead of the rotation is not much hard but the results are a lot nicer in my opinion. 





Here are the animations as gif images to get a better look at them:





I hope you enjoyed this quick video that is off topic but I will finish the complete game art series next and make the assets available 





16 comments:

  1. Another great video. You should write a book about Inkscape. It's impossible to find a good one.

    ReplyDelete
  2. Good video ! Thank you for your job. Your blog it's my "bible" for 2D graph, i never find better. (Please, if you can find some time one day to make some other gothic, darky exemples, always with "your touch" off course, I will be very happy. Thanks and a book is good idea ;)

    ReplyDelete
  3. As always, I am learning a lot from your animation tutorials. A Request.
    I always wanted to learn to make cartoon tornado animation like:
    http://www.google.co.in/imgres?imgurl=http://comps.canstockphoto.com/can-stock-photo_csp15941588.jpg&imgrefurl=http://www.canstockphoto.com/funny-hurricane-15941588.html&h=470&w=357&tbnid=WYKKM-skC2Ay9M:&zoom=1&docid=IlDAMd2DuoSEZM&ei=582gVeXEF479ugSY07bYDw&tbm=isch&ved=0CEAQMygdMB1qFQoTCKXU3-7O0sYCFY6-jgodmKkN-w

    Can you teach. Thanks in advance :)

    ReplyDelete
    Replies
    1. Hi Aseem, definitely possible and doable in inkscape but a little harder. It would involve splitting the tornado shape into smaller rings, stacked up and shaded in a way to make the spinning visible to the viewer. Adding a few elements that are being spun around and a slight swaying motion should do the trick.
      It's been requested before and is still on my todo list.

      Delete
    2. Thank you for keeping it on your ToDo list. Yes, you're right about "splitting the tornado shape into smaller rings, stacked up" and the motion of those rings in that stack would be interesting thing. Again, thanks and I'll remain up to date for that tornado animation.

      Delete
    3. I did a quick test with some simple vector shapes. Is this close enough?

      https://lh3.googleusercontent.com/-tItMemqHjXQ/VaD_yqEcn1I/AAAAAAAAE-M/X3URSqldDfs/s400-Ic42/Concept_tornado.jpg

      Delete
    4. Amazing. yes this is very good. You made perfectly(more realistic) as the image I showed you. But for learning purpose, you can teach easier version also. Actually, I got this idea to request from the game which I was playing some day "Juice cube", and there I saw cute tornado animation. Here is the link:

      https://www.youtube.com/watch?v=VtBVwgkxx9Y

      At time 1:33 you can see the animation on the left top of the game!
      That (milk) shake looks awesome.

      Delete
    5. Hi Chris, any updates on tornado animation tutorial :P

      Delete
    6. Hi Aseem, I am sorry I have been flat out the past week or so. I hope to find time to work on the tile tutorial and the tornado this weekend as the art is sitting there just waiting for me to record.

      Delete
    7. This comment has been removed by the author.

      Delete
  4. You are great and unique I love your site, I always wondered how to do wing animations it didn't occur to me that it's as simple as scale. do you use atlas after that?
    Also thanks for the golden advice "Exagerrate your animation the difference maybe a pixel or less"

    ReplyDelete
    Replies
    1. Thanks, Cayl... I usual hand off a bunch of png images to the coder after. A few use standard atlas tools, others work with engines that have their own atlas tools included and then there is engines reading a sequence of images rather than an atlas file. So I just leave that part to the coders - and rather stick to the fun part. ;)

      Delete
  5. Is it just me or do both of the wings come down on the viewer-side of the fly body? Shouldn't one go in the opposite direction, on the side of the fly body hidden from the viewer? From behind, it would look like this the way it appears now o=, when it seems it should look like -o-

    ReplyDelete
    Replies
    1. The 'back wing' is behind the fly and it should look like -o- from behind. I might not be as clear as I was hoping.

      Delete
  6. Hey Chris,

    I really like your tutorials - I just wanted to let you know, that for animations there are tools that make your life way easier than using plain inkscape.

    By drawin the parts in inkscape, and then work with Spriter (there is a free version) for example, you can do those animations in a fraction of the time, and you have the options to switch out body pieces or even reskin the whole thing in an instant (where as in inkscape you would have to modify every frame).

    ReplyDelete
  7. Thanks, JP. I have been working with Spriter before and am planning on a tutorial for Spriter, Spline and maybe Synfig in the new year.

    ReplyDelete