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

Focus of this Presentation Project Overview GUI Architecture Demonstrations Erin Rowland3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WebDynamo GUI O3D Worksheet 18Stuart Reed Scene Toolbar Agent

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

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

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

WebDynamo GUI Toolbar 22Stuart Reed Camera Controls

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

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

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

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

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

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

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

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

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

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

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

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

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();... }

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

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();... }

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

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

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

Summary Project Overview GUI Architecture Demonstrations Michael Wally41

42 Questions?