Sets - Unordered and Ordered

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Wed Dec 04 2019 05:45:15 GMT-0500 (Eastern Standard Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Sets - Unordered and Ordered
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 023f0fc135244e988a831dd8f8364679
Keywords: 

My Notes
--------
November 25, 2019

Sets are supposed to be unordered.
In this workbook I will create a "true" unordered set.
I will call this a "swirl".

A Swirl IS an unordered Set:
 - every Xholon node is by definition unique (distinct); a node can never have more than one parent node
 - the elements are in no permanent order; the Swirl is constantly "stirred"
 - But, two or more nodes might share the same value for some property (ex: color)

In JavaScript:
 - an Array may contain duplicates
  - I can place the same Xholon node in an Array multiple times
  - in this case, a JS Array is just an array of pointers (Xholon ports, Math/CT arrows)
 - a Set may not contain duplicates

http://127.0.0.1:8888/Xholon.html?app=Sets+-+Unordered+and+Ordered&src=lstr&gui=none&hide=xhtabs,xhfooter

I will use d3.interpolate() to assign a unique color to each element of the swirl.

OK. Now we have a Set. So what? What can we do with it?

TODO
- implement some of the many things that you can do with a Set
 - either in this workbook,
 - or in workbooks in other tabs in this web browser,
 - or as modules, or subtrees, or workbooks in the same github gist that can be dragged-in
- I have already done:
 - added a decoration/property to each node (color)
 - added a behavior that keeps the Set well-stirred (random)
 - added another behavior that orders/sorts the Set by comparing the color property on pairs of adjacent nodes
- other things I could do with a Set
 - generate a product matrix
 - useful subsets of a product
 - create one or more subclasses
- use JavaScript Set to verify that all elements are unique

Alternative starting point:
- create 3 separate sets, each from a different d3 interpolation
- then work with these three sets

freeze
------
- at any timestep, I can freeze a Swirl into a Set (JS Array or Set) with a definite order
- use a XholonConsole on a Swirl:
<script>
const prnt = this.parent();
this.remove();
const arr = prnt.childrenAsArray();
$wnd.console.log(arr);
</script>
- as a one-liner:
<script>const prnt=this.parent();this.remove();$wnd.console.log(prnt.childrenAsArray());</script>
- each such frozen array is equivalent to a path/directed graph; it's a sequence
 - I could freeze multiple times, each time creating a new array/path, each with a unique name/label
 - each freezing creates a new bplex

my terminology
--------------
swirl (a noun)  an unordered collection
freeze (a noun or a verb)  unordered collection -> frozen order
solidify (a verb)
frost (a noun)  an order
To solidify a swirl into a freeze.
To freeze a swirl into a frost.

bplex
-----
A bplex should be a cycle, but here I only need an acyclic path
<script>
const CYCLE = true;
const prnt = this.parent();
this.remove();
let node = prnt.first();
let pname = "bplex" + $wnd.xh.param("TimeStep"); // port name
while (node) {
  node[pname] = node.next();
  node = node.next();
}
if (CYCLE) {
  prnt.last()[pname] = prnt.first(); // optionally make the bplex a cycle
}
</script>

outside vs inside view
----------------------
JS Array or Set: an outside view
Xholon path/graph/cycle: an inside view, an Avatar can follow this path visiting nodes along the way

TODO - subsets
--------------
- see bottom of page 7
- Set Y can be a freeze (array and/or bplex) of a Swirl
- X ⊆ Y
- X can be the subset of Y where the red component of color is >= 0x80
- outside vs inside approach
 - outside: define a JavaScript action for the Swirl (the container) to execute
 - inside: let an Avatar do it by applying a JavaScript behavior
 - both would use the same basic algorithm
<script>
const prnt = this.parent();
this.remove();
const arr = [];
let node = prnt.first();
const pname = "bplex" + "reddish"; // port name
while (node) {
  if (node.xhc().name() == "Element") {
    prnt.println(node);
    let redpart = parseInt(node.color().substring(1,3), 16);
    if (redpart >= 0x80) {
  	  arr.push(node);
    }
  }
  node = node.next();
}
console.log(arr);
arr.forEach(function(item, index, array) {
  item[pname] = item == array[array.length-1] ? array[0] : arr[index+1];
});
var akm = JSON.parse($wnd.xh.avatarKeyMap());
akm[prnt.parent().bplexIx++] = "go " + pname;
$wnd.xh.avatarKeyMap(JSON.stringify(akm));
</script>

n underscore U+0332
-------------------
&#x0332;
&amp;#x0332;
1&#x0332;
n&#x0332;

∈ ⊆ ⊂ ⊇ ⊃ ∩ ∪ ∅ ℕ ℤ ℚ ℝ ℂ


References
----------
(1) https://en.wikipedia.org/wiki/Set_(mathematics)
    This article is about what mathematicians call "intuitive" or "naive" set theory.
    For a more detailed account, see Naive set theory.
    For a rigorous modern axiomatic treatment of sets, see Set theory.
    
    In mathematics, a set is a well-defined collection of distinct objects, considered as an object in its own right.
    For example, the numbers 2, 4, and 6 are distinct objects when considered separately, but when they are considered collectively they form a single set of size three, written {2, 4, 6}.
    The concept of a set is one of the most fundamental in mathematics.
    Developed at the end of the 19th century, set theory is now a ubiquitous part of mathematics, and can be used as a foundation from which nearly all of mathematics can be derived.

(2) https://en.wikipedia.org/wiki/Naive_set_theory
    Naïve set theory is any of several theories of sets used in the discussion of the foundations of mathematics.
    Unlike axiomatic set theories, which are defined using formal logic, naïve set theory is defined informally, in natural language.
    It describes the aspects of mathematical sets familiar in discrete mathematics (for example Venn diagrams and symbolic reasoning about their Boolean algebra),
    and suffices for the everyday use of set theory concepts in contemporary mathematics.
    
    Sets are of great importance in mathematics; in modern formal treatments, most mathematical objects (numbers, relations, functions, etc.) are defined in terms of sets.
    Naïve set theory suffices for many purposes, while also serving as a stepping-stone towards more formal treatments. 

(3) https://github.com/d3/d3-interpolate
    d3-interpolate
    This module provides a variety of interpolation methods for blending between two values. Values may be numbers, colors, strings, arrays, or even deeply-nested objects.
    
    The returned function i is called an interpolator.
    Given a starting value a and an ending value b, it takes a parameter t in the domain [0, 1] and returns the corresponding interpolated value between a and b.
    An interpolator typically returns a value equivalent to a at t = 0 and a value equivalent to b at t = 1.

(4) https://gist.github.com/kenwebb/34fee44ded8f71b523ed3d57e3f26859
    bplex description and example

(5) Fong, Brendan and Spivak, David I. (2019), "An Invitation to Applied Category Theory: Seven Sketches in Compositionality" book

]]></Notes> 

