1. The State of WebDynamo: An AgentCubes Web API Scott Keller Erin Rowland Stuart Reed Michael Wally George McCabe dy· na· mo: (n.) A generator 1Erin Rowland

2. 2

3. Focus of this Presentation Project Overview GUI Architecture Demonstrations Erin Rowland3

4. Focus of this Presentation Project Overview ◦ Senior Projects Class ◦ The Problem ◦ Our Solution GUI Architecture Demonstrations Erin Rowland4

5. Senior Projects Class Computer Science Capstone 13 Teams … 61 students Industry Projects Entertainment Projects Educational Projects ◦ Health Care Education using Second-Life  University of Colorado Denver College of Nursing ◦ Science on a Sphere  Craft Technologies Group Erin Rowland5

6. The Problem: AgentCubes Needs Improvement Portability (Multi-Platform) Accessibility Collaboration 6George McCabe

7. The Problem: Portability AgentSheets (2D) is available for Windows and Mac operating systems However, AgentCubes (3D) is currently only available for Mac OS X AgentCubes is currently not available to the public (in development phase) 7George McCabe

8. The Problem: Accessibility AgentSheets and AgentCubes Require User to Download and Install the Software Work done in program restricted to user’s computer 8George McCabe

9. The Problem: Collaboration Projects cannot easily be shared with others without downloads, which restricts inspiration Collaboration on projects requires all participants to use the same machine with the program installed 9George McCabe

10. Solution: Render 3D in a Web Browser API of JavaScript Calls Implement WEUP Behavior and Agents Graphics in O3D WebGL (In Development) an Option Interact with WEUP and the “Dark Tunnel” Compiler Allows Users to Access Worksheet From any Computer With Internet Access 10George McCabe

11. The Solution: Portability Use O3D Graphics API O3D works easily on multiple operating systems O3D works easily on multiple web browsers Allows availability to the public 11George McCabe

12. The Solution: Accessibility Only download required is the O3D Plug-in for the web browser Work done in a worksheet can be accessed from any computer with internet access and the O3D Plug-in 12George McCabe

13. The Solution: Collaboration Sharing projects with other users is easy, since the projects will be stored online in a database Users can easily access other projects and become inspired by them Multiple users can work together on a project from any location with internet access 13George McCabe

14. Solution: (cont’d) Other Components ◦ Web End-User Programming ◦ GUI Allows Users to Create Agents and Define Their Behavior ◦ Creates XML files to Store Agents, Behaviors, and the Scene 14George McCabe

15. Solution: (cont’d) Other Components WebDynamo is an O3D Version of the AgentCubes Worksheet ◦ Tools Allow Interaction With the Scene  Draw and Manipulate Object Instances  Pan and Zoom Camera 15George McCabe

16. Solution: (cont’d) Other Components “Dark Tunnel” Compiler  University of Lugano in Switzerland  Generates JavaScript  Calls API Functions Defined by WebDynamo 16George McCabe

17. Focus of this Presentation Project Overview GUI ◦ Worksheet ◦ Toolbar Architecture Demonstrations Stuart Reed17

18. WebDynamo GUI O3D Worksheet 18Stuart Reed Scene Toolbar Agent

19. AgentCubes Worksheet Tools JavaScript Handlers for Keyboard and Mouse Input Calls Method for Active Tool WebDynamo GUI Toolbar 19Stuart Reed

20. WebDynamo GUI Toolbar 20Stuart Reed Simulation Runtime Controls Stop Run Step

21. WebDynamo GUI Toolbar 21Stuart Reed Agent Controls Select Draw Erase Hand Hammer

22. WebDynamo GUI Toolbar 22Stuart Reed Camera Controls

23. WebDynamo GUI Toolbar 23Stuart Reed Worksheet Controls Refresh Load Save Clear

24. Focus of this Presentation Project Overview GUI Architecture ◦ Conceptual Diagram ◦ Requirements ◦ Model-View-Controller Demonstrations Michael Wally24

25. WebDynamo Conceptual Diagram XML Definitions API GUIGUI GUIGUI O3D VAT XML Rules Compiler University of Lugano Compiler University of Lugano WEUP GUI OPEN JavaScript Web Dynamo 25Michael Wally

26. Compiler, University of Lugano Calls WebDynamo JavaScript API Parses XML Behavior files Compiler University of Lugano Compiler University of Lugano 26Michael Wally

