1
edit
Changes
no edit summary
The basis of the Canvas tag is to provide immediate drawing to the screen. The drawing can consist of regular 2D pixel manipulations as well as a proposed 3D model manipulation. In addition, it will provide a safe and simple application programming interface (API) to the OpenGL Layer. The OpenGL Layer is a library that handles the math required for 3D transformations. Unfortunately, OpenGL has the power to talk directly to the hardware therefore allowing direct manipulation of the hardware or possibly potential damage. Consequently, the OpenGL Layer will not be included in this project due to its complex nature and constant upkeep. In addition, the OpenGL API is extremely low-level and may be confusing when exposed to the internet. <br/> <br/>
However, the first step in creating a 2D/3D Canvas element is to use a custom XML tag to specify the 2D/3D objects on the screen as well as the drawing area available. In this case, the developer will be able to create 2D and 3D objects on the client's screen as well as provide logic to modify these objects in real-time. By using the Document Object Model (DOM) to interpret the XML language and retrieve the attributes of the objects, this causes the objects to be presented for modification purposes.
== The Document Object Model ==
== Use of XML 2D/3D ==
The Canvas project consists of several iteration focusing primarily on the implementation of HTML that allow access to the 2D drawing functionality. Eventually, the functionality will extent into the 3D world once the canvas API supports it. These 3D Tags will be based upon the syntax of its counterpart, the 2D Canvas tags. Essentially, the syntax for the 2D tags will be similar to the following:<br/>
<pre>
<canvas>
-- draw a square on the screen
<rectangle width="4" height="10"/>
</canvas>
</pre>
The Canvas Tags are already handled by the browser syntax of these tags will be intuitive and therefore do not need flexible enough to be implementedalong side regular HTML code. Rather, The initial iterations will focus only on the implementation of the 2D tags that which will create tie into the 3D objects existing 2D drawing code. This will be added essentially allow a developer to use the current Canvas Framework to enable the creation capabilities without writing large amounts of 3D objects in memorycomplex JavaScript code. For example, the <cube /> tag will create a 3D cube in memory. The Attributes associated with it, such as positionIn addition to tags that allow simple drawing, orientation and size are all modifiers that there will be exposed within JavaScript. Each tag that is used inside the Canvas Tag will have similar properties group modifier tags that will also be available for modification in able to change a series of tags at the JavaScript Codesame time. <br /><br /> Within a 3D worldFor example, grouping a programmer can add numerous transformations sequentially in order to place an object in a given placebunch of lines together would allow for group modifications rather then modifying each line separately. It will provide a larger flexibility aspect to the markup language:<br/>
<pre>
<canvas>
-- either with an explicit 2D matrix <transform position="m1..m16m9"> <cube sizeline startposition="5, 10" endposition="40, 70"/> </transform> -- or with position and/or orientation <transform positionline startposition="x y z15, 30" orientationendposition="a b c d50, 40"/> <cube sizeline startposition="25, 60" endposition="560, 10"/>
</transform>
</canvas>
</pre>
== Use of XML 2D/3D in JavaScript ==
In order to draw the objects onto the screen, JavaScript will be used to call functions inside the core of Firefox. The API will be written to allow programmers to not only access the various attributes of the Objects objects but also write drawing logicto mitigate complexity. The webpage will initiate a call to a our JavaScript function functions, that will start the drawing/manipulation code. This part of the project is being handled by Vlad Vukicevic from Mozilladrawingcode.
== Tag Reference ==
This is a list of Tags that will be Written as of Feb 1, 2007. This is a tentative List and will change in time:
* 2D Tags
**[[Canvas_3D_-_Line_Tag|<line>]](Being Worked On...)**[[Canvas_3D_-_Arc_Tag|<arc>]](Completed)**[[Canvas_3D_-_Circle_Tag|<circle>]](Completed)**[[Canvas_3D_-_Rectangle_Tag|<rectangle>]](Completed)**[[Canvas_3D_-_Image_Tag|<image>]](Being Worked On...)
* 3D Tags:
** [[Canvas_3D_-_Cube_Tag|<cube />]](Incomplete, Lacking 3D Backend...)** [[Canvas_3D_-_Sphere_Tag|<sphere />]](Incomplete, Lacking 3D Backend...)** [[Canvas_3D_-_Quad_Tag|<quad />]](Incomplete, Lacking 3D Backend...)** [[Canvas_3D_-_Light_Tag|<light />]](Incomplete, Lacking 3D Backend...)** [[Canvas_3D_-_Texture_Tag|<texture />]](Incomplete, Lacking 3D Backend...)** [[Canvas_3D_-_Mesh_Tag|<mesh />]](Incomplete, Lacking 3D Backend...)
* Group Modifier Tags (2D & 3D):
** [[Canvas_3D_-_Transform_Tags|<transform>]](Incomplete, Scheduled for Iteration 4)** [[Canvas_3D_-_Scale_Tags|<scale>]](Incomplete, Scheduled for Iteration 4)** [[Canvas_3D_-_Rotate_Tags|<rotate>]](Incomplete, Scheduled for Iteration 4)
= Iterations & Progress =
Link to The Test Page is [http://matrixzenit.senecac.on.ca/~mcparuzebts630_071g07/canvas/CanvasUnitTest.xhtml available here.]
== Completed Iterations ==
*** Create <Rotate> Tag
*** Write Test for the Rotate Tag
** Translate Transform Tag
*** Create <Translate> Tag
*** Write Test for Translate Tag
** Update Wiki Site to reflect Above Changes
== Possible Ideas For Future Iterations ==
* <b>Iteration 5?: Extending 2D Functionality to Join 2D Primitives</b>** Create <Pathpath> Grouping Tagto create line Joins** Write a test Create <curve> Tag for the above taskdifferent types of curves
** Update Wiki Site to reflect Above Changes
