Instructables

Play with Math: Make Animated GIF and HTML5

FeaturedContest Winner
Picture of Play with Math: Make Animated GIF and HTML5
water.gif
nautilus.gif
flowers.gif
flaming-grid.gif
fabric.png
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!

 
Remove these adsRemove these ads by Signing Up

Step 1: Get and Start the Software

Picture of 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.
HoldOnTight3 months ago

BEST instructable I've seen in the years I've been lurking!

ivver4 months ago

And now do it in 3D
:D
btw, nice work you have!

laxap (author)  ivver4 months ago

Thank you.

There is a 3D parametric surface modeler called Mayavi: http://docs.enthought.com/mayavi/mayavi/auto/examp...

mikeasaurus4 months ago

Yay, GIFs!

laxap (author)  mikeasaurus4 months ago

http://www.openprocessing.org/sketch/139458

discs.gif
mikeasaurus laxap4 months ago

Whoa, so cool. Thanks!

bsingh214 months ago
In which language it has written?
laxap (author)  bsingh214 months ago

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).

Your user code (aka "formula") is in the "Processing" 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.

ChrysN4 months ago

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.

laxap (author)  ChrysN4 months ago

Another animated water version for you.

Unlike Processing, MathVision has a very specific scope, but is meant for coffee-beak sized projects...

water-2.gif

Very cool!

laxap (author)  Danger is my middle name4 months ago

http://www.openprocessing.org/sketch/139467

flower.gif