Seeing Processes with Scenic

Let's use Scenic, a new Elixir UI library, to visualize processes. From there we can start to model biological behaviours such as movement, smell and sight.

Accompanying code can be found at https://github.com/martinstannard/petri.git

Transcript

1. Seeing Processes with Scenic Martin Stannard @_martinS_
2. Overview Background Scenic - overview and usage Visualizations: ⚙ Processes Modelling Behaviours
3. What is Scenic? Scenic is a 2D UI framework Identical across all platforms Primarily aimed at fixed screen connected devices and static UIs Written directly on the Elixir/Erlang/OTP stack, using OpenGL
4. Demo...
5. Core Concepts Scene Graph Primitives Transforms Styles Components Input and Events
6. Scene 1. Maintain application state 1. Build and maintain graph of UI primitives 2. Handle input and events An app will typically contain multiple screens Is implemented as a GenServer, hence has state, can send and receive messages Provides send_graph(graph) function for rendering the scene
7. Graph Hierarchical tree of data that describes a set of things to draw on the screen. Primitives can be added, removed and modified Graph.add_to_graph(graph, text("foo", id: :foo)) Graph.modify(graph, :foo, "bar") -> returns a graph Graph.delete(graph, :foo) Scenic.push_graph(graph)
8. Primitives A set of helper functions to make it easy to add to, or modify, a graph. def name_of_primitive( graph, data, opts \\ [] ) Returns a graph for piping: graph |> rect/3 |> circ/3 circle, arc, rect, rrect, line, text, triangle, sector, graph
9. Transforms Change the position, rotation, scale and more of a primitive. • Matrix - hand specify a matrix. • Rotate - rotate around the pin. • Scale - scale larger or smaller. Centered around the pin. • Translate - move/translate horizontally and vertically. • Pin - set a pin to rotate or scale around.
10. Styles Modify the look of a primitive by applying a Style. Paint - Color, Image, Gradients Other - Fill, Font, FontSize etc
11. Components A Scene that is optimized to be referenced by another scene. You can build your own or use the built-in components: Button, Checkbox, Dropdown, RadioGroup, Slider, Textfield, Toggle Useful for reuse of UI elements across Scenes e.g Navigation, Menus etc
12. Events and Inputs Events are messages generated by one scene for use in another May be from a component (Button -> {:click, msg}) or custom from the app Handle by filter_event(event, context, state) Generate an event with send_event(scene, event) Input is data generated by drivers and sent to scenes. Limited set of input events e.g. :click, :value_changed Handled by a scene via handle_input(input, context, state)
13. Getting Started > mix archive.install hex scenic_new > mix scenic.new my_app > cd my_app > mix do deps.get, scenic.run
14. Let's build... So we have some tools for putting primitives on the screen and manipulating them. Let's represent a process in Scenic and show changes to state over time
15. Architecture Scene - UI management and display Creature - Genserver with a collection of behaviours Supervisor - Manages a population of creatures Behaviours - implementation of a specific behaviours
16. Scene state: graph
17. Scene state: Creature state: graph id add() modify()
18. Scene state: graph Creature state: id add() modify()
19. Supervisor Scene state: graph Creature state: id add() modify()
20. Scene state: graph Creature state: id Supervisor update draw add() modify()
21. Scene state: graph Creature state: id Supervisor Cont update draw Behaviours Move Health Smell Vision Feed Count add() modify()
22. Scene state: graph Supervisor Behaviours Move Health Smell Vision Feed Count Supervisor Creature state: id counter health, age x, y, heading velocity food_distance colour update draw add() modify()
23. Behaviours Move Health Smell Vision Feed Count Supervisor Scene state: graph food_x food_y food_quantity births deaths Creature state: init call update draw id counter health, age x, y, heading velocity food_distance colour add() modify()
24. Behaviours Move Health Smell Vision Feed Count Behaviours Birth Food Death Supervisor Scene state: graph food_x food_y food_quantity births deaths Creature state: id counter health, age x, y, heading velocity food_distance colour init call update draw add() modify()
25. Behaviours Move Health Smell Vision Feed Count Behaviours Birth Food Death Supervisor Scene state: graph food_x food_y food_quantity births deaths Creature state: init init call call update draw id counter health, age x, y, heading velocity food_distance colour add() modify()
26. Let's look at some processes Each process is a GenServer Process can draw itself as Primitives Changes in the process state are reflected in the UI Process counts pings and sends pings to siblings
27. Let's start moving Model a creature based on TurtleGraphics Creature uses Move, Health Scene use Birth, Death
28. Food Food has quantity, can be consumed Creatures feed, proportional to distance When exhausted, quantity is reset and food is moved to a new location
29. Modelling Smell Strength of smell depends on distance to food If strength decreasing, turn. You are getting further away. If strength increasing, don't turn. Looks at delta in distance between updates. Behaviour results in the creatures spiraling inward
30. Modelling Sight Creature has left and right eye, with a width and an offset from centre. If food within arc of an eye, see == true If only left, turn left. If only right, turn right. If both eyes see, don't turn. If neither, turn left.
31. Caveats Scenic is Retained mode - the framework retains and modifies the graph Performance issues when making large numbers of modifications to the graph Separate logic and animation timers Embedding Scenic calls in creatures is memory intensive - perhaps send creature state to a dedicated module
32. Further directions More interactions between creatures Predator/Prey Reproduction Genetic Algorithms Games
33. Links https://github.com/martinstannard/petri https://github.com/boydm/scenic_new https://github.com/boydm/scenic