Dot Matrix Animator
This is a web application for simulating/creating dot matrix animation. To use the this application:
- Download the project from Github.
- Unzip the project onto your user's Site directory.
- Make sure you have mac web server turned on. Check this guide.
- Make sure php is turned on as the application relies on php to convert graphics into svg. Check this guide.
- If you intend to export your animation to svg's, you need to make sure the privileges of your site folder is set to 'Read & Write' for everyone. Do this either by following this guide or use terminal and chmod.
This application is online at http://www.dotmatrixanimator.com/
- Press mouse to toggle a pixel on and off
- Hold Shift and Mouse Over to turn on pixels continuously
- Hold Ctrl and Mouse Over to turn off pixels continuously
- Press + button to add a frame to animation sequence
- Press Animate button to animate frames
- To export animation, go to settings and turn on "export svg when animating". A zip file will be downloaded after svg's are generated.
- index.html - Main access page for the application. Hold all html and markups.
- sample/sample_character.txt - a sample character library. Content can be imported into Character tab.
- sample/sample_animation.txt - a sample alarm clock animation. Content can be important into Animation tab.
- script/char_edit.js - Functions that enable character editing on the Character Tab.
- script/grid-data.js - A grid data represents a matrix on the screen. Implements functions related to creating, copying, and moving a matrix (and pixels). Based on the bit-array.
- script/matrix-edit.js - Funcitons that enable matrix editing on the Animation Tab and animation matrix.
- script/obj-helper.js - Helper functions for the program. Right now includes a deep copy routines for cloning data structures.
- script/pixels.js - Where application starts. Binds all events and initializes jQuery UI.
- script/svg_helper.js - Helper function used to interact with jQuery SVG.
- script/json/ - Dough Crawford's [json] class. Used for serializing and deserializing data structures.
- script/svg/ - jQuery SVG. Used for creating each matrix.
- script/ui/ - jQuery UI. Used skin the screen interface.
- styles/pixels.css - CSS styles for application.
- styles/reset.css - resets all styles to give application a clean slate.
- post_svg.php - php script to convert svg content on the application into svg file. Called when "export svg when animated" is toggled.
- zip_files.php - php script to zip svg files into zip file. Called when "export svg when animated" is toggled.
This project is made possible with the following open source project: