Created: 2014-05-19 01:09
Updated: 2015-01-30 17:49

Online Command File to Animation Converter

A Computer Graphics Final Project

By Timotius Sitorus & Kevin Sun

####Demo: To run demo click "Example" and then "Convert"


Our project's goal is to migrate the command list program that we have created into the web through the use of Javascript and HTML5 Canvas

In order to maintain the integrity of this project, we will use vanilla javascript without the use of any external frameworks or packages. We will also stay true to the format of the original command list program as much as we can, such as using triangles, backface-culling, perspectives, etc.


The way the client side will be structures is as follows

	   |					   |
	   |					   |
	   |					   |
	   |					   |
	   |					   |
	   |	  **CANVAS**	   | 
	   |					   |
	   |					   |
	   |					   |

	   	_______________________		 _______
	   |					   |	|Convert| 
	   |					   |	|_______|
	   |					   |
	   |					   |
	   |					   |
	   |	 **TEXT AREA**	   | 
	   |					   |
	   |					   |
	   |					   |

The "command file" will be placed in the text area and then the user will press Convert. The resulting animation will appear in the Canvas.

List of Commands

# Comment

frames first–frame last-frame
vary variable-name beginning-value ending-value start-frame end-frame

screen xleft ybottom xright ytop 
pixels width height 

box-t sx sy sz rx ry rz mx my mz 
sphere-t sx sy sz rx ry rz mx my m

move mx my mz 
scale sx sy sz 
rotate-x rx 
rotate-y ry 
rotate-z rz

save storage-name 
restore storage-name 

render-parallel s
render-perspective-cyclops eyex eyey eyez 
render-perspective-stereo left-eyex left-eyey left-eyez right-eyex 
						right-eyey right-eyez 


color r g b
line x1 y1 x2 y2
circle centerx centery centerz radius

& more will be added

End Result

  • Finished basic graphics animation up to simple wireframe animations
  • Interface allows for uploading command and import files
  • Import command works
  • Added motion controls through phone controls
  • Added option to cotinue animation infinitely
  • added example button to show quick example
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more