+
+
+
+
+
+
+
+
+
+
+
+ <<
+
+
+
-
+
+
@@ -188,13 +192,12 @@
-
-
-
--
-
- levels +
- rules +
- levels
- rules +
-
+
-
-
-
-
-
-
-
-
-
-
-
+
-
-
@@ -354,6 +318,12 @@
return false;
});
+ // show/hide sidebar button
+ $('a.toggle-side').click(function(){
+ $('.container-side').toggleClass('hidden');
+ return false;
+ })
+
setTimeout(function(){
manager.start().always(function(){
//this is kinda naughty... but I'd rather refactor Controls first than fudge this in otherwise
diff --git a/js/lsys-intro.js b/js/lsys-intro.js
index 4067a49..08749f2 100644
--- a/js/lsys-intro.js
+++ b/js/lsys-intro.js
@@ -26,7 +26,7 @@ function mkIntro(){
return {
"element" : step.data('element'),
"intro" : step.html(),
- "position" : step.data('position') || "right",
+ "position" : step.data('position') || "left",
"data" : step.data()
}
});
@@ -46,7 +46,7 @@ function mkIntro(){
if (data.overlay == 'off') $('.introjs-overlay').addClass('hidden');
}).setOptions({
exitOnOverlayClick: true,
- tooltipPosition:'right',
+ tooltipPosition:'left',
showStepNumbers: false,
steps: steps
});
@@ -61,4 +61,4 @@ $('#helpTrigger').click(function(){
$('#syntaxTrigger').click(function(){
mkIntro().start().goToStep(13);
return false;
-});
\ No newline at end of file
+});
From 1d070064a6bc3ef66586c1f5530c4dae9ae7d6c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TG=20=C3=97=20=E2=8A=99?= <*@tg-x.net>
Date: Sat, 9 Nov 2019 23:30:19 +0100
Subject: [PATCH 3/8] export fix
---
coffee/manager.coffee | 2 +-
coffee/util.coffee | 3 +--
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/coffee/manager.coffee b/coffee/manager.coffee
index 1b53127..0f17e62 100644
--- a/coffee/manager.coffee
+++ b/coffee/manager.coffee
@@ -94,7 +94,7 @@ class AppManager
r.context.state.y = (y-b.y1+15)
@draw(r)
- filename = "lsys_"+system.name.replace(/[\ \/]/g,"_")
+ filename = "lsys_"+system.name.replace(/[\ \/]/g,"_")+".png"
rootCanvas = container.children[0]
rootContext = rootCanvas.getContext('2d')
[].slice.call(container.children, 1).forEach( (c) ->
diff --git a/coffee/util.coffee b/coffee/util.coffee
index 166ef67..9abc42e 100644
--- a/coffee/util.coffee
+++ b/coffee/util.coffee
@@ -24,8 +24,7 @@ class Util
a = document.createElement("a")
a.href = data
a.download=filename
- evt = document.createEvent("MouseEvents")
- evt.initMouseEvent("click", true, true,window,0,0,0,0,0,true,false,false,false,0,null)
+ evt = new MouseEvent('click', { view: window })
a.dispatchEvent(evt)
# thanks Brian Nickel http://stackoverflow.com/questions/11163344/update-non-retina-canvas-app-to-retina-display
From ea02fb616449f897ffc328aa7ccd5a7b64918557 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TG=20=C3=97=20=E2=8A=99?= <*@tg-x.net>
Date: Sun, 10 Nov 2019 08:30:15 +0100
Subject: [PATCH 4/8] animation
---
coffee/compilation.coffee | 17 +++++++----
coffee/controls.coffee | 59 +++++++++++++++++++++++++++++++++++++++
coffee/lsystem.coffee | 39 +++++++++++++++++++++++---
coffee/manager.coffee | 55 +++++++++++++++++++++++++++++++++---
css/ui.scss | 57 +++++++++++++++++++++++++++----------
index.html | 57 +++++++++++++++++++++++++++++++------
6 files changed, 247 insertions(+), 37 deletions(-)
diff --git a/coffee/compilation.coffee b/coffee/compilation.coffee
index fb86cff..b20d0db 100644
--- a/coffee/compilation.coffee
+++ b/coffee/compilation.coffee
@@ -1,8 +1,14 @@
-NullSystem = new LSystem({},{},{},"",1,"no system")
-DefaultSystem = new LSystem({
- size: {value:12.27}
- angle: {value:4187.5}
-},{},{ size: {value:9} } ,"L : SS\nS : F->[F-Y[S(L]]\nY : [-|F-F+)Y]\n" ,12 ,"click-and-drag-me!" )
+NullSystem = new LSystem({},{},{},0,"","",1,"no system")
+DefaultSystem = new LSystem(
+ { size: {value:12.27}, angle: {value:4187.5} },
+ {},
+ { size: {value:9} },
+ false,
+ "",
+ "L : SS\nS : F->[F-Y[S(L]]\nY : [-|F-F+)Y]",
+ 12,
+ "click-and-drag-me!"
+)
# =========================================
class CompiledSystem
@@ -92,4 +98,3 @@ class SystemManager
)
getInstructions: -> @compiledElements
-
diff --git a/coffee/controls.coffee b/coffee/controls.coffee
index a828631..b912160 100644
--- a/coffee/controls.coffee
+++ b/coffee/controls.coffee
@@ -87,6 +87,65 @@ class Joystick
# ===============================
+class Animation
+ active: false
+ now: 0
+ f: (t) -> {}
+
+ constructor: (f) ->
+ @setF(f)
+
+ setF: (f, el) ->
+ if el
+ $(el).removeClass('error')
+ $(el).attr('title', '')
+ try
+ f = Function ['t'], f
+ r = f.call {}, 0
+ unless r instanceof Object
+ throw 'Return value is not Object'
+ @f = f
+ catch err
+ if el
+ $(el).addClass 'error'
+ $(el).attr 'title', err.toString()
+
+ enable: ->
+ @active = true
+ @onActivate()
+ disable: ->
+ @active = false
+ @onRelease()
+ toggle: (active = not @active) ->
+ if active
+ @enable()
+ else
+ @disable()
+
+ onActivate: -> # noop unless overriden
+ onRelease: -> # noop unless overriden
+
+ state: () ->
+ d =
+ try
+ @f(@now)
+ catch e
+ {}
+ if d instanceof Object
+ d
+ else
+ {}
+
+ clear: -> #noop for now
+ draw: ->
+ if @active
+ @now++
+
+ center: ->
+ @now = 0
+
+# ===============================
+
# ui binding for a single system variable
class Control
constructor: (@controlkey) ->
diff --git a/coffee/lsystem.coffee b/coffee/lsystem.coffee
index 287f69e..3577348 100644
--- a/coffee/lsystem.coffee
+++ b/coffee/lsystem.coffee
@@ -36,13 +36,34 @@ class Defaults
@_sensitivites: ->
size: {value: 7.7, growth:7.53}
angle: {value: 7.6, growth:4}
+ @play: 0
+ @animation: "
+ return {\n
+ angleX: t/100,\n
+ angleY: t/100,\n
+ sizeX: null,\n
+ sizeY: null,\n
+ offsetX: null,\n
+ offsetY: null,\n
+ rotation: null\n
+ }"
# =========================================
class LSystem
- constructor: (params, offsets, sensitivities, @rules, @iterations, @name) ->
+ constructor: (params, offsets, sensitivities, play, animation, @rules, @iterations, @name) ->
@params = Util.map(Defaults.params(params), (c) -> Param.fromJson(c))
@offsets = Defaults.offsets(offsets)
@sensitivities = Util.map(Defaults.sensitivities(sensitivities), (s) -> Sensitivity.fromJson(s))
+ @play =
+ if (typeof play == 'number' && Number.isFinite play) || (typeof play == 'boolean')
+ if play then 1 else 0
+ else
+ Defaults.play
+ @animation =
+ if typeof animation == 'string' and 0 < animation.length
+ animation
+ else
+ Defaults.animation
# this is not the most efficient of methods...
clone: -> return LSystem.fromUrl(@toUrl())
@@ -51,10 +72,12 @@ class LSystem
base = "#?i=#{@iterations}&r=#{encodeURIComponent(@rules)}"
mkQueryString = (params) -> _.reduce(params, ((acc,v) -> "#{acc}&#{v.toUrlComponent()}"), "")
params = mkQueryString(@params)
- sensitivities = mkQueryString(@sensitivities)
offsets = "&offsets=#{@offsets.x},#{@offsets.y},#{@offsets.rot}"
+ sensitivities = mkQueryString(@sensitivities)
+ play = "&play="+@play
+ animation = "&anim="+encodeURIComponent(@animation)
name = "&name=#{encodeURIComponent(@name)}"
- return base+params+sensitivities+offsets+name
+ return base+params+offsets+sensitivities+play+animation+name
merge: (system) ->
_.extend(@, system) if system
@@ -81,7 +104,15 @@ class LSystem
y: parseFloat(o[1])
rot: parseFloat(o[2])
- return new LSystem(params, offsets, sensitivities, decodeURIComponent(config.r), config.i, decodeURIComponent(config.name) or "unnamed")
+ anim =
+ if 'anim' of config
+ decodeURIComponent(config.anim)
+ else
+ null
+
+ return new LSystem(params, offsets, sensitivities, parseInt(config.play),
+ anim, decodeURIComponent(config.r), config.i,
+ decodeURIComponent(config.name) or "unnamed")
isIsomorphicTo: (system) -> if (!system) then false else @rules == system.rules and @iterations == system.iterations
diff --git a/coffee/manager.coffee b/coffee/manager.coffee
index 0f17e62..f4ea169 100644
--- a/coffee/manager.coffee
+++ b/coffee/manager.coffee
@@ -13,22 +13,51 @@ class InputHandler
system.params.angle.value = Util.round(system.params.angle.value + @joystick.dx(system.sensitivities.angle.value), 4)
system.params.angle.growth = Util.round(system.params.angle.growth + @joystick.dy(system.sensitivities.angle.growth),9)
+class AnimationHandler
+ snapshot: null # lsystem params as they were was when joystick activated
+ constructor: (@animation) ->
+
+ sensitivity: (value) ->
+ if (value) then Math.pow(10,value-10) else 1
+
+ update: (system) =>
+ return if not @animation.active
+ d = @animation.state()
+ if (typeof d.angleX == 'number' && Number.isFinite d.angleX)
+ system.params.angle.value = Util.round(system.params.angle.value + d.angleX * @sensitivity(system.sensitivities.angle.value), 4)
+ if (typeof d.angleY == 'number' && Number.isFinite d.angleY)
+ system.params.angle.growth = Util.round(system.params.angle.growth + d.angleY * @sensitivity(system.sensitivities.angle.growth), 9)
+ if (typeof d.sizeX == 'number' && Number.isFinite d.sizeX)
+ system.params.size.value = Util.round(@snapshot.params.size.value + d.sizeX * @sensitivity(system.sensitivities.size.value), 2)
+ if (typeof d.sizeY == 'number' && Number.isFinite d.sizeY)
+ system.params.size.growth = Util.round(@snapshot.params.size.growth + d.sizeY * @sensitivity(system.sensitivities.size.growth), 6)
+ if (typeof d.offsetX == 'number' && Number.isFinite d.offsetX)
+ system.offsets.x = @snapshot.offsets.x + d.offsetX
+ if (typeof d.offsetY == 'number' && Number.isFinite d.offsetY)
+ system.offsets.y = @snapshot.offsets.y + d.offsetY
+ if (typeof d.rotation == 'number' && Number.isFinite d.rotation)
+ system.offsets.rot = @snapshot.offsets.rot + d.rotation
class AppManager
joystick:null
+ animation:null
keystate: null
inputHandler: null
renderer:null
systemManager: null
- constructor: (@container, @controls) ->
+ constructor: (@container, @controls, @animation) ->
@joystick = new Joystick(@container)
@keystate = new KeyState
@inputHandler = new InputHandler(@keystate, @joystick)
+ @animationHandler = new AnimationHandler(@animation)
@joystick.onRelease = => @syncLocationQuiet()
@joystick.onActivate = => @inputHandler.snapshot = @systemManager.activeSystem.clone()
+ @animation.onRelease = => @syncLocationQuiet()
+ @animation.onActivate = => @animationHandler.snapshot = @systemManager.activeSystem.clone()
+
@renderer = new Renderer(@container)
@systemManager = new SystemManager
@@ -56,6 +85,8 @@ class AppManager
@recalculationPromise = @systemManager.activate(system).progress(@onRecalculateProgress)
@recalculationPromise.done( =>
@joystick.enable()
+ @animation.setF(system.animation, @controls.animation)
+ @animation.toggle(system.play)
@renderer.prepare(system)
@syncAll();
@draw()
@@ -65,10 +96,16 @@ class AppManager
@recalculationPromise
lsystemFromControls: ->
+ play = $(@controls.play).hasClass('play')
+ animation = $(@controls.animation).val()
+ Defaults.play = play
+ Defaults.animation = animation
return new LSystem(
@paramControls.toJson(),
@offsetControls.toJson(),
@sensitivityControls.toJson(),
+ play,
+ animation,
$(@controls.rules).val(),
parseInt($(@controls.iterations).val()),
$(@controls.name).val()
@@ -110,12 +147,17 @@ class AppManager
.always(@run)
run: =>
- requestAnimationFrame(@run, @container)
- @inputHandler.update(@systemManager.activeSystem)
if @joystick.active and not @renderer.isDrawing
- @draw()
@joystick.draw()
+ @inputHandler.update(@systemManager.activeSystem)
+ @syncControls()
+ @draw()
+ if @animation.active and not @renderer.isDrawing
+ @animation.draw()
+ @animationHandler.update(@systemManager.activeSystem)
@syncControls()
+ @draw()
+ requestAnimationFrame(@run, @container)
draw: (renderer = @renderer) =>
elems = @systemManager.getInstructions()
@@ -138,6 +180,11 @@ class AppManager
syncRulesAndIterations: (system = @systemManager.activeSystem) ->
$(@controls.iterations).val(system.iterations)
$(@controls.rules).val(system.rules)
+ $(@controls.animation).val(system.animation)
+ if (system.play)
+ $(@controls.play).addClass('play')
+ else
+ $(@controls.play).removeClass('play')
syncControls: (system = @systemManager.activeSystem) ->
@paramControls.sync(system.params)
diff --git a/css/ui.scss b/css/ui.scss
index 6e1e0f6..03ab442 100644
--- a/css/ui.scss
+++ b/css/ui.scss
@@ -88,7 +88,7 @@ li{
}
.header{
- height:50px;
+ height:40px;
background-color: #1b1b1b;
border-bottom:1px solid #545454;
background-image:-webkit-linear-gradient(top, #222222, #111111);
@@ -97,7 +97,12 @@ li{
.actions{
padding-top:13px;
padding-right:0px;
- a{ padding:2px 1px 1px 1px; }
+ }
+ img{
+ float:left;
+ width:40px;
+ height:40px;
+ padding-top:4px;
}
a.site{
font-family:monospace;
@@ -108,11 +113,6 @@ li{
font-weight:bold;
text-decoration: none;
display:block;
- img{
- width:40px;
- height:40px;
- float:left;
- }
span{
margin-left:10px;
line-height:42px;
@@ -189,7 +189,13 @@ li{
input[type=text]{
text-align: right;
}
-
+ textarea.error{
+ border-color: rgb(219, 43, 43);
+ }
+ pre{
+ padding: 0;
+ margin: 0;
+ }
&.validation-enabled{
input:invalid{
@@ -202,6 +208,7 @@ li{
li{
display:inline-block;
&.section{
+ position: relative;
background-color: #27292c;
width:100%;
padding:4px 0px;
@@ -210,7 +217,7 @@ li{
border-bottom:1px solid #464646;
border-top:1px solid #191919;
text-align: center;
- i{
+ i.icon-right{
position:absolute;
right:0;
&:hover{
@@ -251,6 +258,12 @@ li{
width:64px;
padding-left:8px;
}
+ li.label pre {
+ margin-left:-8px;
+ }
+ .right {
+ text-align:right;
+ }
li .label {
display:inline-block;
width:68px;
@@ -349,11 +362,14 @@ li{
padding-top:7px;
height:30px;
a{
- font-size:8pt;
- padding:2px 0px 1px 1px;
- margin-right:5px;
- display:inline-block;
position: relative;
+ display:inline-block;
+ width: 16px;
+ height: 16px;
+ padding: 2px 1px 1px 1px;
+ margin-right:5px;
+ text-align:center;
+ font-size:8pt;
background-color: #1f1f20;
&.facebook,&.twitter,&.gplus{
@@ -385,11 +401,21 @@ li{
font-size:12px;
padding:0px 0px 0px 0px;
}
- i.icon-toggle{
+ i.icon-side{
font-weight: bold;
letter-spacing: -2px;
padding: 0 3px;
}
+ i.icon-animation{
+ padding: 2px;
+ letter-spacing: -1px;
+ }
+ i.icon-animation::after{
+ content: "▶";
+ }
+ i.icon-animation.play::after{
+ content: "▮▮";
+ }
text-decoration: none;
line-height:14px;
color: #808080;
@@ -418,6 +444,9 @@ li{
}
}
+li.section .actions {
+ padding: 2px 0 0 0;
+}
.drawing-pad{
position: absolute;
diff --git a/index.html b/index.html
index ade899b..2b05a84 100644
--- a/index.html
+++ b/index.html
@@ -136,18 +136,19 @@
+
-
- gallery