<_-.XholonClass>
  <PhysicalSystem/>
  
  <!-- an unordered Set -->
  <Swirl/>
  <Swirls/>
  
  <!-- an element in a Set -->
  <Element/>
  
</_-.XholonClass>

<xholonClassDetails>
  <Swirl><Color>white</Color></Swirl>
  <Swirls><Color>white</Color></Swirls>
  <Element><Color>grey</Color></Element>
  <Avatar><Color>rgba(0,0,0,1.0)</Color></Avatar>
</xholonClassDetails>

<PhysicalSystem>
  
  <Swirls>
  
  <Swirl nele="200" sval="red,blue,orange" eval="green,yellow,indigo" opct="0.4"> <!-- 200 -->
    <Element multiplicity="200"/> <!-- 200 -->
  </Swirl>
  
  <Swirl nele="20" sval="red" eval="green" opct="0.5">
    <Element multiplicity="20"/>
  </Swirl>
  
  <Swirl nele="20" sval="blue" eval="yellow" opct="0.6">
    <Element multiplicity="20"/>
  </Swirl>
  
  <Swirl nele="20" sval="orange" eval="indigo" opct="0.7">
    <Element multiplicity="20"/>
  </Swirl>
  
  <!-- all Element nodes will have the same color and roleName "800080" -->
  <Swirl nele="20" sval="purple" eval="purple">
    <Element multiplicity="20"/>
  </Swirl>
  
  <!-- Example 1.5. "Here are some important sets from mathematics" [ref 5] -->
  
  <Swirl roleName="∅" nele="0" sval="white" eval="white">
    <Anno>∅ denotes the empty set; it has no elements. [ref 5]</Anno>
    <Element multiplicity="0"/>
  </Swirl>
  
  <Swirl roleName="{1}" nele="1" sval="orange" eval="red">
    <Anno>{1} denotes a set with one element; it has one element, 1. [ref 5]</Anno>
    <Element multiplicity="1"/>
  </Swirl>
  
  <Swirl roleName="B" nele="2" sval="white" eval="black">
    <Anno>B denotes the set of booleans; it has two elements, true and false. [ref 5]</Anno>
    <Element multiplicity="2"/>
  </Swirl>
  
  <Swirl roleName="9̲" nele="9" sval="pink" eval="lime">
    <Anno>n̲ (n underscore U+0332), for any n ∈ ℕ, denotes the nth ordinal; it has n elements 1,2,...,n. For example, 0̲ = ∅, 1̲ = {1}, and 5̲ = {1,2,3,4,5}. [ref 5]</Anno>
    <Element multiplicity="9"/>
  </Swirl>
  
  <Swirl roleName="five" nele="5" sval="blue" eval="green">
    <Anno>Experiment: Create a cycle bplex from these 5 nodes. Remove one or more nodes from the Xholon tree. Move Avatar around the bplex. Build new structure inside the removed nodes.</Anno>
    <Element multiplicity="5"/>
  </Swirl>
  
  </Swirls>
  
  <Animate selection="#xhgraph" xpath="PhysicalSystem/Swirls" duration="0.1" cssStyle=".d3cpnode circle {stroke-width: 0px;}" efParams="{&quot;selection&quot;:&quot;#xhgraph&quot;, &quot;sort&quot;:&quot;disable&quot;, &quot;width&quot;:900,  &quot;height&quot;:900, &quot;mode&quot;:&quot;tween&quot;, &quot;maxChars&quot;:0}"/>
