JSConf UY 2016, Cellular Automata

---
      class: center, middle

# .big-one[![wave](./src/images/wave.png)        Montevideo!]

---
      class: center, middle

# .big-one[![sassyLady](./src/images/sassyLady.png) I am .pink[[@_lrlna](https://twitter.com/lrlna)]]

---
      class: center, middle

#  .big-one[.pink[TAKING ON GENETICALLY EVOLVING CELLULAR AUTOMATA WITH JAVASCRIPT]]
      ---
      background-image: url(./src/images/lost.gif)
      background-size: cover

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .big-one[.pink[Story time]]

---
      background-image: url(./src/images/rain.gif)
      background-size: cover

# It rains
      --
        .pink[*a lot*]

---
      class: center, middle

![complexityAGuidedTour](./src/images/complexityAGuidedTour.gif)

???
      cellular automata: a descrete model in computations/math.

---
      background-image: url(./src/images/keyboard.gif)
      background-size: cover

# .pink[so I got coding]

---
      background-image: url(./src/images/rule110.gif)
      background-size: cover

---
      background-image: url(./src/images/mindBlown.gif)
      background-size: cover

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .pink[Let's talk cellular automata]

---
      class: center, middle

# .pink[John Von Neumann]

---
      class: middle

# .pink[2 kinds of Automata]:
 --
 
 ## ![robot](./src/images/robot.png) Artificial => e.g. computers
 --
 
 ## ![shell](./src/images/shell.png) Natural   => e.g. seashells

???
      i.e. Conus/Cymbiola shells

---
      class: middle

# .pink[2 kinds of Automata]:
      ## ![robot](./src/images/robot.png) .pink[Artificial => e.g. computers]
      ## ![shell](./src/images/shell.png) Natural   => e.g. seashells

???
      i.e. Conus/Cymbiola shells

---
      class: center, middle

# .pink[What are their characteristics?]
      # .pink[What are their traits?]

???
      Let's talk about traits! Rule definition, based on the rules, we create outcomes

---
      # 1. .pink[Result is dependant on part's definition]

???
      All follow rulesss: OR trait #1
      Results of the automata depen on how elementary parts are defined, i.e. the rules
      --

# 2. .pink[Must have ![sparkles](./src/images/sparkles.png) awarness ![sparkles](./src/images/sparkles.png) of its parts]

???
      Trait #2
      Know all the things

# 3. .pink[Operations are not directed at themselves]

???
      Trait #3
      if operations are not directed at themselves, then we can deduce that the results produced are unlike their character

--
      # 4. .pink[Decentralized]

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .pink[Produce a more complicated object from less complicated parts]

---
      background-image: url(./src/images/turingMachine.jpg)
      background-size: cover

# .big-one[.pink[Turing Machine]]

???
      one of the most basic ones: turing machine :wave:
      want a turing machine picture, picture of turing

---
      background-image: url(./src/images/turingMachine.jpg)
      background-size: cover

---
      background-image: url('./src/images/turingMachine.jpg')
      background-size: cover

# .pink[automaton => action]
 --
 
 # .pink[tape            => product]
 --
 
 #### .pink[=============================]
 # .pink[different constructs]

???
      turing machine = infintite tape in both directions, a puncher to punch some holes based on conditions
      automaton doesn't produce a medium at all, but instead modifies it.

---
      background-image: url('./src/images/mindBlown.gif')
      background-size: cover

---
      background-image: url('./src/images/turingMachine.jpg')
      background-size: cover

# .pink[Computation emerges from rules being obeyed by each automaton]

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .pink[Cellular Automata models a natural system]

???
      working as a decentralized, spatially extended systems
      von neumann lectures --

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

---
      class: center, middle

# .pink[Remember trait 2: aka ![sparkles](./src/images/sparkles.png) awarness ![sparkles](./src/images/sparkles.png) ?]

???
      much like in life, a lot is dependent on how you work with your neighbours

---
      background-image: url(./src/images/space.jpg)
      background-size: cover
      class: center, middle

# .pink[Von Neumann's Automaton]
      ---
      class: center, middle

### ![BulbOn](./src/images/bulb-on.png) ![BulbOff](./src/images/bulb-off.png) ![BulbOn](./src/images/bulb-on.png) ![BulbOn](./src/images/bulb-on.png)![BulbOn](./src/images/bulb-on.png)
      ### ![BulbOFF](./src/images/bulb-off.png) ![BulbOff](./src/images/bulb-off.png) ![BulbOn](./src/images/bulb-on.png) ![BulbOn](./src/images/bulb-on.png)![BulbOff](./src/images/bulb-off.png)
      ### ![BulbOn](./src/images/bulb-on.png) ![BulbOn](./src/images/bulb-on.png) ![BulbOn](./src/images/bulb-on.png) ![BulbOn](./src/images/bulb-on.png)![BulbOn](./src/images/bulb-on.png)
      ### ![BulbOn](./src/images/bulb-on.png) ![BulbOn](./src/images/bulb-on.png) ![BulbOf](./src/images/bulb-off.png) ![BulbOff](./src/images/bulb-off.png)![BulbOn](./src/images/bulb-on.png)

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .pink[Conway's Game of Life]

???
      aka the most familiar example is conway's game of life

---
      class: center, middle

######![koala](./src/images/koala.png)

---
      class: center, middle

######![turtle](./src/images/turtle.png)   ![turtle](./src/images/turtle.png)   ![turtle](./src/images/turtle.png)
      ######![turtle](./src/images/turtle.png)   ![koala](./src/images/koala.png)   ![turtle](./src/images/turtle.png)
      ######![turtle](./src/images/turtle.png)   ![turtle](./src/images/turtle.png)   ![turtle](./src/images/turtle.png)

???
      if you are a koala and have 3 turtles = become a turtle 
      if turtle and 2 or 3 turtles = stay a turtle
      if a turtle and there are less than 2 of you = become a koala 
      ---
      class: center, middle
      # .pink[glider dot gif]
      ![glider](./src/images/glider.gif)

???
      couple of images of this automata. life, pistols

---
      class: center, middle
      # .pink[blaster dot gif]
      ![blaster](./src/images/blaster.gif)

???
      couple of images of this automata. life, pistols

---
      class: center, middle

# .pink[2 dimensional + binary]

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .pink[Wolfram + Elementary Cellular Automata]

---
      class: center, middle

# .pink[1 dimensional + binary]

---
      class: center, middle

######![koala](./src/images/koala.png)

---
      class: center, middle

######![turtle](./src/images/turtle.png)   ![koala](./src/images/koala.png)   ![turtle](./src/images/turtle.png)

---
      background-image: url(./src/images/keyboard.gif)
      background-size: cover

# .pink[Let's take a look]

---
      # .pink[One dimensional lattice:]

###       | ![turtle](./src/images/turtleSmall.png) ![koala](./src/images/koalaSmall.png)  ![koala](./src/images/koalaSmall.png)  ![turtle](./src/images/turtleSmall.png) ![turtle](./src/images/turtleSmall.png)![koala](./src/images/koalaSmall.png) ] *t*
      ###t    |                                                                          ] *t+1*
      ###i     |                                                                          ] *t+2*
      ###m  |                                                                          ] *t+3*
      ###e   |                                                                          ] *t+4*
      ###      |                                                                          ] *t+5*

---
      class: middle

# .pink[Look to your ![point_left](./src/images/point_left.png), look to your ![point_right](./src/images/point_right.png)]

```javascript

[].forEach.call(parentCells, function(parentCell, index) {
          var right = parentCell.nextElementSibling
          var left = parentCell.previousElementSibling
          rule110(parentCell, right, left, index)
        })

```
      ???
      get left right emoji

---
      class: middle
      # .pink[follow site update rules]

```javascript
        var rule110 = function(parentCell, right, left, currentIndex) {
          // check if argument cells are active;
          var cellTurtle = checkIfTurtle(parentCell);
          var rightTurtle= checkIfTurtle(right);
          var leftTurtle = checkIfTurtle(left);

// change based on (in)active;
          if (leftTurtle && cellTurtle && rightTurtle) {
            toggleClass(cells[currentIndex], "active", "inactive");
          } else if (leftTurtle && !cellTurtle && rightTurtle) {
            toggleClass(cells[currentIndex], "inactive", "active");
          } else if (!leftTurtle && !cellTurtle && rightTurtle) {
            toggleClass(cells[currentIndex], "inactive", "active");
          }
        }
      ```

???

---
      background-image: url(./src/images/rule110.gif)
      background-size: cover

# .pink[wow, cool pattern ![sparkles](./src/images/sparkles.png)]
      ---
      class: middle

# .pink[Certain patterns will dominate]
 --
 
 ## Pattern (*noun*): A set of configurations sharing a common spacial structure

???
      Crutchfield + Hanson in computational mechanics of CA

---
      class: middle
      # .pink[Discovery:]
      # Diversity of spatio-temporal behaviour where system organizes *itself* into patterns
      ---
      background-image: url(./src/images/mindBlown.gif)
      background-size: cover

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .big-one[.pink[IT FROM BIT]]

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

### .pink[.quote[It from bit. Otherwise put, every 'it'—every particle, every field of force, even the space-time continuum itself—derives its function, its meaning, its very existence entirely—even if in some contexts indirectly—from the apparatus-elicited answers to yes-or-no questions, binary choices, bits. 'It from bit' symbolizes the idea that every item of the physical world has at bottom—a very deep bottom, in most instances—an immaterial source and explanation; that which we call reality arises in the last analysis from the posing of yes–no questions and the registering of equipment-evoked responses; in short, that all things physical are information-theoretic in origin and that this is a participatory universe.]]
      #### .citation[John Archibald Wheeler]

???
      Everything derives from binary yes or no answers

---
      class: middle

# .pink[Discovery:]
      # Diversity of spatio-temporal behaviour where system organizes *itself* into patterns

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .big-one[.pink[Complex Systems]]

???
      The automata produced is more complex than itself, which is why it's so interesting to people. But what is complexity?

---
      class: middle

# 1. .pink[How hard is it to describe?]
      # 2. .pink[How hard is it to create?]
      # 3. .pink[What is its degree of organization?]

???
      Questions defined by Seth Lloyd
      ---
      class: middle

# .pink[The average information content or "amount of surprise"]
      # .pink[Algorithmic information content]
      ???
      Algorithmic information content: the size of the shortest program that could generate complete description

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .big-one[.pink[Genetic Algorithms + Cellular Automata]]

???
      because such a simple system produces and models are more complex result, people have been looking at these as models to work on
      ---
      class: middle

#1. .pink[Density Classification]
      #2. .pink[Synchronization Tasks]
      #3. .pink[Random Number Generations]

---
      background-image: url(./src/images/space.jpg)
      background-size: cover
      class: center, middle

# .pink[Genetic Algorithm Structure for Density Classification]

---
      class: top

# .pink[A new set is generated for each generation]

---
      class: middle
      # .pink[Perform a fitness level test ![runner](./src/images/runner.png)  ![bike](./src/images/bike.png) ![weightlifter](./src/images/weightlifter.png) + ]
      # .pink[sort in order of fitness]

---
      class: middle
      # .pink[20% of the best taken to next generation]
      ### ![turtle](./src/images/turtleSmall.png) ![koala](./src/images/koalaSmall.png)  ![koala](./src/images/koalaSmall.png)  ![turtle](./src/images/turtleSmall.png) ![turtle](./src/images/turtleSmall.png)![koala](./src/images/koalaSmall.png) ![koala](./src/images/koalaSmall.png)  ![turtle](./src/images/turtleSmall.png) ![turtle](./src/images/turtleSmall.png)![koala](./src/images/koalaSmall.png)
      ## | ------- |
      ####                20%

---
      class: middle
      # .pink[80% crossovers between pairs of "elite" rules]

### ![turtle](./src/images/turtleSmall.png) ![koala](./src/images/koalaSmall.png)

---
      class: middle
      # .pink[80% crossovers between pairs of "elite" rules]

### ![turtle](./src/images/turtleSmall.png) ![koala](./src/images/koalaSmall.png)  ![koala](./src/images/koalaSmall.png)  ![turtle](./src/images/turtleSmall.png) ![turtle](./src/images/turtleSmall.png)![koala](./src/images/koalaSmall.png) ![koala](./src/images/koalaSmall.png)  ![turtle](./src/images/turtleSmall.png) ![turtle](./src/images/turtleSmall.png)![koala](./src/images/koalaSmall.png)
      ####                                                |----------------------------------------------------------------------------------------- |
      ???
      Offsprings from the crossover are placed randomly
      Selecting parents relative to fitness rank helps with genetic diversity.

---
      # .pink[Generation 0]
      ![gen0](./src/images/gen0.png)

---
      # .pink[Later Generations]
      ![latergens](./src/images/laterGens.png)

---
      class: center, middle
      # .pink[[Image Processing](http://ieeexplore.ieee.org/xpl/login.jsp?tp=&arnumber=1643712&url=http%3A%2F%2Fieeexplore.ieee.org%2Fiel5%2F83%2F34447%2F01643712.pdf%3Farnumber%3D1643712)]
      # .pink[[Cellular Automata and Graphs](http://www.mdpi.com/1099-4300/14/6/993/pdf)]

---
      background-image: url(./src/images/space.jpg)
      background-size: cover

# .big-one[.pink[Thank you ![sparkles](./src/images/sparkles.png)]]
      ## .pink[[@_lrlna](https://twitter.com/_lrlna)]
      ## .pink[lrlna.github.io/jsconf-uy-automata]