27. WEUP GUI Write XML File Attributes for Project Communicate With WebDynamo Input WEUP GUI 27Michael Wally

28. WebDynamo API and GUI written in JavaScript API Methods Designed to Handle External Commands GUI Rendered Using Google’s O3D to Imitate AgentCubes. API GUIGUI GUIGUI O3D Web Dynamo 28Michael Wally

29. Environmental Requirements Software / Development Environment ◦ Supported Browsers:  Chrome, Firefox 3, Safari 4, IE 8 ◦ Supported Operating Systems:  Windows XP, Mac OS X, Linux ◦ Implement API in JavaScript and O3D 29Michael Wally

30. Environmental Requirements Hardware Environment ◦ Windows:  x86 CPU, DX9-compatible GPU with VS 2.0 and PS 2.0 support ◦ Mac:  Any Intel Mac (Unsupported GPUs Will Use SW rederer) 30Michael Wally

31. Functional Requirements Read/Write XML ◦ Keep Track of Object Attributes API functions ◦ Condition and Action Events O3D Scene Rendering Worksheet GUI ◦ Manipulate Agents ◦ Save and Load Simulations 31Michael Wally

32. Architecture Simulation Functions Editing and Camera Tools Controller View (Worksheet) Model User Input WebDynamo JavaScript Functions Parse and Return XML Data O3D JS Object State Calls JS API Functions WEUP Stores XML Object Attributes 32Scott Keller

33. Architecture Simulation Functions Editing and Camera Tools Controller WebDynamo JavaScript Functions Parse and Return XML Data Calls JS API Functions WEUP Stores XML Object Attributes Controller ◦ WebDynamo JavaScript Handlers  Editing and Camera Tools  Simulation Functions (Stop, Run, Step) ◦ Parse and Return XML Data  WEUP and API Method Calls 33Scott Keller

34. Architecture Controller Model Object State Model ◦ Maintain Agent Attributes ◦ Class Definitions  Agent, Method, Rule 34Scott Keller

35. Architecture Agent Class ◦ Variables  Depiction (Array), Coordinates, Methods (Array) ◦ Methods  addDepiction, getDepiction, addAMethod, testMethod 35Scott Keller class Agent { String name; int x,y,z; int transform; depiction = [depic1, depic2,...]; methods = [whileRunning, doStuff,...]; addDepiction(depic); getDepiction(); addMethod(); checkMethods();... }

36. Architecture Method Class ◦ Variables  Rules (Array), condState (Array) ◦ Methods  testMethod 36Scott Keller class Method { rules = [rule1,rule2,...]; addRule(); getRule(); checkRules();... }

37. Architecture Rule Class ◦ Variables  Conditions (Array), Actions (Array) ◦ Methods  Implement, testConditions, implementActions 37Scott Keller class Rule { conditions = [cond1,cond2,...]; actions = [action1,action2,...]; addCondition(); addAction(); check(); testConditions(); doActions();... }

38. 38Scott Keller class Rule function see(direct,agent) { var i=this.x; var j=this.y; var k=this.z; switch(direct) { //i+1;j+1 case 1: if(myBoard[i+1][j+1][k+1].pic == agent.pic) return true; break; case 2: if(myBoard[i+1][j+1][k].pic == agent.pic) return true; break; case 3: if(myBoard[i+1][j+1][k-1].pic == agent.pic) return true; break;... default: } return false; } function move(direct) { var i=this.x; var j=this.y; var k=this.z; switch(direct) { case 1: if(myBoard[i+1][j+1][k+1] == 0) myBoard[i+1][j+1][k+1] = this; myBoard[i][j][k] = 0; g_transforms[this.transform].translate(1,1,1); return true; break; case 2: if(myBoard[i+1][j+1][k] == 0) myBoard[i+1][j+1][k] = this; myBoard[i][j][k] = 0; g_transforms[this.transform].translate(1,1,0); return true; break;... } return false; } class Agentclass Method

39. Architecture Controller View (Worksheet) User Input O3D JS View ◦ WebDynamo Worksheet  Input (Toolbar and Scene)  Output (O3D JavaScript) 39Scott Keller

40. Focus of this Presentation Project Overview GUI Architecture Demonstrations ◦ GUI ◦ Methods Stuart Reed40

41. Summary Project Overview GUI Architecture Demonstrations Michael Wally41

42. 42 Questions?