</PhysicalSystem>

<PhysicalSystembehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  // commands for built-in Avatar  
  const akm = `{
"SHIFT":"true",
"NOSCROLL":"true",
"0":"go link0",
"1":"go link1",
"2":"go link2",
"3":"go link3",
"4":"go link4",
"5":"go link5",
"6":"go link6",
"7":"go link7",
"8":"go link8",
"9":"go link9",
"UP":"exit",
"DOWN":"first",
"LEFT":"prev",
"RIGHT":"next",
"LEFTbt":"bt left",
"RIGHTbt":"bt right",
"UPbt":"bt parent",
"a":"appear",
"b":"build Element",
"d":"drop *ele",
"e":"eat *ele",
"i":"inventory",
"l":"look",
"p":"pause",
"r":"start",
"s":"step",
" ":"step",
"t":"take nextprev",
"T":"takeclone nextprev",
"u":"put *ele before next",
"v":"vanish",
"w":"who;where",
"z":"param transcript toggle;",
"<":"flip prev",
">":"flip next",
",":"flip prev",
".":"flip next",
"?":"help keymap",
"h":"help commands"
}`;
  $wnd.xh.avatarKeyMap(akm);
]]></PhysicalSystembehavior>

<Swirlbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// this behavior intializes the Swirl, and then gradually DECREASES the order in the set
const NELE = this.parent()["nele"];
const STARTING_VALUE_A = this.parent()["sval"].split(",");
const ENDING_VALUE_B   = this.parent()["eval"].split(",");
const NCOLOR = STARTING_VALUE_A.length;
const IS_ACTIVE = true;
const SHOULD_COLOR = true;
const SHOULD_ID = true; // tween won't work if all nodes have the same id
const OPACITY = this.parent()["opct"] || 0.8;

