Many social web sites now allow to post animated pictures (GIF). Instructable does. Facebook does not (as of now).

In this Instructable, you will learn how to:
  • generate images with math (contour plot type),
  • define colors,
  • generate an animation,
  • let images interact with the user.
  • You will also learn elements of the Processing programming language.
This Instructable is to be viewed from a web browser, as the apps do not handle the animated GIFs.

I hope you will enjoy the examples, get an idea of the endless possibilities, and of course, try it, and share your results!

Step 1: Get and Start the Software

    Visit this link.

    Firefox and Chrome work best.
    Safari does not work well for saving files.
    Internet Explorer needs more testings...

    Find some bug? just PM me!

    You should then see the page as represented in the picture of this step.

    • Formula area: where to write your formula, or paste formulas copied from the next steps.
    • Canvas area: where your image or animation will appear.
    • Save and Export section: offers various ways of saving your work, and will be covered in one of the last steps.
    <p>BEST instructable I've seen in the years I've been lurking! </p>
    <p>And now do it in 3D <br>:D<br>btw, nice work you have!</p>
    <p>Thank you.</p><p>There is a 3D parametric surface modeler called Mayavi: <a href="http://docs.enthought.com/mayavi/mayavi/auto/examples.html" rel="nofollow">http://docs.enthought.com/mayavi/mayavi/auto/examp...</a></p>
    <p>Yay, GIFs!</p>
    <p>Whoa, so cool. Thanks!</p>
    In which language it has written?
    <p>The MathVision.html is an application written by myself in HTML5. It contains HTML tags and Javascript code. A part of that Javascript code is the Processing.js engine (which is itself written in Javascript by the Processing.js team).<br><br>Your user code (aka &quot;formula&quot;) is in the &quot;Processing&quot; syntax (defined by the Processing team, not to be confused with the Processing.js team) which is a relaxed form of Java. It is translated by the Processing.js engine into Javascript, so that your browser can run it.</p>
    <p>Those look awesome, I really like the animated water and the fabric rolls! I took a Processing course through Coursera a few months back, it is a great program to play around with, though my Java programming is limited. Mathvison looks interesting, I should give it a try. </p>
    <p>Another animated water version for you.</p><p>Unlike Processing, MathVision has a very specific scope, but is meant for coffee-beak sized projects...</p>
    <p>Very cool!</p>

    About This Instructable




    Bio: So many things to learn and make, so little time! I like things that are cool, useful, efficient, well crafted. Subscribe to me! If I ... More »
    More by laxap:Stylish Concrete Phone Stands Easy Stylish Concrete Phone Stand Retrofit a LED Ring to a Stereo Microscope 
    Add instructable to: