Piston Mechanism Animation

Wed, 5 Oct 2011

The piston mechanism is used to convert between rotary motion and reciprocating motion, it works either way. Driving the wheel will move the piston back and forth, in this form the piston can be used to pump liquids for example creating the high pressure need in a good coffee machine.

Alternatively the piston can be driven back and forth commonly by steam (in a steam engine) or flame (in a petrol engine). In this form the piston is used to convert reciprocating motion into more useful and usable rotary motion.

Notice how the speed of the piston changes. The piston starts from one end, and increases its speed. It reaches maximum speed in the middle of its travel then gradually slows down until it reaches the end of its travel.

You can download and make your own working piston mechanism here and find out how it works first hand.

I created this animation using Adobe Edge. Edge is a new tool for creating HTML 5 animations – much more standards compliant than Flash. It is currently a free download from Adobe Labs

I have put the animation up without a Flash alternative to see how it goes. I’d be grateful to hear feedback about if it works for you. If possible please could you also let me know your operating system and browser.


(Just to be clear, there should be an animation showing a piston working just above the picture of the crank mechanism project)

  To receive new blog posts by email

Comments (7)

  • umehta October 5, 2011 at 12:21 pm

    It looks perfect in Mozilla

    It looks perfect in Mozilla Firefox 6.0.2, Window XP version 5.1.

    • Sergenth October 5, 2011 at 1:23 pm

      Works with a really smooth

      Works with a really smooth frame rate with Chrome 14.0.835.186 m browser on Windows Vista 64 bit

  • phil October 5, 2011 at 1:53 pm

    just seeing the frame and the

    just seeing the frame and the title but no animation in android standard browser

  • Smelter October 5, 2011 at 2:18 pm

    Sorry Rob, text only no

    Sorry Rob, text only no animation/graphics.
    IE8 WinXP Pro 32bit.

  • michael42er October 5, 2011 at 2:48 pm

    I can well see gif animation.

    I can well see gif animation. Have Window Vista 32 bit, browsers: Firefox. My free software for the production of animations is: "AniMake 3.6"

    I have one more question: I cannot do own gif animations on the comment-page uploaden



    • robives October 5, 2011 at 4:55 pm

      Looks like the tech isn’t

      Looks like the tech isn't ready yet… The animation doesn't work on my iPhone either.

      @michael42er, you should be able to upload gifs to the comments now

      • Phil October 12, 2011 at 12:07 pm

        heads up, Rob!
        on my mac os

        heads up, Rob!

        on my mac os 10.5 firefox 7.01 it works fine and it looks a lot smoother than the other version. so keep an eye on the tech. when you can use it itll be awesome. 😉

Comments are closed.