Revolving text using the distort effect

MeirFeinberg
MeirFeinberg Member, Cloudinary Staff Posts: 1
edited September 2022 in Developer APIs

The distort effect changes the shape of an image based on a set of new coordinates representing the relative new position for each of its 4 corners. The rest of the image is then distorted and stretched to smoothly fit the new dimensions.

https://res.cloudinary.com/demo/image/upload/e_distort:10:0:400:90:400:210:10:300/spinning_text_00



So by carefully selecting the new corners, you can distort an image to how it would look from a slightly different perspective. This can easily be done with text images, to create a series of frames, where each image is slightly more distorted than the last. Putting all the frames together in an animated gif gives the illusion of a revolving text:

https://res.cloudinary.com/demo/image/multi/dl_100/spinning_text.gif


For more info, see the docs on the distort effect, and the multi method - which also includes a nice script for autogenerating the images used in the animation above, and the multi method to generate the animated gif.

multi method: https://cloudinary.com/documentation/animated_images#multi_method

distort effect: https://cloudinary.com/documentation/effects_and_artistic_enhancements#distort

Tagged: