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 World!

Link

Hello.js

Hello.js: setup()

Hello.js: step()

index.html

Link

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

StoriesThe rest of Open Source

medium.com

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 …

Two Headed ES6 Classes!

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!

Flood Fill Model

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!