var me, nele, lastChild, swirls, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  swirls = me.parent();
  nele = NELE;
  swirls.bplexIx = 0;
  var ntrpltn = $wnd.d3.interpolate({colors: STARTING_VALUE_A}, {colors: ENDING_VALUE_B});
  var node = me.first();
  for (var i = 0; i < nele; i++) {
    if (SHOULD_COLOR) {
      var clr = ntrpltn(i / nele).colors[i % NCOLOR];
      node.color(clr);
      if (OPACITY > 0.0) {
        node.opacity(OPACITY);
      }
      node.role(clr.substring(1));
    }
    if (!SHOULD_ID) {
      node._id(0);
    }
    node = node.next();
  }
  
  me.editAkm = function(pname, bplexIx) {
    var akm = JSON.parse($wnd.xh.avatarKeyMap());
    akm[bplexIx] = "go " + pname;
    $wnd.xh.avatarKeyMap(JSON.stringify(akm));    
  }
  
  // construct actionList
  var actionList = {};
  actionList["freeze as JS Array"] = function() {
    let pname = "bplex" + $wnd.xh.param("TimeStep"); // port name
    me[pname] = me.childrenAsArray();
    $wnd.console.log(me[pname]);
  }
  actionList["freeze as path"] = function() {
    // bplex path
    let node = me.first();
    let pname = "bplex" + $wnd.xh.param("TimeStep"); // port name
    while (node) {
      node[pname] = node.next();
      node = node.next();
    }
    me.editAkm(pname, swirls.bplexIx++);
  }
  actionList["freeze as cycle"] = function() {
    // bplex cycle
    let node = me.first();
    let pname = "bplex" + $wnd.xh.param("TimeStep"); // port name
    while (node) {
      node[pname] = node.next();
      node = node.next();
    }
    me.last()[pname] = me.first();
    me.editAkm(pname, swirls.bplexIx++);
  }
  me.actions(actionList);
  
  $wnd.xh.root().append(this.cnode.remove());
  lastChild = me.last();
},
act: function() {
  // randomize the order of the elements in the set, by swapping a randomly-selected node with its next neighbor
  if (IS_ACTIVE) {
    if (lastChild && lastChild.next()) {
      // either lastChild has moved, or new nodes have been appended
      nele = me.numChildren();
      lastChild = me.last();
    }
    var node = me.xpath("Element[" + Math.floor(Math.random() * nele) + "]");
    if (node && node.next()) {
      node.next().after(node.remove());
    }
  }
}
}
//# sourceURL=Swirlbehavior01.js
]]></Swirlbehavior>

<Swirlbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// this behavior INCREASES the order in the set
const IS_ACTIVE = false;

var me, node, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  node = me.first();
  $wnd.xh.root().append(this.cnode.remove());
},
act: function() {
  if (IS_ACTIVE) {
    var nodeNext = node.next();
    if (nodeNext == null) {
      node = me.first();
    }
    else {
      if (parseInt(nodeNext.role(), 16) < parseInt(node.role(), 16)) {
        nodeNext.after(node.remove());
        node = node.next();
        if (node == null) {
          node = me.first();
        }
      }
      else {
        node = nodeNext;
      }
    }
  }
}
}
//# sourceURL=Swirlbehavior02.js
]]></Swirlbehavior>

<Swirlbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// this behavior INCREASES the order in the set
const IS_ACTIVE = true;

var swirl, arr, beh = {
postConfigure: function() {
  swirl = this.cnode.parent();
  $wnd.xh.root().append(this.cnode.remove());
  arr = swirl.childrenAsArray();
  arr.sort(this.compareFunction);
  for (var i = 0; i < arr.length; i++) {
    var node = arr[i];
    swirl.append(node.remove());
  }
},
compareFunction: function(firstEle, secondEle) {
  return parseInt(secondEle.role(), 16) < parseInt(firstEle.role(), 16);
}
}
//# sourceURL=Swirlbehavior03.js
]]></Swirlbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="110" height="10" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Swirls</title>
    <rect id="PhysicalSystem/Swirls" fill="#98FB98" height="10" width="10" x="25" y="0"/>
    <g>
      <title>Swirl 1</title>
      <rect id="PhysicalSystem/Swirls/Swirl" fill="#6AB06A" height="10" width="10" x="40" y="0"/>
    </g>
    <g>
      <title>Animate</title>
      <rect id="PhysicalSystem/Animate" fill="gold" height="10" width="10" x="55" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>