View
2
Download
0
Category
Preview:
Citation preview
Agents, Stories & HacksDaAaB/SerenDPT Tech Chat: November 2017
Back to the Future• Or: Fabio, It’s All Your Fault! (Steve & Me Too : )
3D Too
Graph Structure
Data Driven
open ~/src/netlogo/Venice/Venice.nlogohttp://backspaces.net/wiki/NetLogo_Bag_of_Tricks#NetLogo_GIS
Skunks, what do they do?
• Can we do it? How?
• Fail early and often!
• Try it:
• Modeling (Third time!)
• Stories (Write about pros, cons, failures)
• Dives & Hacks (Do it!)
Outline:
• Modeling
• AgentScript tutorial & Demos
• Hello World
• Stories (medium.com)
• 2 Headed Classes, ES6 Migration, Wrapping Libs
• Dives & Hacks
• Miscellaneous innovations.
AgentsAgentScript & Agent Oriented Programming 101
A New Way of Thinking
Models• Modeling: Space, Time, Interaction
• Space: A 2D/3D World where Agents live
• Time: The system evolves, taking steps
• Interaction: Patches, Turtles, Links interact
Link
AgentSets
• Agent = Object in an AgentSet
• AgentSet = Array which creates its Objects
• BaseSets: Patches, Turtles, Links
• Breeds: SubArrays of BaseSets
Three Basic AgentSets
• Patches
• The fixed “World” grid (Patches don’t move)
• A Patch knows its Neighbors and its Turtles
• Turtles
• A Turtle moves
• Knows it’s current Patch and Links
• Uses Patches for spatial search: turtles.inRadius(4)
• Links
• Connects two Turtles
Patches
Turtles
Links
Model with all three
Patch Neighbors
• Each Patch knows its neighbors
• Two kinds: 8 (Moore) & 4 (Von Neumann)
Geometry
• Patches: patches “inRect” & “inRadius”
Cones Too
Turtles Too• Turtles know their Patch
• Patches know their Turtles … so:
• turtles.inRect, turtles.inRadius, turtles.inCone
• More: towards, rotate, patchAhead, distance
• Geometry is Key to Modeling (boids)
Example Model Types
• Patches (& Breeds: fires embers)
• Patches and Turtles (& exits inside wall)
• Patches, Turtles and Links (& nodes drivers)
AgentSets: Create their Agents
Turtles
Turtles.create(6, (t) => { t.size = 4 t.color = ‘red’})
NOTE: Agents never directly created by modeler!
sizecolor
sizecolor
sizecolor
sizecolor
sizecolor
sizecolor
AgentSet - Agent Pairs
• Patches create Patch objects
• Turtles create Turtle objects
• Links create Link objects
Breeds: Sub-AgentSets
• Patches: Land, Lakes
• Turtles: Nodes, Drivers
• Links: Spokes, Rims
PatchesLand
Lakes
Model: Puts it all together.
• Creates Patches, Turtles, Links sets
• Animator: step() & draw(), FPS, ticks.
• setup(), start(), stop(), reset()
• MyModel subclasses Model
Hello.js
Hello.js: setup()
Hello.js: step()
No <script> Tags!
Develop Incrementally
• Create setup(), step() one part at a time
• Put in debugging help
• Use “console”
• Write & Run!
• Experiment.
Play!• Download backspaces.net/temp/hello.html
• Modify it, use console to inspect.
• Change patch under turtles to be turtle.color.
http://backspaces.net/temp/hello1.html
Medium is Different
• Don’t do Tech, just Write.
• Do tell Stories.
• Stories aren’t Tutorials, Documentation, …
• They’re about something you did and why
• Like the Model/View split, and hating it! .. and now loving it!
• .. or …
Add second layer to new Foo()
• Object size an issue.
• Ditto sharing properties (Defaults).
• Study Objects: DevTools & PrintProtoStack()
• Result: Class instance and Object.create()
Link
proto = new Foo()obj = Object.create(proto)
ES6 Modules, Part 1: Migration Strategy
Migrating to Bleeding Edge
• ES6: How migrate and manage “Legacy”
• JSPM, SystemJS, Yuk .. Safari Preview! Yay!
• Back to the Future: Write & Run! No gulp, browserify, webpack: NPM scripts.
• Transform: ES5, <script>, Node/CJS: Use Rollup bundles and plugins.
Link
ES6 Modules, Part 2: Libs .. Wrap ’em up!
Dealing with Dependencies• Three.js, dat.gui, Stats.js, Pako.js
• Mixed: some modules, most not, all a mess.
• Built 4 converters, worked with authors. Risky!
• Wrappers: Wrap foo.min.js in a Module!
Link
foo.min.jssource!
Hacks & DivesTests & Future Direction
Hacks & Dives
• Three.js Exploration
• Flood Fill for Fabio
• Lazy Evaluation
• Model/View Split
Three.js: OK? Or raw WebGL?
• mesh buff0 buff bufftexs1 lines points
Results
• Three very helpful, has raw WebGL access.
• SimTable converting to Three.js
• Several SimTable Computer Vision projects converted to Three.js
• AgentScript has a ThreeView
• Performance
• Point geometry fastest
• Quad geometry, with sprites, very good
• Simple mesh-per-agent much too slow
History: Ed Angel’s Text
• Class: I submitted my homework as webpage.
• Ed: WTF? Where’s the code?
• Me: It’s here, code, description, UI, etc.
• Ed: Converted textbook to WebGL/JavaScript!
Fabio: Console Project
• How did you do Zozobra Exit model?
• Flood Fill.
• Maybe Flood Fill could help?
• OK, lets try it.
• (Remember: Proof of Concept)
Flood: Distances to Exit
• Start at exit
• Ask neighbors to increase distances
0
2 1 23 34
4455
5
66
6
77 7
9
8
FloodFill Algorithm
Flood Around Obstacles
Turtles
• Move to next empty patch closer to exit
• If can’t move, ask neighbor turtles
• If best for both of us
• Squeeze past each other
• If nothing else works, change exit!
Lazy Evaluation
• Models Differ:
• Not all need neighbors, or both 4 & 8
• Not all patches need their turtles
• Not all turtles have links
• Would be waste to have unused capabilities
• Use “getters” to create/promote property.
Two Patch Examples
• patch.turtlesHere()
• patch.neighbors4 (property)
Model/View Split
• SimTable has it’s own View
• Ditto for SerenDPD
• Now ASX separated into a Core and a View
• https://github.com/backspaces/asx
• https://github.com/backspaces/CoreAS
• ASX subclasses Core for a Three.js View
Model: Data Only
• Model vs View
M/V Split Still Early
• How build a general View interface?
• Subclassing too “tight”
• Messaging Architecture?
• Josh: View Adaptor? (React-like)
• Run Models in Node?
• Run Models as Web Workers? (Josh!)
• Run Models on FireBase?
Spritz!
Recommended