aboutsummaryrefslogtreecommitdiffstats
path: root/root
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--root/animations/init.moon29
-rw-r--r--root/animations/koch.moon113
-rw-r--r--root/animations/twisted.moon51
-rw-r--r--root/articles/init.moon27
-rw-r--r--root/articles/mmmfs/gallery.moon49
-rw-r--r--root/articles/mmmfs/init.moon (renamed from app/mmmfs/tree.moon)47
-rw-r--r--root/articles/realities.moon552
-rw-r--r--root/experiments/center_of_mass.moon179
-rw-r--r--root/experiments/init.moon26
-rw-r--r--root/experiments/tags/init.moon (renamed from app/tags/init.moon)0
-rw-r--r--root/experiments/tags/tags.moon (renamed from app/tags/tags.moon)0
-rw-r--r--root/init.moon68
12 files changed, 1117 insertions, 24 deletions
diff --git a/root/animations/init.moon b/root/animations/init.moon
new file mode 100644
index 0000000..cb1f20a
--- /dev/null
+++ b/root/animations/init.moon
@@ -0,0 +1,29 @@
+import div, h3, ul, li, a from require 'lib.dom'
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+require = relative ...
+
+Fileder {
+ 'name: alpha': 'animations',
+ 'title: text/plain': 'canvas animations',
+ 'moon -> mmm/dom': (path) => div {
+ h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+ ul for child in *@children
+ name = child\gett 'name: alpha'
+ desc = child\gett 'description: text/plain'
+ li {
+ a name, {
+ href: child.path,
+ onclick: (_, e, ...) ->
+ print 'ASD', e, ...
+ window\alert 'YO WADDAFUQ'
+ e\preventDefault!
+ BROWSER\navigate "animations | #{name}",
+ },
+ ': ', desc
+ }
+ }
+
+ require '.twisted'
+ require '.koch'
+}
diff --git a/root/animations/koch.moon b/root/animations/koch.moon
new file mode 100644
index 0000000..9b8217d
--- /dev/null
+++ b/root/animations/koch.moon
@@ -0,0 +1,113 @@
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+
+with Fileder {
+ 'name: alpha': 'koch',
+ 'description: text/plain': "lil' fractal thing",
+ }
+
+ if MODE == 'CLIENT'
+ Math = window.Math
+
+ import CanvasApp from require 'lib.canvasapp'
+ import hsl from require 'lib.color'
+
+ class KochDemo extends CanvasApp
+ width: 600
+ height: 600
+ length: math.pi * 2
+
+ new: (@iterations=3) =>
+ super true
+ hue = Math.random!
+ @background = {1 - hue, .3, .3}
+
+ @shades = setmetatable {}, __index: (tbl, key) ->
+ with val = hsl { hue, .7, .9 - .5 * (key / @iterations)} do rawset tbl, key, val
+
+ a_sixth = math.pi / 3
+ a_third = 2 * a_sixth
+ cossin = (a) -> (math.cos a), math.sin a
+ triangle: (color) =>
+ @ctx.fillStyle = color
+ @ctx\beginPath!
+ @ctx\moveTo cossin 0
+ @ctx\lineTo cossin a_third
+ @ctx\lineTo cossin 2*a_third
+ @ctx\fill!
+
+ update: (dt) =>
+ super dt * 1.6
+
+ draw: =>
+ @ctx.fillStyle = hsl @background
+ @ctx\fillRect 0, 0, @width, @height
+
+ @ctx\translate @width/2, @height/2
+ s = .3 * math.min @width, @height
+ @ctx\scale s, s
+
+ _scale = 0.8 + 0.2 * math.sin math.pi + @time
+
+ ttime = @time - math.pi/2
+ transfer, flipped = 0
+ if ttime > 0 and ttime < math.pi
+ transfer = .5 - .5 * math.cos ttime
+ flipped = true
+
+ draw = (i, pop) ->
+ @triangle @shades[i]
+
+ extra = not pop and flipped
+ return unless i > (if extra then -1 else 0)
+
+ scale = _scale
+ if (pop and i < 1) or (not pop and i < 0)
+ scale = transfer
+
+ @ctx\save!
+ @ctx\rotate -(a_sixth + a_third)
+ @ctx\scale scale, scale
+
+ for o=1,2
+ @ctx\rotate a_third
+ @ctx\save!
+ @ctx\translate .5 + .5/scale, 0
+ draw i - 1, pop
+ @ctx\restore!
+
+ @ctx\restore!
+
+ @ctx\rotate a_sixth/2
+ @ctx\translate -transfer, 0
+ @ctx\rotate a_sixth * transfer
+
+ @triangle @shades[3 - transfer]
+
+ @ctx\save!
+ @ctx\rotate a_sixth
+ @ctx\scale _scale, _scale
+
+ @ctx\save!
+ @ctx\translate .5 + .5/_scale, 0
+ draw 2 - transfer
+ @ctx\restore!
+
+ @ctx\rotate a_third
+
+ @ctx\save!
+ @ctx\translate .5 + .5/_scale, 0
+ draw 2 - transfer
+ @ctx\restore!
+
+ @ctx\rotate a_third
+
+ @ctx\save!
+ @ctx\translate .5 + .5/_scale, 0
+ draw 2 + transfer, true
+ @ctx\restore!
+
+ @ctx\restore!
+
+ -- .props['preview: moon -> mmm/component'] = => TwistedDemo true
+ .props['moon -> mmm/component'] = => KochDemo!
diff --git a/root/animations/twisted.moon b/root/animations/twisted.moon
new file mode 100644
index 0000000..9e97738
--- /dev/null
+++ b/root/animations/twisted.moon
@@ -0,0 +1,51 @@
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+
+with Fileder {
+ 'name: alpha': 'twisted',
+ 'description: text/plain': "pseudo 3d",
+ }
+
+ if MODE == 'CLIENT'
+ import CanvasApp from require 'lib.canvasapp'
+ import hsl from require 'lib.color'
+
+ Math = window.Math
+
+ class TwistedDemo extends CanvasApp
+ width: 500
+ height: 400
+ length: math.pi * 4
+ new: (preview) =>
+ if preview
+ @width, @height = 120, 120
+ super false, true
+ else
+ super true
+ @background = {Math.random!, Math.random!/3+.2, Math.random!/4}
+ hue = Math.random!
+ @shades = setmetatable {}, __index: (key) =>
+ with val = { hue, .7, key * .3 + .1} do rawset @, key, val
+
+ draw: =>
+ @ctx.fillStyle = hsl @background
+ @ctx\fillRect 0, 0, @width, @height
+ @ctx\translate @width/2, @height/2 + 70
+
+ draw = (i) ->
+ @ctx\save!
+ @ctx\translate 0, -120*i
+ s = 1 - 0.1 * math.sin @time + i*2
+ s *= 0.8 - i * .4 * math.cos @time
+ @ctx\scale s, s/2
+ @ctx\rotate @time/4 + i * .6 * math.cos @time
+ @ctx.fillStyle = hsl table.unpack @shades[i]
+ @ctx\fillRect -80, -80, 160, 160
+ @ctx\restore!
+
+ for i=0,1,1/(20 + 19 * math.sin(@time / 2))
+ draw i
+ draw 1
+
+ .props['preview: moon -> mmm/component'] = => TwistedDemo true
+ .props['moon -> mmm/component'] = => TwistedDemo!
diff --git a/root/articles/init.moon b/root/articles/init.moon
new file mode 100644
index 0000000..b706f7c
--- /dev/null
+++ b/root/articles/init.moon
@@ -0,0 +1,27 @@
+import div, h3, ul, li, a from require 'lib.dom'
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+require = relative ...
+
+Fileder {
+ 'name: alpha': 'articles',
+ 'title: text/plain': 'articles and papers',
+ 'moon -> mmm/dom': (path) => div {
+ h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+ ul for child in *@children
+ name = child\gett 'name: alpha'
+ desc = child\gett 'description: text/plain'
+ li {
+ a name, {
+ href: child.path,
+ onclick: (e) =>
+ e\preventDefault!
+ BROWSER\navigate child.path
+ },
+ ': ', desc
+ }
+ }
+
+ require '.mmmfs'
+ require '.realities'
+}
diff --git a/root/articles/mmmfs/gallery.moon b/root/articles/mmmfs/gallery.moon
new file mode 100644
index 0000000..081865a
--- /dev/null
+++ b/root/articles/mmmfs/gallery.moon
@@ -0,0 +1,49 @@
+import define_fileders from require 'lib.mmmfs'
+import div, h1, a, img, br from require 'lib.dom'
+
+Fileder = define_fileders ...
+
+with Fileder {
+ 'name: alpha': 'gallery',
+ 'title: text/plain': "A Gallery of 25 random pictures, come in!",
+ 'preview: moon -> mmm/dom': => div {
+ 'the first pic as a little taste:',
+ br!,
+ img src: @children[1]\get 'preview', 'URL -> image/png'
+ }
+ 'moon -> mmm/dom': =>
+ link = (child) -> a {
+ href: '#',
+ onclick: -> BROWSER\navigate { 'gallery', (child\get 'name', 'alpha'), nil },
+ img src: child\gett 'preview', 'URL -> image/png'
+ }
+
+ content = [link child for child in *@children]
+ table.insert content, 1, h1 'gallery index'
+ div content
+
+ 'slideshow: moon -> mmm/dom': =>
+ import ReactiveVar, text, elements from require 'lib.component'
+
+ index = ReactiveVar 1
+
+ prev = (i) -> math.max 1, i - 1
+ next = (i) -> math.min #@children, i + 1
+
+ e = elements
+ e.div {
+ e.div {
+ e.a 'prev', href: '#', onclick: -> index\transform prev
+ index\map (i) -> text " image ##{i} "
+ e.a 'next', href: '#', onclick: -> index\transform next
+ },
+ index\map (i) -> img src: @children[i]\gett nil, 'URL -> image/png'
+ }
+ }
+ for i=1,25
+ id = 120 + i
+ .children[i] = Fileder {
+ 'name: alpha': "image#{id}"
+ 'URL -> image/png': "https://picsum.photos/600/600/?image=#{id}"
+ 'preview: URL -> image/png': "https://picsum.photos/200/200/?image=#{id}"
+ }
diff --git a/app/mmmfs/tree.moon b/root/articles/mmmfs/init.moon
index 23e1a89..8193356 100644
--- a/app/mmmfs/tree.moon
+++ b/root/articles/mmmfs/init.moon
@@ -1,8 +1,11 @@
-require = relative ..., 1
-
-import Fileder from require 'lib.mmmfs'
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+require = relative ...
Fileder {
+ 'name: alpha': 'mmmfs',
+ 'description: text/plain': 'a file and operating system to live in',
+
-- main content
-- doesn't have a name prefix (e.g. preview: moon -> mmm/dom)
-- uses the 'moon ->' conversion to execute the lua/pre moon function on get
@@ -82,31 +85,30 @@ Fileder {
append p "Sounds cool, no? Here's some examples of things a fileder can be or embed:"
-- render a preview block
- preview = (title, content, name) -> div {
- h3 title, style: { margin: 0, cursor: 'pointer' }, onclick: -> BROWSER\navigate { name }
- content or span '(no renderable content)', style: { color: 'red' },
- style: {
- display: 'inline-block',
- width: '300px',
- height: '200px',
- padding: '4px',
- margin: '8px',
- border: '4px solid #eeeeee',
- overflow: 'hidden',
- },
- }
-
- append div for child in *@children
+ preview = (child) ->
-- get 'title' as 'text/plain' (error if no value or conversion possible)
title = child\gett 'title', 'text/plain'
-- get 'preview' as a DOM description (nil if no value or conversion possible)
content = child\get 'preview', 'mmm/dom'
- -- get 'name' as a DOM description (nil if no value or conversion possible)
- name = child\gett 'name', 'alpha'
+ div {
+ h3 title, style: { margin: 0, cursor: 'pointer' }, onclick: -> BROWSER\navigate child.path
+ content or span '(no renderable content)', style: { color: 'red' },
+ style: {
+ display: 'inline-block',
+ width: '300px',
+ height: '200px',
+ padding: '4px',
+ margin: '8px',
+ border: '4px solid #eeeeee',
+ overflow: 'hidden',
+ },
+ }
- preview title, content, name
+
+ append div for child in *@children
+ preview child
append h2 "details"
-- @TODO s/parts: dimensions, aspects?
@@ -280,7 +282,4 @@ and some bold **text** and `code tags` with me.",
}
require '.gallery',
-
- -- if we are on client, throw in twisted as a child
- if MODE == 'CLIENT' then require '.twisted'
}
diff --git a/root/articles/realities.moon b/root/articles/realities.moon
new file mode 100644
index 0000000..f913842
--- /dev/null
+++ b/root/articles/realities.moon
@@ -0,0 +1,552 @@
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+
+Fileder {
+ 'name: alpha': 'realities'
+ 'description: text/plain': 'exploring the nesting relationships of virtual and other realities'
+ 'moon -> mmm/component': =>
+ import elements from require 'lib.component'
+ import h1, h2, p, a, i, div, ol, li, br, hr, span, button, section, article from elements
+
+ _content = div!
+ append = _content\append
+
+ if MODE == 'SERVER'
+ -- import compile from require 'lib.duct_tape'
+
+ -- append '<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js"></script>'
+
+ export ^
+ class Diagram
+ style = {
+ display: 'inline-block',
+ width: '150px',
+ height: '80px',
+ 'line-height': '80px',
+ color: '#fff',
+ background: '#666',
+ }
+
+ @id = 1
+ new: (@func) =>
+ @id = "diagram-#{@@id}"
+ @@id += 1
+
+ render: =>
+ rplc = with div id: @id, :style
+ \append '(diagram goes here)'
+ -- \append "<script type=\"application/lua\">
+ -- local rplc = js.global.document:getElementById('#{@id}');
+ -- local fn = #{compile @func}
+ -- diag = Diagram(fn)
+ -- rplc.parentNode:replaceChild(diag.node, rplc)
+ -- </script>"
+ rplc\render!
+
+ if MODE == 'CLIENT'
+ export ^
+ export o
+ eval = js.global\eval
+ GRID_W = 50
+ GRID_H = 40
+
+ SVG =
+ doc: eval "(function() { return SVG(document.createElement('svg')); })",
+ G: eval "(function() { return new SVG.G(); })",
+ setmetatable SVG, __call: => @doc!
+
+ o = do
+ mkobj = eval "(function () { return {}; })"
+ (tbl) ->
+ with obj = mkobj!
+ for k,v in pairs(tbl)
+ obj[k] = v
+
+ class Diagram
+ new: (f) =>
+ @svg = SVG!
+ @arrows = SVG.G!
+ @width, @height = 0, 0
+ @y = 0
+
+ f @
+
+ txtattr = o {
+ fill: 'white',
+ 'font-size': '14px',
+ 'text-anchor': 'middle',
+ }
+ block: (color, label, h=1) =>
+ @svg\add with SVG.G!
+ with \rect GRID_W, h * GRID_H
+ \attr o fill: color
+ if label
+ with \plain label
+ \move GRID_W/2, 0
+ \attr txtattr
+
+ \move @width * GRID_W, (@y + h) * -GRID_H
+ @y += h
+ if @y > @height
+ @height = @y
+
+ arrattr = o {
+ fill: 'white',
+ 'font-size': '18px',
+ 'text-anchor': 'middle',
+ }
+ arrow: (char, x, y) =>
+ with @arrows\plain char
+ \attr arrattr
+ \move (x + 1) * GRID_W, (y - 0.5) * -GRID_H - 11
+
+ -- inout: (x=@width, y=@y) => @arrow '⇋', x, y -- U+21CB
+ -- inn: (x=@width, y=@y) => @arrow '↼', x, y+0.25 -- U+21BC
+ -- out: (x=@width, y=@y) => @arrow '⇁', x, y-0.25 -- U+21C1
+ inout: (x=@width, y=@y) => @arrow '⇆', x, y -- U+21C6
+ inn: (x=@width, y=@y) => @arrow '←', x, y+0.25 -- U+2190
+ out: (x=@width, y=@y) => @arrow '→', x, y-0.25 -- U+2192
+
+ mind: (label='mind', ...) => @block '#fac710', label, ...
+ phys: (label='phys', ...) => @block '#8fd13f', label, ...
+ digi: (label='digi', ...) => @block '#9510ac', label, ...
+
+ next: =>
+ @y = 0
+ @width += 1
+
+ finish: =>
+ return if @node
+ @svg\add @arrows
+
+ @width += 1
+ w, h = @width * GRID_W, @height * GRID_H
+
+ l = GRID_W / 6.5
+ @svg\add with @svg\line 0, -GRID_H, w, -GRID_H
+ \stroke o width: 2, color: '#ffffff', dasharray: "#{l}, #{l}"
+
+ @svg\size w, h
+ @svg\viewbox 0, -h, w, h
+ @node = @svg.node
+
+ addlabel = (label, diagram) ->
+ with div style: { display: 'inline-block', margin: '20px', 'text-align': 'center' }
+ \append diagram
+ \append div label
+
+ figures = do
+ style =
+ display: 'flex'
+ 'align-items': 'flex-end'
+ 'justify-content': 'space-evenly'
+ (...) -> div { :style, ... }
+
+ sources = do
+ short = => "#{@id} #{@year}"
+ long = => @names, " (#{@year}): ", (i @title), ", #{@published}"
+ {
+ {
+ id: 'Milgram',
+ title: 'Augmented Reality: A class of displays on the reality-virtuality continuum',
+ published: 'in SPIE Vol. 2351',
+ names: 'P. Milgram, H. Takemura, A. Utsumi, F. Kishino',
+ year: 1994
+ :long, :short,
+ },
+ {
+ id: 'Marsh',
+ title: 'Nested Immersion: Describing and Classifying Augmented Virtual Reality',
+ published: 'IEEE Virtual Reality Conference 2015',
+ names: 'W. Marsh, F. Mérienne',
+ year: 2015
+ :long, :short,
+ },
+ {
+ id: 'Billinghurst',
+ title: 'The MagicBook: a transitional AR interface',
+ published: 'in Computer & Graphics 25',
+ names: 'M. Billinghurst, H. Kato, I. Poupyrev',
+ year: 2001,
+ :long, :short,
+ },
+ {
+ id: 'Matrix',
+ title: 'The Matrix',
+ year: 1999,
+ names: 'L. Wachowski, A. Wachowski',
+ long: => @names, " (#{@year}): ", (i @title), " (movie)"
+ short: => tostring @year
+ },
+ {
+ id: 'Naam',
+ title: 'Nexus',
+ published: 'Angry Robot (novel)',
+ names: 'R. Naam',
+ year: 2012,
+ :long, :short,
+ }
+ }
+
+ ref = do
+ fmt = (id) ->
+
+ local src
+ for _src in *sources
+ if _src.id == id
+ src = _src
+ break
+
+ if src
+ a { src\short!, href: "##{src.id}" }
+ else
+ span id
+
+ ref = (...) ->
+ refs = { ... }
+ with span "(", fmt refs[1]
+ for i=2, #refs
+ \append ", "
+ \append fmt refs[i]
+ \append ")"
+
+ references = ->
+ with ol!
+ for src in *sources
+ \append li { id: src.id, src\long! }
+
+ sect = (label) ->
+ with section style: 'page-break-inside': 'avoid'
+ \append h2 label
+
+ append with article style: { margin: 'auto', 'max-width': '750px' }
+ \append div 'Sol Bekic', style: 'text-align': 'right'
+
+ \append h1 {
+ style: { 'text-align': 'center', 'font-size': '2em' },
+ "Reality Stacks",
+ div "a Taxonomy for Multi-Reality Experiences", style: 'font-size': '0.6em'
+ }
+
+ \append with sect "Abstract"
+ \append p "With the development of mixed-reality experiences and the corresponding interface devices
+ multiple frameworks for classification of these experiences have been proposed. However these past
+ attempts have mostly been developed alongside and with the intent of capturing specific projects ",
+ (ref 'Marsh', 'Billinghurst'), " or are nevertheless very focused on existing methods and technologies ",
+ (ref 'Milgram'), ". The existing taxonomies also all assume physical reality as a fixpoint and constant and are
+ thereby not suited to describe many fictional mixed-reality environments and altered states of consciousness.
+ In this paper we describe a new model for describing such experiences and examplify it's use with currently
+ existing as well as idealized technologies from popular culture."
+
+ \append with sect "Terminology"
+ \append p "We propose the following terms and definitions that will be used extensively for the remainder of the paper:"
+ for definition in *{
+ { "layer of reality": "a closed system consisting of a world model and a set of rules or dynamics operating on and
+ constraining said model." },
+ { "world model": "describes a world state containing objects, agents and/or concepts on an arbitrary abstraction level." },
+ '------',
+ { "reality stack": "structure consisting of all layers of reality encoding an agent's interaction with his environment
+ in their world model at a given moment, as well as all layers supporting these respectively." },
+ '------',
+ { "physical reality": "layer of reality defined by physical matter and the physical laws acting upon it.
+ While the emergent phenomena of micro- and macro physics as well as layers of social existence etc. may be seen
+ as separate layers, for the purpose of this paper we will group these together under the term of physical reality." },
+ { "mental reality": "layer of reality perceived and processed by the brain of a human agent." },
+ { "digital reality": "layer of reality created and simulated by a digital system, e.g. a virtual reality game." },
+ { "phys, mind, digi": "abbreviations for physical, mental and digital reality respectively." },
+ }
+ if 'string' == type definition
+ \append hr!
+ continue
+ \append with div style: { 'margin-left': '2rem' }
+ term = next definition
+ \append span term, style: {
+ display: 'inline-block',
+ 'margin-left': '-2rem',
+ 'font-weight': 'bold',
+ 'min-width': '140px'
+ }
+ \append span definition[term]
+
+ \append with sect "Introduction"
+ \append p "We identify two different types of relationships between layers in multi-reality environments.
+ The first is layer nesting. Layer nesting describes how some layers are contained in other layers; i.e. they exist
+ within and can be represented fully by the parent layer's world model and the child layer's rules emerge natively from
+ the parent layer's dynamics. Layer nesting is visualized on the vertical axis in the following diagrams.
+ For each layer of reality on the bottom of the diagram the nested parent layers can be found by tracing a line upwards
+ to the top of the diagram. Following a materialistic point of view, physical reality therefore must completely encompass
+ the top of each diagram."
+
+ \append p "The second type of relationship describes the information flow between a subject and the layers of reality
+ the subject is immersed in. In a multi-reality experience the subject has access to multiple layers of reality and
+ their corresponding world models simultaneously.", br!,
+ "Depending on the specific experience, different types of and directions for information exchange
+ can exist between these layers and the subject's internal representation of the experience.
+ For the sake of this paper we distinguish only between ", (i "input"), " and ", (i "output"), " data flow (from the
+ perspective of the subject); categorized loosely as information the subject receives from the environment
+ (", (i "input"), ", e.g. visual stimuli) and actions the subject can take to influence the state of the world model
+ (", (i "output"), ", e.g. motor actions) respectively."
+
+ \append p "In the following diagrams, information flow is visualized horizontally, in the region below the dashed line
+ at the bottom of the diagram. The subject's internal mental model and layer of reality are placed on the bottom left
+ side of the diagram.
+ The layers of reality that the subject experiences directly and that mirror it's internal representations are placed
+ on the far right. There may be multiple layers of reality sharing this space, visualized as a vertical stack of
+ layers. Since the subject must necessarily have a complete internal model of the multi-reality experience around
+ him to feel immersed, the subject's mental layer of reality must span the full height of all the layers visible
+ on the right side of the diagram.", br!,
+ "Information flow itself is now visualized concretely using arrows that cross layer boundaries in the lower part of
+ the diagram as described above. Arrows pointing leftwards denote ", (i "input"), " flow, whilst arrows pointing
+ rightwards denote ", (i "output"), "-directed information flow. In some cases information doesn't flow directly
+ between the layers the subject is directly aware of and the subject's internal representation and instead
+ traverses ", (i "intermediate layers"), " first."
+
+ \append p "Before we take a look at some reality stacks corresponding to current VR and AR technology,
+ we can take a look at waking life as a baseline stack. To illustrate the format of the diagram we will compare it
+ to the stack corresponding to a dreaming state:"
+
+ \append with figures!
+ \append addlabel "Waking Life", Diagram =>
+ @mind!
+ @inout!
+ @phys!
+
+ @next!
+ @phys '', 2
+ @finish!
+
+ \append addlabel "Dreaming", Diagram =>
+ @mind!
+ @phys!
+ @finish!
+
+ \append p "In both cases, the top of the diagram is fully occupied by the physical layer of reality, colored in green.
+ This is due to the fact that, according to the materialistic theory of mind, human consciousness owes its existance
+ to the physical and chemical dynamics of neurons in our brains. Therefore our mental reality must be considered
+ fully embedded in the physical reality, and consequently it may only appear underneath it in the diagram."
+
+ \append p "During waking life, we concern ourselves mostly with the physical reality surrounding us.
+ For this reason the physical reality is placed in the lower right corner of the diagram as the layer holding the
+ external world model relevant to the subject. Information flows in both directions between the physical world model
+ and the subject's mental model, as denoted by the two white arrows: Information about the state of the world model
+ enter the subjects mind via the senses (top arrow, pointing leftwards), and choices the subject makes inside of and
+ based on his mental model can feed back into the physical layer through movements (lower arrow, pointing rightwards)."
+
+ \append p "In the dreaming state on the other hand, the subject is unaware of the physical layer of reality, though
+ the mind remains embedded inside it. When dreaming, subjects' mental models don't depend on external models, hence
+ the mental layer of reality must be the only layer along the bottom of the diagram."
+
+ \append with sect "Current Technologies"
+ \append p "Since recent technological advancements have enabled the development of VR and AR consumer devices,
+ AR and VR have been established as the potential next frontier of digital entertainment.", br!,
+ "As the names imply, the notion of reality is at the core of both technologies.
+ In the following section we will take a look at the respective stacks of both experience types:"
+
+ \append with figures!
+ \append addlabel "VR", Diagram =>
+ @mind!
+ @phys!
+ @inout nil, 1
+
+ @next!
+ @phys '', 2
+ @inout nil, 1
+
+ @next!
+ @digi!
+ @phys ''
+ @finish!
+
+
+ \append addlabel "AR", Diagram =>
+ @mind!
+ @inout nil, 1.25
+ @inn nil, 0.5
+ @phys!
+
+ @next!
+ @phys '', 2
+ @inn nil, .5
+
+ @next!
+ @digi nil, .5
+ @phys '', 1.5
+ @finish!
+
+ \append p "In both cases we find the physical layer of reality as an ", (i "intermediate layer"), " between the mental
+ and digital layers. Actions taken by the subject have to be acted out physically (corresponding to the
+ information traversing the barrier between mental and physical reality) before they can be again digitized using
+ the various tracking and input technologies (which in turn carry the information across the boundary of the physical
+ and digital spaces)."
+
+ \append p "The difference between AR and VR lies in the fact that in AR the subject experiences a mixture of the
+ digital and physical world models. This can be seen in the diagram, where we find that right of the diagram origin
+ and the mental model, the diagram splits and terminates in both layers: while information reaches the subject both
+ from the digital reality through the physical one, as well as directly from the physical reality, the subject only
+ directly manipulates state in the physical reality."
+
+ \append p "The data conversions necessary at layer boundaries incur at the least losses in quality and accuracy of
+ information for purely technical reasons. However ", (i "intermediate layers"), " come at a cost larger than just
+ an additional step of conversion:
+ For information to flow through a layer, it must be encodable within that layer’s world model.
+ This means that the 'weakest link' in a given reality stack determines the upper bound of information possible to
+ encode within said stack and thereby limits the overall expressivity of the stack.", br!,
+ "As a practical example we can consider creating an hypothetical VR application that allows users to traverse a
+ large virtual space by flying. While the human mind is perfectly capable of imagining to fly and control the motion
+ appropriately, it is extremely hard to devise and implement a satisfying setup and control scheme because the
+ physical body of the user needs to be taken into account and it, unlike the corresponding representations in the
+ mental and digital world models, cannot float around freely."
+
+ \append with sect "Future Developments"
+ \append p "In the previous section we found that the presence of the physical layer in the information path of
+ VR and AR stacks limits the experience as a whole. It follows that the removal of that indirection should be
+ an obvious goal for future developments:"
+
+ \append figures addlabel "holy grail of VR: 'The Matrix'", Diagram =>
+ @mind!
+ @inout!
+ @phys!
+
+ @next!
+ @digi!
+ @phys ''
+ @finish!
+
+ \append p "In the action movie 'The Matrix' ", (ref 'Matrix'), ", users of the titular VR environment interface with it
+ by plugging cables into implanted sockets that connect the simulation directly to their central nervous system.", br!,
+ "While these cables and implanted devices are physical devices, they don't constitute the presence of the
+ physical layer of reality in the information path because while they do transmit information, the information
+ remains in either the encoding of the mental model (neural firing patterns) or the encoding of the digital model
+ (e.g. a numeric encoding of a player character's movement in digital space) and the conversion is made directly
+ between those two - the data never assumes the native encoding of the physical layer (e.g. as a physical motion)."
+
+ \append p "While we are currently far from being able to read arbitrary high-level information from the brain
+ or to synthesize sensual input in human perception by bypassing the sensory organs, brain-computer interfaces (BCI)
+ are a very active area of research with high hopes for comparable achievements in the near future."
+
+ \append p "Applying this same step of removing the physical layer of reality from AR, we end up with something similar
+ to the nano-particle drug in ", (i "Nexus"), " ", (ref 'Naam'), ". However this does not grant the user a similar
+ amount of control over his experience as the holy grail of VR does, since the user and the physical part of the
+ environment remain bound by the physical layer of reality's laws.", br!,
+ "Instead the holy grail of AR is reached with the creation of a god machine that can manipulate the state of the
+ physical world according to the user's wishes. In this way the digital and physical realities become unified and
+ fully 'augmented'."
+
+ \append with figures!
+ \append addlabel "'Nexus'", Diagram =>
+ @mind!
+ @inout nil, 0.75
+ @inout nil, 1.25
+ @phys!
+
+ @next!
+ @digi nil, .5
+ @phys '', 1.5
+ @finish!
+
+ \append addlabel "holy grail of AR: 'Deus Machina'", Diagram =>
+ col = '#92807c'
+
+ @mind!
+ @inout!
+ @block col, ''
+
+ @next!
+ @block col, '', 2
+ @svg\plain('phys + digi')\attr(o fill: 'white', 'font-size': '14px')\move 6, -2 * GRID_H
+ @finish!
+
+ \append p "Despite the similarities of VR and AR, the two can be considered polar opposites, as becomes evident when
+ we compare their respective utopian implementations: they share the goal of allowing us to experience realities
+ different from the one we naturally inhabit, but while VR seeks to accomplish this by creating a new, nested reality
+ inside ours, thus giving us full control over it.
+ AR, on the other hand, is instead an attempt to retrofit our specific needs directly into the very reality we exist
+ in.", br!,
+ "This is in direct contrast with the popular notion of the 'reality-virtuality continuum' ", (ref 'Milgram'), ":
+ the reality-virtuality continuum places common reality and VR (virtuality) as the two extreme poles, while AR
+ is represented as an intermediate state between the two. Here however we propose to view instead AR and VR as the
+ respective poles and find instead reality at the centerpoint, where the two opposing influences 'cancel out'."
+
+ \append with sect "Conclusion and Further Work"
+ \append p "In this paper we have proposed a taxonomy and visualization style for multi-reality experiences, as well
+ as demonstrated it's flexibility by applying them as examples. Through the application of the proposed theory,
+ we have also gained a new and contrasting view on preceding work such as the reality-virtuality-continuum.
+ We have also found that the taxonomy can be used outside the research field of media studies and its use may extend
+ as far as philosophy of consciousness (see Appendix below)."
+
+ \append p "Further research could enhance the proposed theory with better and more concrete definitions.
+ In the future, the proposed taxonomy might be used to create a more extensive and complete classification
+ of reality stacks and to analyse the relationships between them."
+
+ \append with sect 'References'
+ \append references!
+
+ \append with sect "Appendix: Relation to Theories of Mind"
+ \append p "This paper starts from a deeply materialistic point of view that borders on microphysicalism.
+ However it should be noted that the diagram style introduced above lends itself also to display other
+ philosophical theories of mind. As an example, the following graphics show a typical VR stack as interpreted by
+ Materialism, Cartesian Dualism and Solipsism respectively:"
+
+ \append with figures!
+ \append addlabel "VR in Materialism", Diagram =>
+ @mind!
+ @inout nil, 1
+ @phys!
+
+ @next!
+ @phys '', 2
+ @inout nil, 1
+
+ @next!
+ @digi!
+ @phys ''
+
+ @finish!
+
+ \append addlabel "VR in Solipsism", Diagram =>
+ @mind nil, 2
+ @inout nil, 1
+
+ @next!
+ @digi!
+ @mind ''
+ @finish!
+
+ \append addlabel "VR in Cartesian Dualism", Diagram =>
+ @mind nil, 2
+ @inout nil, 1
+ @next!
+
+ @phys nil, 2
+ @inout nil, 1
+ @next!
+
+ @digi!
+ @phys ''
+ @finish!
+
+ \append p "However these philosophical theories of minds also constitute reality stacks by themselves and as such can
+ be compared directly:"
+
+ \append with figures!
+ \append addlabel "Materialism", Diagram =>
+ @mind!
+ @inout!
+ @phys!
+
+ @next!
+ @phys '', 2
+ @finish!
+
+ \append addlabel "Solipsism", Diagram =>
+ @mind!
+ @finish!
+
+ \append addlabel "Cartesian Dualism", Diagram =>
+ @mind!
+ @inout!
+ @next!
+
+ @phys!
+ @finish!
+}
diff --git a/root/experiments/center_of_mass.moon b/root/experiments/center_of_mass.moon
new file mode 100644
index 0000000..e5eceab
--- /dev/null
+++ b/root/experiments/center_of_mass.moon
@@ -0,0 +1,179 @@
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+
+with Fileder {
+ 'name: alpha': 'center_of_mass',
+ 'description: text/plain': "Fonts sorted by Center-of-Mass",
+}
+
+ if MODE == 'CLIENT'
+ import CanvasApp from require 'lib.canvasapp'
+ import rgb from require 'lib.color'
+ import article, h1, p, div, span, input, button from require 'lib.dom'
+
+ fast = true
+ center = true
+ center_char = do
+ canvas = document\createElement 'canvas'
+ ctx = canvas\getContext '2d'
+
+ cache = {}
+
+ (char, font, height) ->
+ name = "#{char} #{height} #{font}"
+ return table.unpack cache[name] if cache[name]
+
+ ctx\resetTransform!
+ ctx.font = "#{height}px #{font}"
+ width = (ctx\measureText char).width
+ canvas.width, canvas.height = width, height * 1.2
+
+ ctx.font = "#{height}px #{font}"
+ ctx.textBaseline = 'top'
+ ctx.fillStyle = rgb 0, 0, 0
+ ctx\fillText char, 0, 0
+
+ data = ctx\getImageData 0, 0, width, height * 1.2
+
+ local xx, yy
+ if fast
+ loop = window\eval '(function(data) {
+ var xx = 0, yy = 0, n = 0;
+ for (var x = 0; x < data.width - 1; x++) {
+ for (var y = 0; y < data.height - 1; y++) {
+ var i = y * (data.width * 4) + x * 4;
+ var alpha = data.data[i + 3] / 255;
+ xx += x * alpha;
+ yy += y * alpha;
+ n += alpha;
+ }
+ }
+
+ xx /= n;
+ yy /= n;
+ return [xx, yy];
+ })'
+ res = loop nil, data
+ xx, yy = res[0], res[1]
+ else
+ xx, yy, n = 0, 0, 0
+ for x = 0, data.width - 1
+ for y = 0, data.height - 1
+ i = y * (data.width * 4) + x * 4
+ alpha = data.data[i + 3] / 255
+ xx += x * alpha
+ yy += y * alpha
+ n += alpha
+
+ xx /= n
+ yy /= n
+ cache[name] = { xx, yy, width }
+ xx, yy, width
+
+ class CenterOfMass extends CanvasApp
+ width: window.innerWidth - 20
+ height: 300
+ new: (text, @font, @size) =>
+ super!
+ @text = {}
+ for i = 1,#text
+ @add text\sub i, i
+
+ add: (char) =>
+ rcx, rcy, w = center_char char, @font, @size
+ cx, cy = w/2, @size/2
+ vx, vy = 0, 0
+ table.insert @text, {
+ :char, :rcx, :rcy, :w
+ :cx, :cy, :vx, :vy
+ }
+
+ refresh: =>
+ for char in *@text
+ char.rcx, char.rcy, char.w = center_char char.char, @font, @size
+
+ keydown: (key) =>
+ if key == "Backspace" or key == "Delete"
+ table.remove @text
+ elseif string.len(key) == 1
+ @add key
+
+ update: (dt) =>
+ super dt
+
+ ACCEL = 4 * dt
+ DAMPING = 8 * dt
+
+ for char in *@text
+ { :rcx, :rcy, :cx, :cy, :w } = char
+ if not center
+ rcx, rcy = w/2, @size/2
+ dx, dy = rcx - cx, rcy - cy
+ char.vx += dx * ACCEL
+ char.vy += dy * ACCEL
+ char.cx += char.vx
+ char.cy += char.vy
+ char.vx *= DAMPING
+ char.vy *= DAMPING
+
+ draw: =>
+ @ctx\clearRect 0, 0, @width, @height
+
+ @ctx.font = "#{@size}px #{@font}"
+ @ctx.textBaseline = 'top'
+
+ x, y = @size * .1, @size
+ for { :char, :cx, :cy, :w } in *@text
+ if x + w > @width
+ x = 0
+ y += @size * 1.2
+
+ @ctx\fillText char, x + w/2 - cx, y - cy
+ x += w
+
+ .props['moon -> mmm/dom'] = ->
+ _content = {}
+ append = (x) -> table.insert _content, x
+
+ append h1 'Fonts aligned by Center-of-Mass'
+ app = CenterOfMass "Click here and type Away!", "Times New Roman", 40
+ append app.canvas
+ app.canvas.style.backgroundColor = '#eee'
+
+ add = =>
+ append div {
+ span 'font: ',
+ with @font_input = input!
+ .type = 'text'
+ .value = 'Times New Roman'
+ with button 'set'
+ .onclick = (_, e) ->
+ app.font = @font_input.value
+ app\refresh!
+ }
+
+ append div {
+ span 'size: ',
+ input type: 'range', min: 2, max: 120, value: 40, onchange: (_, e) ->
+ size = e.target.value
+ @size_label.innerText = size
+ app.size = size
+ app\refresh!
+ with @size_label = span '40'
+ ''
+ }
+
+ append div {
+ span 'center characters by weight: ',
+ input type: 'checkbox', checked: center, onchange: (_, e) ->
+ center = e.target.checked
+ }
+
+ append div {
+ span 'optimize inner loop: ',
+ input type: 'checkbox', checked: fast, onchange: (_, e) ->
+ fast = e.target.checked
+ }
+ add {}
+
+ article _content
diff --git a/root/experiments/init.moon b/root/experiments/init.moon
new file mode 100644
index 0000000..0beb78c
--- /dev/null
+++ b/root/experiments/init.moon
@@ -0,0 +1,26 @@
+import div, h3, ul, li, a from require 'lib.dom'
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+require = relative ...
+
+Fileder {
+ 'name: alpha': 'experiments',
+ 'title: text/plain': 'various experiments',
+ 'moon -> mmm/dom': (path) => div {
+ h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+ ul for child in *@children
+ name = child\gett 'name: alpha'
+ desc = child\gett 'description: text/plain'
+ li {
+ a name, {
+ href: child.path,
+ onclick: (e) =>
+ e\preventDefault!
+ BROWSER\navigate "animations | #{name}",
+ },
+ ': ', desc
+ }
+ }
+
+ require '.center_of_mass'
+}
diff --git a/app/tags/init.moon b/root/experiments/tags/init.moon
index e3198f8..e3198f8 100644
--- a/app/tags/init.moon
+++ b/root/experiments/tags/init.moon
diff --git a/app/tags/tags.moon b/root/experiments/tags/tags.moon
index 198392e..198392e 100644
--- a/app/tags/tags.moon
+++ b/root/experiments/tags/tags.moon
diff --git a/root/init.moon b/root/init.moon
new file mode 100644
index 0000000..a2eab3b
--- /dev/null
+++ b/root/init.moon
@@ -0,0 +1,68 @@
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+require = relative ...
+
+Fileder {
+ 'name: alpha': '',
+ 'moon -> mmm/dom': =>
+ import article, h1, h3, div, b, p, a, br, ul, tt, li, img from require 'lib.dom'
+ import opairs from require 'lib.ordered'
+
+ append, finish = do
+ content = {}
+
+ append = (stuff) -> table.insert content, stuff
+ append, -> article content
+
+ moon = '\xe2\x98\xbd'
+
+ iconlink = (href, src, alt, style) -> a {
+ class: 'iconlink',
+ :href,
+ target: '_blank',
+ img :src, :alt, :style
+ }
+
+ -- menu
+ append h1 {
+ style: {
+ position: 'relative',
+ 'border-bottom': '1px solid #000'
+ },
+ 'mmm',
+ div {
+ class: 'icons',
+ iconlink 'https://github.com/s-ol/mmm', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg',
+ iconlink 'https://twitter.com/S0lll0s', 'https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/twitter.svg',
+ iconlink 'https://webring.xxiivv.com/#random', 'https://webring.xxiivv.com/icon.black.svg', 'webring',
+ { height: '0.9em', 'margin-left': '.04em' }
+ }
+ }
+
+ append p {
+ tt 'mmm'
+ ' is not the '
+ tt 'www'
+ ', because it runs on '
+ a { 'MoonScript', href: 'https://moonscript.org' }
+ '.'
+ br!
+ 'You can find the source code of everything '
+ a { 'here', href: 'https://github.com/s-ol/mmm' }
+ '.'
+ }
+
+ for child in *@children
+ append (child\get 'preview: mmm/dom') or child\get 'mmm/dom'
+
+ append p {
+ "made with #{moon} by "
+ a { 's-ol', href: 'https://twitter.com/S0lll0s' }
+ }
+
+ finish!
+
+ require '.articles'
+ require '.animations'
+ require '.experiments'
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-08-16 14:27:48 +0000