David Botta: Computer Graphics Portfolio
Interactivity, Computer Graphics, Web Technology

Curriculum Vitae (PDF)

Launch into CAD and Interactivity

Fly Canon (my 1989 MFA exhibition work) is an edition of three identical sculptures, which launched my work into the intersection between communication design and technology. The concept draws upon the De Stijl group, British post WWII Systems art, modernist architecture, and post-structuralist philosophy. A pair of translucent tretraflexagons are held in a steel armature, and fold from one permutation to another as the armature is rotated on its base. All the flexagons are identical, while those in a pair are at opposed ends of their respective lines of permutations. The Miro-like drawing is cohesive over the pair, in all its permutations, from both sides (the whole thing being translucent). The drawing is also cohesive over all the permutations, because they are connected by a visual metaphor of minimal narrative. The design of the drawing required AutoCAD, and took about 300 hours to execute.


Animation

The 3D animation Shooting Star began as a real life sculpture. It was executed via Wavefront at DigiPen Computer Graphics, around 1991. The gears actually adhere to gear geometry. The reflections break down at certain angles, and the deeper reflections get more white rather than more to the material's colour. The image style is inspired by Morandi.


From DigiPen Inc. to UBC's MAGIC, I assisted Ron Lane-Smith to visualize the design principles of the Taj Mahal of Agra (not shown, yet), which include flat geometric patterns that are generated by means of aligning the perspective view of background, middle ground and foreground in the eye of the beholder. In the series of animations here called Jin (after the model, videoed by Theo Goldberg), I draw from Gilles Deleuze's indication of the importance of the face and the transition in film, and use alignment-based animations to transition from the face to white or black.


The 1994 animation called '4D' is of a man walking around a contorting 3D shadow a 4D knotted sphere rotating in a fourth dimension. The contorting 3D object itself casts a 2D shadow. The contorting 3D object was a DXF file exported frame by frame from Rob Scharein's KnotPlot, and imported frame by frame into Alias - after each rendering, a script would take the new DXF of same name and replace it in the Alias scene description file. The man's animation curves, and geometry, came from the LifeForms choreography software, and were imported into Alias. I could fake up some rationalization for this, but we were really just having fun. Rob and I still plan to animate impossible things.


Under the auspices of MAGIC, Lifeng Wang and I started Xing Xing Computer Graphics to visualize a famous destroyed Chinese imperial garden called Yuan Ming Yuan. Our efforts were reported internationally, because of its cultural significance. In 3D computer graphics, we constructed an interactive visualization of one of the 140 sub-gardens, called Lian Xi Le Chu. (Each of the sub-gardens was a palace-filled world onto itself.) By 1998, we produced a CDROM game called Lotus Spring: A romantic journey in history's fabulous lost garden. Here are excerpts from its animations. (Also, to see a collection of still images, click this link: Images from the Lotus Spring Project.)


In 2010, while teaching computer graphics, design, and drawing at the Grande Prairie Regional College, I constructed this brief animation in order to talk to students about issues of combining animation graphics with live footage.


Interactivity

Chinese chess is more adaptable for the projective plane (a surface that cannot be constructed in 3D) than Western chess. The real life 1985 chessboard was reworked in 2000, in Director, at DNA Multimedia, and is being reworked again for HTML5. It may be transposed into Objective C to become an iPad app.


The Web

At DNA Multimedia, toward developing a website for the Centre A gallery ("A" for Asia, and the site was never implemented), I studied numerous Asian websites, especially Indian, and considered international access to American based servers. Asians, especially Indians, generally love color (this was said in an Indian forum about national identity and art). In response, I developed what is now a part of my UBC home page. The letters of my name display a different array of harmonious colors every time the mouse enters or exits an item on the page. The process was intended as light-weight, to be delivered instantly across the globe, and driven by random numbers, so the potential variety is infinite.


Information Architecture

In 2005, I participated in the Learning Object for Design research project, with participants from SFU and Recombo Inc. I helped derive and implement an information architecture, and examples of it, to satisfy the needs of design pedagogy and web delivery (either through SCORM compliant learning management systems (LMSs), or as plain websites). The participants comprised a focus group who met weekly for a couple of months to settle on a conceptual structure. Then eighteen example LODs were constructed for BC Campus (a collaborative online learning agency).

My main contributions were (1) metadata strategy, metadata structure, and metadata content; (2) reconstruction of the HTML files for accessibility (e.g., changing Tables to Divs); and (3) assembly of all eighteen LODs. As illustrated in figure LOD Structure, The LOD contains a folder that can be copied and pasted into a website without having to duplicate the metadata or other resources. If delivery through an LMS is desired, the folders and files below the super folder are selected and zipped. The zip file is then uploaded to the LMS, which uses the imsmanifest.xml file to discover the resources.

LOD Structure
Figure: LOD Structure

To examine an LOD template, see the folder on this CD (or server) called LOD-template. Also a zipped copy of it is available through this link: LOD-template.zip (not identical with the other zip with same name inside the LOD-template folder). Similarly, for an example of LOD content (what can be delivered directly as a website), see the folder called LOD_Precision_Snap, or a zip of it: LOD_Precision_Snap.zip. To view the example content in a browser, click this link: LOD_Precision_Snap/index.html.

Unexpected Use of Web Technology

The web technologies of XHTML and Scalable Vector Graphics (SVG) became useful to me for my PhD research, but not because of their web aspect. Both entail readable text-based source code. The XHTML is ensured to close every tag that it opens, and to nest them cleanly (no overlapping). Plus a browser will show one hugely long page, and search forward or back through the long page with minimal dialog (at least FireFox will). I was able to color code transcripts in Open Office, and export the file as one big XHTML page. The well-formed XHTML enabled me to analyze the page with confidence, using a script in the interpreted language Ruby. I was able to automatically derive spreadsheets from the analysis, and further: automatically build (1) SVG graphics of discourse analysis, (2) SVG graphics showing quantification of the analysis, and (3) Latex that was copied and pasted into my Latex-based PhD manuscript. The SVG was easily transformed into vector-based PDF images, which were easily included in the manuscript while retaining their vector aspect, thereby being crystal clear at any resolution.

From XHTML to SVG

Drawing to Digital Print

While teaching design, computer graphics, and drawing at the Grande Prairie Regional College during the academic year of 2009-2010, I began life drawing the human figure again. This time, though, I used the drawings as a starting point for prints, developed by means of Photoshop and Illustrator, and printed using high-end photo printers.

Drawing to print via Photoshop and Illustrator
Drawing to print via Photoshop and Illustrator.