diff options
Diffstat (limited to 'root/animations')
| -rw-r--r-- | root/animations/init.moon | 27 | ||||
| -rw-r--r-- | root/animations/koch.moon | 112 | ||||
| -rw-r--r-- | root/animations/koch/description: text$plain | 1 | ||||
| -rw-r--r-- | root/animations/koch/text$moonscript -> mmm$component.moon | 104 | ||||
| -rw-r--r-- | root/animations/text$moonscript -> fn -> mmm$dom.moon | 18 | ||||
| -rw-r--r-- | root/animations/title: text$plain | 1 | ||||
| -rw-r--r-- | root/animations/twisted.moon | 51 | ||||
| -rw-r--r-- | root/animations/twisted/description: text$plain | 1 | ||||
| -rw-r--r-- | root/animations/twisted/text$moonscript -> mmm$component.moon | 43 |
9 files changed, 168 insertions, 190 deletions
diff --git a/root/animations/init.moon b/root/animations/init.moon deleted file mode 100644 index ff8ef4b..0000000 --- a/root/animations/init.moon +++ /dev/null @@ -1,27 +0,0 @@ -import div, h3, ul, li, a from require 'mmm.dom' -import define_fileders from require 'mmm.mmmfs' -Fileder = define_fileders ... -require = relative ... - -Fileder { - 'name: alpha': 'animations', - 'title: text/plain': 'canvas animations', - 'fn -> 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 '.twisted' - require '.koch' -} diff --git a/root/animations/koch.moon b/root/animations/koch.moon deleted file mode 100644 index f7927d4..0000000 --- a/root/animations/koch.moon +++ /dev/null @@ -1,112 +0,0 @@ -import define_fileders from require 'mmm.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 'mmm.canvasapp' - import hsl from require 'mmm.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['fn -> mmm/component'] = => KochDemo! diff --git a/root/animations/koch/description: text$plain b/root/animations/koch/description: text$plain new file mode 100644 index 0000000..a0b96e7 --- /dev/null +++ b/root/animations/koch/description: text$plain @@ -0,0 +1 @@ +lil' fractal thing diff --git a/root/animations/koch/text$moonscript -> mmm$component.moon b/root/animations/koch/text$moonscript -> mmm$component.moon new file mode 100644 index 0000000..4f97329 --- /dev/null +++ b/root/animations/koch/text$moonscript -> mmm$component.moon @@ -0,0 +1,104 @@ +assert MODE == 'CLIENT', '[nossr]' +Math = window.Math + +import CanvasApp from require 'mmm.canvasapp' +import hsl from require 'mmm.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! + +KochDemo! diff --git a/root/animations/text$moonscript -> fn -> mmm$dom.moon b/root/animations/text$moonscript -> fn -> mmm$dom.moon new file mode 100644 index 0000000..1c04309 --- /dev/null +++ b/root/animations/text$moonscript -> fn -> mmm$dom.moon @@ -0,0 +1,18 @@ +import div, h3, ul, li, a from require 'mmm.dom' + +=> + 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 + } + } diff --git a/root/animations/title: text$plain b/root/animations/title: text$plain new file mode 100644 index 0000000..4732b34 --- /dev/null +++ b/root/animations/title: text$plain @@ -0,0 +1 @@ +canvas animations diff --git a/root/animations/twisted.moon b/root/animations/twisted.moon deleted file mode 100644 index 00b11c5..0000000 --- a/root/animations/twisted.moon +++ /dev/null @@ -1,51 +0,0 @@ -import define_fileders from require 'mmm.mmmfs' -Fileder = define_fileders ... - -with Fileder { - 'name: alpha': 'twisted', - 'description: text/plain': "pseudo 3d", - } - - if MODE == 'CLIENT' - import CanvasApp from require 'mmm.canvasapp' - import hsl from require 'mmm.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: fn -> mmm/component'] = => TwistedDemo true - .props['fn -> mmm/component'] = => TwistedDemo! diff --git a/root/animations/twisted/description: text$plain b/root/animations/twisted/description: text$plain new file mode 100644 index 0000000..bbd63be --- /dev/null +++ b/root/animations/twisted/description: text$plain @@ -0,0 +1 @@ +pseudo-3d twisting pyramid diff --git a/root/animations/twisted/text$moonscript -> mmm$component.moon b/root/animations/twisted/text$moonscript -> mmm$component.moon new file mode 100644 index 0000000..3fd11b0 --- /dev/null +++ b/root/animations/twisted/text$moonscript -> mmm$component.moon @@ -0,0 +1,43 @@ +assert MODE == 'CLIENT', '[nossr]' +import CanvasApp from require 'mmm.canvasapp' +import hsl from require 'mmm.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: fn -> mmm/component'] = => TwistedDemo true +TwistedDemo! |