aboutsummaryrefslogtreecommitdiffstats
path: root/root
diff options
context:
space:
mode:
Diffstat (limited to 'root')
-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.moon285
-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.moon89
-rw-r--r--root/experiments/tags/tags.moon146
-rw-r--r--root/init.moon68
12 files changed, 1614 insertions, 0 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/root/articles/mmmfs/init.moon b/root/articles/mmmfs/init.moon
new file mode 100644
index 0000000..8193356
--- /dev/null
+++ b/root/articles/mmmfs/init.moon
@@ -0,0 +1,285 @@
+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
+ -- resolves to a value of type mmm/dom
+ 'moon -> mmm/dom': () =>
+ html = require 'lib.dom'
+ import article, h1, h2, h3, p, div, a, sup, ol, li, span, code, pre, br from html
+
+ moon = if MODE == 'SERVER'
+ (str) -> code (str\match '^ *(..-) *$'), class: 'hljs'
+ else
+ (str) ->
+ result = window.hljs\highlight 'moonscript', (str\match '^ *(..-) *$'), true
+ with code class: 'hljs'
+ .innerHTML = result.value
+
+ article with _this = {}
+ append = (a) -> table.insert _this, a
+
+ footnote, getnotes = do
+ local *
+ notes = {}
+
+ id = (i) -> "footnote-#{i}"
+
+ footnote = (stuff) ->
+ i = #notes + 1
+ notes[i] = stuff
+ sup a "[#{i}]", style: { 'text-decoration': 'none' }, href: '#' .. id i
+
+ footnote, ->
+ args = for i, note in ipairs notes
+ li (span (tostring i), id: id i), ': ', note
+ notes = {}
+ table.insert args, style: { 'list-style': 'none', 'font-size': '0.8em' }
+ ol table.unpack args
+
+ append h1 'mmmfs', style: { 'margin-bottom': 0 }
+ -- @TODO: s/filesystem/a way of organizing files/g
+ append p "a file and operating system to live in", style: { 'margin-top': 0, 'margin-bottom': '1em' }
+
+ -- @TODO: motivation / outline problem + need
+ -- @TODO: quote http://pchiusano.github.io/2013-05-22/future-of-software.html on Applications
+
+ append p do
+ fileder = footnote "fileder: file + folder. 'node', 'table' etc. are too general to be used all over."
+
+ -- @TODO: mention:
+ -- can store anything - text, an image, a link to a website or video,
+ -- a program and anything else you can think of.
+ "in mmmfs, directories, files and applications are all kind of the same thing, or something like that.
+ Listen, I don't really know yet either. The idea is that there is only one type of 'thing' -
+ a fileder", fileder, ". A fileder can store multiple variants and metadata of its content,
+ such as a markdown text and a rendered HTML version of the same document.
+ It could also store a script that transforms the markdown version into HTML and is executed on demand,
+ automatically."
+
+ append p "Fileders can also have other fileders as their children (just like directories do in a normal
+ filesystem). You can make a fileder view query these children and display them however you want.
+ A 'Pictures' fileder, for example, could contain a script within itself that renders all the picture files
+ you put into it as little previews and lets you click on them to view the full image."
+
+ append p "This means the 'Pictures' fileder can also have an alternate slideshow mode, with fullscreen view and
+ everything (some of this is built, check out the gallery example below), or one that displays geotagged images
+ on a world map, if you really want that. Maybe you could build a music folder that contains links to youtube
+ videos, spotify tracks and just plain mp3 files, and the folder knows how to play them all.", br!, "
+ In this way fileders fulfil the purpose of 'Applications' too."
+
+ -- @TODO: BUT doesn't have to be only for one type of file:
+ -- @TODO: rework
+ -- making a multi-media collage representing your thoughts and mental organization of a topic
+ append p "A fileder is also responsible for how it's children are sorted, filtered and interacted with.
+ For example you should be able to create a fileder that is essentially a 'word document' equivalent: it can
+ contain images, websites, links and of course text as children and let you reorder, layout and edit them
+ whenever you open the fileder."
+
+ append p "Sounds cool, no? Here's some examples of things a fileder can be or embed:"
+
+ -- render a preview block
+ 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'
+
+ 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',
+ },
+ }
+
+
+ append div for child in *@children
+ preview child
+
+ append h2 "details"
+ -- @TODO s/parts: dimensions, aspects?
+ -- @TODO: first mention both properties & children; then go into detail
+ -- @TODO: main content
+ append do
+ name = html.i 'name'
+ type = html.i 'type'
+
+ p "Fileders are made up of two main parts. The first is the list of ", (html.i 'properties'), ",
+ which are values identified by a ", name, " and ", type, ". These values are queried using strings like ",
+ (code 'title: text/plain'), " or ", (code 'mmm/dom'), ", which describe both the ", name,
+ " of a property (", (moon '"title"'), " and ", (moon '""'), ", the unnamed/main property) and the ", type,
+ " of a property. Property types can be something resembling a MIME-type or a more complex structure
+ (see ", (html.i "type chains"), " below). A fileder can have multiple properties of different types
+ set that share a ", name, ". In this case the overlapping properties are considered equivalent and the one
+ with the most appropriate ", type, " is selected, depending on the query.
+ The unnamed property is considered a fileder's 'main content', i.e. what you are interested in when viewing it."
+
+ append p "The second part of a fileder is the list of it's children, which are fileders itself.
+ The children are stored in an ordered list and currently identified by their ", (code 'name: alpha'),
+ " property for UI and navigation purposes only (not sure if this is a good idea tbh)."
+
+-- append do
+-- github = footnote a 's-ol/mmm', href: 'https://github.com/s-ol/mmm/tree/master/app/mmmfs'
+-- "Oh and also everything is on github and stuff", github,
+-- " if you care about that."
+
+ append do
+ mmmdom = code ('mmm/dom'), footnote span (code 'mmm/dom'), " is a polymorphic content type;
+ on the server it is just an HTML string (like ", (code 'text/html'), "),
+ but on the client it is a JS DOM Element instance."
+
+ p "What you are viewing right now is the main property of the root fileder.
+ The property is queried as ", mmmdom, ", a website fragment (DOM node). This website fragment
+ is then added to the page in the main content area, where you are most likely reading it right now."
+
+ p "Anyway, this node is set up as a very generic sort of index thing and just lists its children-fileders'
+ alongside this text part you are reading.", br!, "For each child it displays the ", (code 'title: text/plain'),
+ " and shows the ", (code 'preview: mmm/dom'), " property (if set)."
+
+ append h3 "converts"
+ append p "So far I have always listed properties as they are being queried, but a main feature of mmmfs is
+ type conversion. This means that you generally ask for content in whichever format suits your application,
+ and rely on the type resolution mechanism to make that happen."
+
+ append pre moon [[
+-- render a preview block
+preview = (title, content) -> div {
+ h3 title, style: { ... },
+ content or span '(no renderable content)', style: { ... },
+ style: { ... }
+}
+
+append div for child in *@children
+ -- 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'
+
+ preview title, content
+ ]]
+
+ append p "Here the code that renders these previews. You can see it ", (html.i "asks"), " for the
+ properties ", (code 'title: text/plain'), ' and ', (code 'preview: mmm/dom'), "), but the values don't actually have to
+ be ", (html.i "defined"), " as these types.
+ For example, the markdown child below only provides ", (code 'preview'), " as ", (code 'text/markdown'), ":"
+
+ append pre moon [[
+Fileder {
+ 'title: text/plain': "I'm not even five lines of markdown but i render myself!",
+ 'preview: text/markdown': "See I have like
+
+- a list of things
+- (two things)
+
+and some bold **text** and `code tags` with me.",
+}
+ ]]
+
+ append p "Then, globally, there are some conversion paths specified; such as one that maps from ",
+ (code 'text/markdown'), " to ", (code 'mmm/dom'), ":"
+
+ append pre moon [[
+{
+ inp: 'text/markdown',
+ out: 'mmm/dom',
+ transform: (md) ->
+ -- polymorphic client/serverside implementation here,
+ -- uses lua-discount on the server, marked.js on the client
+}
+ ]]
+
+ append h3 "type chains"
+ append p "In addition, a property type can be encoded using multiple types in a ", (code 'type chain'), ".
+ For example the root node you are viewing currently is actually defined as ", (code 'moon -> mmm/dom'), ",
+ meaning it's value is a pre moon function returing a regular ", (code 'mmm/dom'), " value."
+
+ append p "Both value chains and 'sideways' converts are resolved using the same mechanism,
+ so this page is being rendered just using ", (moon "append root\\get 'mmm/dom'"), " as well.
+ The convert that resolves the moon type is defined as follows:"
+
+ append pre moon [[
+{
+ inp: 'moon -> (.+)',
+ out: '%1',
+ transform: (val, fileder) -> val fileder
+}
+ ]]
+
+ append p "The example with the image is curious as well. In mmmfs, you might want to save a link to an image,
+ without ever saving the actual image on your hard drive (or wherever the data may ever be stored - it is
+ quite transient currently). The image Fileder below has it's main (unnamed) value tagged as ",
+ (code 'URL -> image/png'), " - a png image, encoded as an URL. When accessed as ", (code 'image/png'), "
+ the URL should be resolved, and the binary data provided in it's place (yeah right - I haven't build that yet)."
+
+ append p "However, if a script is aware of URLs and knows a better way to handle them, then it can ask for and
+ use the URL directly instead.
+ This is what the image demo does in order to pass the URL to an ", (code 'img'), " tag's ", (code 'src'), " attribute:"
+
+ append pre moon [[
+Fileder {
+ 'title: text/plain': "Hey I'm like a link to picture or smth",
+ 'URL -> image/png': 'https://picsum.photos/200?random',
+ 'preview: moon -> mmm/dom': =>
+ import img from require 'lib.dom'
+ img src: @gett 'URL -> image/png' -- look for main content with 'URL to png' type
+}
+ ]]
+
+ append getnotes!
+
+ 'text/markdown': "this is a markdown version or something.
+
+There's no content here so switch back to the real one!
+(Assuming there is a switching UI by the time you are reading this, which I assume since you are reading this at all.
+If you are reading this in the source, then c'mon, just scroll past and give me a break.)
+
+(the switching UI has now been built.)"
+
+ Fileder {
+ 'name: alpha': 'empty',
+ 'title: text/plain': "Hey I'm an ad-hoc child with no content at all",
+ }
+
+ Fileder {
+ 'name: alpha': 'image',
+ 'title: text/plain': "Hey I'm like a link to picture or smth",
+
+ -- main content is image/png, to be interpreted by URL to access
+ 'URL -> image/png': 'https://picsum.photos/200?random',
+
+ -- preview is a lua/pre moon function that neturns an mmm/dom value
+ 'preview: moon -> mmm/dom': =>
+ import img from require 'lib.dom'
+ img src: @gett 'URL -> image/png' -- look for main content with 'URL to png' type
+ }
+
+ Fileder {
+ 'name: alpha': 'markdown',
+ 'title: text/plain': "I'm not even five lines of markdown but i render myself!",
+
+ -- preview can be rendered using global convert
+ 'preview: text/markdown': "See I have like
+
+- a list of things
+- (two things)
+
+and some bold **text** and `code tags` with me.",
+ }
+
+ require '.gallery',
+}
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/root/experiments/tags/init.moon b/root/experiments/tags/init.moon
new file mode 100644
index 0000000..e3198f8
--- /dev/null
+++ b/root/experiments/tags/init.moon
@@ -0,0 +1,89 @@
+on_client ((...) ->
+ require = relative ...
+ import add_tag, rmv_tag, Node, Hierarchy, Toggle, NamespacedToggle from require '.tags'
+ import ReactiveVar, append, tohtml, text, elements from require 'lib.component'
+ import div, form, span, h3, a, input, textarea, button from elements
+
+ clone = (set) ->
+ assert set and 'table' == (type set), 'not a set'
+ { k,v for k,v in pairs set }
+ set_append = (val) -> (set) ->
+ with copy = clone set
+ copy[val] = val
+ set_remove = (val) -> (set) ->
+ with copy = clone set
+ copy[val] = nil
+ set_join = (tbl, sep=' ') ->
+ ret = ''
+ for tag in pairs tbl
+ ret ..= (tostring tag) .. sep
+ ret
+
+ entries = div!
+ append entries
+
+ class ReactiveNode extends Node
+ new: (...) =>
+ super ...
+ @tags = ReactiveVar @tags
+ @_node = div {
+ span @name, style: { 'font-weight': 'bold' },
+ @tags\map (tags) -> with div!
+ for tag,_ in pairs tags
+ \append a (text tag), href: '#', style: {
+ display: 'inline-block',
+ margin: '0 5px',
+ }
+ }
+ @node = tohtml @_node
+
+ has: (tag) => @tags\get![tag]
+ add: (tag) => @tags\transform set_append tag
+ rmv: (tag) => @tags\transform set_remove tag
+
+ rules = {
+ Hierarchy 'home', 'sol'
+ Hierarchy 'sol', 'desktop'
+ Hierarchy 'desktop', 'vacation'
+ Hierarchy 'desktop', 'documents'
+ NamespacedToggle 'documents', 'work', 'personal'
+ -- Toggle 'work', 'personal'
+ -- Hierarchy 'documents', 'work'
+ -- Hierarchy 'documents', 'personal'
+ }
+
+ pictures = for i=1,10
+ with node = ReactiveNode "picture#{i}.jpg"
+ entries\append node
+ add_tag node, 'vacation'
+
+ pers = ReactiveNode 'mypersonalfile.doc'
+ entries\append pers
+
+ append div do
+ yield = coroutine.yield
+ step = coroutine.wrap ->
+ yield "mark document"
+ add_tag pers, 'documents'
+
+ yield "mark personal"
+ add_tag pers, 'personal'
+
+ yield "mark work"
+ add_tag pers, 'work'
+
+ yield "unmark work"
+ rmv_tag pers, 'work'
+
+ yield "remove from documents"
+ rmv_tag pers, 'documents'
+
+ yield false
+
+ next_step = ReactiveVar step!
+ next_step\map (desc) ->
+ if desc
+ button (text desc), onclick: (e) => next_step\set step!
+ else
+ text ''
+), ...
diff --git a/root/experiments/tags/tags.moon b/root/experiments/tags/tags.moon
new file mode 100644
index 0000000..198392e
--- /dev/null
+++ b/root/experiments/tags/tags.moon
@@ -0,0 +1,146 @@
+join = (tbl, sep) ->
+ ret = ''
+ for tag in pairs tbl
+ ret ..= (tostring tag) .. sep
+ ret
+
+handlers = {
+ add: {}
+ rmv: {}
+}
+
+class Node
+ new: (@name) =>
+ @tags = {}
+
+ inspect: =>
+ "#{@name}: [#{join @tags, ' '}]"
+
+ has: (tag) => @tags[tag]
+ add: (tag) => @tags[tag] = tag
+ rmv: (tag) => @tags[tag] = nil
+
+any = -> true
+literal = (def) -> (val) -> def == val
+oneof = (defs) -> (val) ->
+ for def in *defs
+ return true if def == val
+ false
+has = (tag) -> (node) -> node\has tag
+
+add_tag = (node, tag) ->
+ return if node\has tag
+ node\add tag
+ for hand, _ in pairs handlers.add
+ hand\match node, tag
+
+rmv_tag = (node, tag) ->
+ return if not node\has tag
+ node\rmv tag
+ for hand, _ in pairs handlers.rmv
+ hand\match node, tag
+
+class Handler
+ new: (@rule, @action, match, @func) =>
+ @args = for arg in *match
+ if 'string' == type arg
+ literal arg
+ elseif 'table' == type arg
+ oneof arg
+ else
+ arg
+
+ match: (...) =>
+ supplied = { ... }
+ assert #supplied == #@args, 'length of arguments doesnt match'
+ for i = 1, #supplied
+ return false if not @args[i] supplied[i]
+
+ @.func @rule, ...
+
+ name: => "#{@rule.name}:#{@action}"
+
+class Rule
+ new: (@name="#{@@__name}") =>
+ @owned_handlers = {}
+
+ hook: (action, ...) =>
+ handler = Handler @, action, ...
+ table.insert @owned_handlers, handler
+ handlers[action][handler] = handler
+
+ destroy: =>
+ for hand in *@owned_handlers
+ handlers[hand.action][hand] = nil
+
+class Hierarchy extends Rule
+ new: (@parent, @child) =>
+ super!
+
+ -- when something is tagged with the child-tag, apply the parent tag
+ @hook 'add', { any, @child }, (node) =>
+ add_tag node, @parent
+
+ -- when child tag is removed, remove parent tag
+ @hook 'rmv', { any, @child }, (node) =>
+ rmv_tag node, @parent
+
+ -- when parent tag is removed, remove child tag
+ @hook 'rmv', { any, @parent }, (node) =>
+ rmv_tag node, @child
+
+class Toggle extends Rule
+ new: (@a, @b) =>
+ super!
+
+ either = { @a, @b }
+ opposite = (tag) -> if tag == @a then @b else @a
+
+ -- when a is added, remove b and vice-versa
+ @hook 'add', { any, either }, (node, tag) =>
+ rmv_tag node, opposite tag
+
+ -- when a is removed, add b and vice-versa
+ @hook 'rmv', { any, either }, (node, tag) =>
+ add_tag node, opposite tag
+
+class NamespacedToggle extends Rule
+ new: (@ns, @a, @b) =>
+ super!
+
+ namespaced = has @ns
+ either = { @a, @b }
+ opposite = (tag) -> if tag == @a then @b else @a
+
+ -- when node enters namespace, add default tag
+ @hook 'add', { any, @ns }, (node) =>
+ add_tag node, @a
+
+ -- when node leaves namespace, remove tags
+ @hook 'rmv', { any, @ns }, (node) =>
+ rmv_tag node, @a
+ rmv_tag node, @b
+
+ -- when a is added, remove b and vice-versa
+ @hook 'add', { namespaced, either }, (node, tag) =>
+ rmv_tag node, opposite tag
+
+ -- when a is removed, add b and vice-versa
+ @hook 'rmv', { namespaced, either }, (node, tag) =>
+ add_tag node, opposite tag
+
+{
+ :Node,
+ :Rule,
+
+ :any,
+ :literal,
+ :oneof,
+ :has,
+ :add_tag,
+ :rmv_tag,
+
+ :Hierarchy,
+ :Toggle,
+ :NamespacedToggle,
+}
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-05-21 10:59:09 +0000