UCLA UCLA Electronic Theses and Dissertations Title An Online Collaborative Ecosystem for Educational Computer Graphics Permalink https://escholarship.org/uc/item/1h68m5hg Author Ridge, Garett Douglas Publication Date 2018 Peer reviewed|Thesis/dissertation eScholarship.org Powered by the California Digital Library University of California UNIVERSITY OF CALIFORNIA Los Angeles An Online Collaborative Ecosystem for Educational Computer Graphics A dissertation submitted in partial satisfaction of the requirements for the degree Doctor of Philosophy in Computer Science by Garett Douglas Ridge 2018 c Copyright by Garett Douglas Ridge 2018 ABSTRACT OF THE DISSERTATION An Online Collaborative Ecosystem for Educational Computer Graphics by Garett Douglas Ridge Doctor of Philosophy in Computer Science University of California, Los Angeles, 2018 Professor Demetri Terzopoulos, Chair This thesis builds upon existing introductory courses in the field of Computer Graphics, aiming to lower the excessive barrier of entry to graphics programming. We introduce tiny- graphics.js, a new software library for implementing educational WebGL projects in the classroom. To mitigate the difficulty of creating graphics-enabled websites and online games, we furthermore introduce the Encyclopedia of Code|a world wide web framework that encourages visitors to learn graphics, build educational graphical demos and articles, host them online, and organize them by topic. We provide our own examples that include custom educational games and tutorial articles, which are already being successfully employed to ease our undergraduate graphics students into the course material. Some of our modules expose students to new graphics techniques, while others are prototypes for new modes of online learning, collaboration, and computing. These include our \Active Textbooks" (educational 3D demos or games embedded in literate-programming-like articles). We introduce \Smart Articles," which divide crowdsourced programming tasks into distributed processes that can be tracked at separate URLs. Beyond education and graphics, our work advances the study of human-computer interaction, user interfaces, and computer-supported cooperative work. We present the results of a case study in using tiny-graphics.js and our online resources in a real-world UCLA undergraduate course, along with our results when attempting to recreate topic-based examples from an existing graphics textbook using our library. ii The dissertation of Garett Douglas Ridge is approved. Douglas S. Parker Joseph M. Teran Song-Chun Zhu Demetri Terzopoulos, Committee Chair University of California, Los Angeles 2018 iii TABLE OF CONTENTS 1 Introduction :::::::::::::::::::::::::::::::::::::: 1 1.1 Contributions of the Thesis...........................2 1.2 Dissertation Outline...............................5 2 The tiny-graphics.js Software Library ::::::::::::::::::::: 7 2.1 Motivation and Background...........................7 2.1.1 Graphics Libraries in Education.....................9 2.2 Design and Benefits of the tiny-graphics.js Software Library......... 10 2.2.1 Description of tiny-graphics.js...................... 10 2.2.2 Improvements Over Existing Graphics Tutorial Software....... 12 2.2.3 Details of tiny-graphics.js........................ 21 2.2.4 Using tiny-graphics.js........................... 25 3 The Encyclopedia of Code ::::::::::::::::::::::::::::: 28 3.1 Motivation and Background........................... 28 3.1.1 Online Courses.............................. 29 3.1.2 Literate Programming.......................... 31 3.2 Design and Benefits of the Encyclopedia of Code................ 33 3.2.1 Organization of the Online Resources.................. 33 3.2.2 Featured Noteworthy Articles...................... 41 3.2.3 More Summaries of Current Articles.................. 61 4 Results ::::::::::::::::::::::::::::::::::::::::: 87 4.1 Comparison to Angel's Online Examples.................... 87 iv 4.1.1 Angel's \gasket1" Demo......................... 88 4.1.2 Angel's \cube" (Trackball) Demo.................... 90 4.1.3 Angel's \perspective1" Demo...................... 91 4.1.4 Angel's \shadedSphere" Demos..................... 92 4.1.5 Angel's \hat" Demo........................... 92 4.1.6 Angel's \particleSystem" Demo..................... 93 4.1.7 Angel's \teapot5" Demo......................... 95 4.1.8 Angel's “reflectionMap2” Demo..................... 95 4.1.9 Angel's “figure” and \robotArm" Demos................ 96 4.2 Case Study: A Graphics Course Before and After tiny-graphics.js.................................. 98 4.2.1 Study Limitations............................. 102 5 Comparison to Related Work ::::::::::::::::::::::::::: 103 5.1 Wikipedia..................................... 105 5.2 Education in Computer Science and Math................... 108 5.2.1 Literate Programming.......................... 108 5.2.2 Project Jupyter.............................. 108 5.2.3 Educational Web Demos and Visualizations.............. 109 5.3 Collaborative Software Hosting and the Body of Open Source Software... 111 5.3.1 GitHub.................................. 112 5.4 Similar Efforts Around the Web......................... 113 5.4.1 d.mix................................... 113 5.4.2 Glitch................................... 113 5.4.3 p5.js.................................... 115 v 5.4.4 Dwitter.................................. 116 5.4.5 ShaderToy................................. 116 5.5 Frameworks Building on WebGL........................ 118 5.5.1 three.js................................... 118 5.5.2 BabylonJS................................. 119 5.5.3 More Modular than Other Frameworks................. 122 5.5.4 Other Tiny Graphics Libraries Around the Web............ 123 5.6 Industrial Tools for Graphical Effects...................... 124 5.7 Digital Game-Based Learning.......................... 125 5.7.1 WebGL and Game Engines....................... 127 6 Conclusion ::::::::::::::::::::::::::::::::::::::: 128 6.1 Summary..................................... 128 6.2 Future Work.................................... 129 References ::::::::::::::::::::::::::::::::::::::::: 131 vi LIST OF FIGURES 1.1 Student Project Submissions using our tiny-graphics.js..............4 2.1 The axis arrows compound shape, defined in only 17 lines of JavaScript..... 20 2.2 The automatic flat shading procedure for our class Shape............. 21 2.3 A code editor widget made of the Code Manager class.............. 22 2.4 The flow of a graphics program into multiple shaders............... 24 3.1 Appearance of the Encyclopedia of Code Website................. 34 3.2 flow of information when a Smart Article is read by another article....... 40 3.3 The colorful buttons control the bases game.................... 42 3.4 The main illustration panel of the Dot Products article.............. 44 3.5 The movement controls................................ 47 3.6 A perspective frustum and normalized device coordinates............. 49 3.7 The Frustum Tool shown drawing a view volume................. 49 3.8 The article shows a ray tracer employing multiple subtypes of Frustum Tool.. 55 3.9 The ray tracer shown up close (from its own view volume's perspective)..... 56 3.10 The Billiards demo.................................. 57 3.11 Visual Billiards, showing colored rays to guide the player............. 58 3.12 The top of the Minimal WebGL Program article.................. 62 3.13 The Transforms Sandbox............................... 63 3.14 The second level of the bases game......................... 64 3.15 The modified controls of the second Bases Game level, using functions of time.. 64 3.16 The Tutorial Animation demo............................ 66 3.17 The surfaces demo................................... 67 vii 3.18 Close-up shots from surfaces demo......................... 68 3.19 Two curve arrays are blended together into a surface patch............ 69 3.20 The Star demo..................................... 71 3.21 The Many Lights Demo................................ 72 3.22 The Inertia Demo................................... 74 3.23 A number of moving rigid objects in the Collision Demo............. 74 3.24 Our trivial collision method............................. 75 3.25 A falling string in the Springs Demo......................... 76 3.26 Two teapots imported from text files by the Mesh Loader Demo......... 77 3.27 The Text Demo.................................... 79 3.28 The Scene Graph Tool................................ 80 3.29 The Scene Graph Tool (Continued)......................... 81 3.30 The Scene Graph Tool (Continued)......................... 82 3.31 Changing the scale matrix of the root node of the Scene Graph Tool...... 83 3.32 Our Scene Graph Tool being used as a Secondary Scene Component....... 83 3.33 The Half Edge Demo................................. 85 4.1 Angel's \gasket1" demo................................ 88 4.2 Angel's \cube" (trackball) demo........................... 89 4.3 Angel's \perspective1" demo............................. 91 4.4 Angel's \shadedSphere" demos............................ 92 4.5 Angel's \hat" demo.................................. 93 4.6 Angel's \particleSystem" demo............................ 94 4.7 Angel's \teapot5" demo................................ 95 4.8 Angel's “reflectionMap2” demo............................ 96 viii 4.9 Our Scene Graph Demo article........................... 97 4.10 Animation projects selected from CS 174A: Introduction to Computer Graphics 99 ix LIST OF TABLES 4.1 Length of code