• Home
  • News
  • Tutorials
  • Analysis
  • About
  • Contact

TechEnablement

Education, Planning, Analysis, Code

  • CUDA
    • News
    • Tutorials
    • CUDA Study Guide
  • OpenACC
    • News
    • Tutorials
    • OpenACC Study Guide
  • Xeon Phi
    • News
    • Tutorials
    • Intel Xeon Phi Study Guide
  • OpenCL
    • News
    • Tutorials
    • OpenCL Study Guide
  • Web/Cloud
    • News
    • Tutorials
You are here: Home / News / Amazing Animated Images with Autodesk Draco and Kitty – Yes Even For WordPress!

Amazing Animated Images with Autodesk Draco and Kitty – Yes Even For WordPress!

August 11, 2014 by Rob Farber Leave a Comment

Way cool for illustrations! Add animated images as an image to your website or WordPress blog. The following “images” were just copied and pasted into this WordPress post. No other work required! Draco was pioneered by Rubaiat Habib, Fanny Chevalier, Tovi Grossman, Shengdong Zhao  and George Fitzmaurice as means to revolutionize the way illustrators and animators work through “kinetic textures“. By any standard it looks fantastic and the ease for web animation is exceptional – as simple as  highlight image, cntl-c, mouse move, cntl-v. Note: testing shows that some mobile devices have a few challenges with the large size and complexity of the animated gifs produced by Draco and Kitty even on fast networks. Looking ahead, surface labeled pixel techniques might extend these tools to 3D. (Also, check out TechEnablement to see how easy it is to add responsive design WebGL to a WordPress post.)

First an old-fashioned video

Read the Draco paper.

 

ezgif-save

Sign up!

Project Draco aims to bring the power of intricate animation effects and interactive graphics to the creative hands of all artists. It is a functional research prototype at this moment. For up-to-date information, research outcomes and project announcements, please sign up this form.

Kitty is part of the Draco project to create dynamic (interactive, animated and responsive) illustrations with a fluid sketch-based interface.

What better way to illustrate Kitty than with Kitty. (The following is copied from the Autodesk kitty page )

Design

To specify the interactive behavior of entities, Kitty relies on an underlying relational graph structure, where nodes correspond to the entities and edges represent the functional correspondence between the entities’ parameters. Kitty displays this graph in the context of the illustration, and authors can specify edges and their associated functions through freeform sketching. This enables an intuitive interaction, without requiring any programming or scripting.

Sketching a path between the source object node (the egg) and the target emitting texture node (soup splash), creates a relation between the two visual entities. Upon creation, the relation control widget (radial menus and mapping function widget) are made visible. The artist selects the parameters for the relation, then directly sketches the mapping function. The splash then occurs only when the egg hits the surface. The cat is drawn in likeliness of Simon’t Cat, used with permission.

 

An animated infographic illustrating the weather of a cold windy week in Toronto. The relational functions are generated from an underlying weather data file.

 

 

Share this:

  • Twitter

Filed Under: Featured article, Featured news, News, News, Web/Cloud

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tell us you were here

Recent Posts

Farewell to a Familiar HPC Friend

May 27, 2020 By Rob Farber Leave a Comment

TechEnablement Blog Sunset or Sunrise?

February 12, 2020 By admin Leave a Comment

The cornerstone is laid – NVIDIA acquires ARM

September 13, 2020 By Rob Farber Leave a Comment

Third-Party Use Cases Illustrate the Success of CPU-based Visualization

April 14, 2018 By admin Leave a Comment

More Tutorials

Learn how to program IBM’s ‘Deep-Learning’ SyNAPSE chip

February 5, 2016 By Rob Farber Leave a Comment

Free Intermediate-Level Deep-Learning Course by Google

January 27, 2016 By Rob Farber Leave a Comment

Intel tutorial shows how to view OpenCL assembly code

January 25, 2016 By Rob Farber Leave a Comment

More Posts from this Category

Top Posts & Pages

  • Amazing Animated Images with Autodesk Draco and Kitty - Yes Even For WordPress!
  • Depth-Categorizing GPU-Accelerated Deep Neural Networks Perform Fast Semantic Segmentation of RGB-D Scenes
  • Rumor - US Bans Intel Xeon Phi Sales in China
  • Contact
  • Part 1: OpenCLâ„¢ – Portable Parallelism

Archives

© 2026 · techenablement.com