

Scrub values in JavaScript live - nornagon
http://nornagon.github.com/scrubby

======
spicyj
Very cool. Just wanted to mention that we've had the same capability in the
Khan Academy CS environment for a few months now:

<http://www.khanacademy.org/cs/gear/1178931559>

Read John Resig's blog post for more details:
<http://news.ycombinator.com/item?id=4382076>

~~~
Void_
Yes, playing with values and seeing the graphical result change is an
excellent way of getting the intuition for taught material.

I came across this example
([http://www.khanacademy.org/math/statistics/e/exploring_mean_...](http://www.khanacademy.org/math/statistics/e/exploring_mean_and_median))
from Khan Academy that helps students understand mean and median of a data
set. (There are exercises for other summary statistics too.)

------
pbiggar
This is very impressive and cool. However I really don't think that parsing
source code and manipulating is a very maintainable way to do this (and this
as someone who writes Clojure for a living).

You could do exactly the same using very simple Knockout. It wouldn't be as
funky, but it would be something you'd be happy to use in production.

~~~
nornagon
It isn't really intended for production use. Personally, I plan to use it to
tweak values in games I write, because having to alt+tab, find, edit, alt+tab,
refresh, restore state for every tiny tweak to the position of a UI element
sucks.

This is a development tool :)

~~~
pbiggar
Can you go into more detail?

~~~
mirashii
I would highly recommend watching this, and keeping in mind how such a thing
could be useful in games.

<http://worrydream.com/#!/InventingOnPrinciple>

For a concrete example of usefulness in games, see

<http://www.youtube.com/watch?v=-32SFFbaeJg>

~~~
pbiggar
It would be useful to give a pitch as to why I should watch it - it's an hour
long.

~~~
bjourne
Because it's an awesome lecture and well worth a good hour of your life. Trust
us on this one, but it's your loss if you don't. :)

------
enjalot
Interesting implementation! I'm using CodeMirror tokens and regexs to make
numbers scrubbable and hex colors pickable:
<http://tributary.io/tributary/2958568/>

I've been wanting to explore the route you took more, especially for doing
even more code modification. I'd like to let users click on a number and turn
it into a variable, or have a special object where members are added to the
global table. You can then create controls external to the code with that
table and hide the code (good for presenting after you're done coding).
Looking forward to checking out your code!

my project: <http://tributary.io>

------
egdelwonk
I forked your code and implemented one of your todos: Added the ability to
input values when double clicking a scrubber.

<https://github.com/nornagon/scrubby/pull/1/files>

~~~
nornagon
Awesome! I'll check it out soon :D

------
shakeel_mohamed
Nice! Just a thought, values can go beyond the valid range. For example:
dividing by zero, having negative values for RGB, and negative height/widths.

~~~
nornagon
Unfortunately there's no type information in JS, so it's very difficult to
extract range data from just the source. Just don't drag it into that range ;)

PS, I'm planning to implement a color picker for strings like
'rgba(200,0,234,0.4)'

~~~
tantalor
How does scrubby know the alpha value is real-valued (not integral)?

~~~
nornagon
[https://github.com/nornagon/scrubby/blob/master/scrubby.coff...](https://github.com/nornagon/scrubby/blob/master/scrubby.coffee#L62)

------
stuaxo
Does anyone know if there is a similar editor component for Gtk, QT or Wx ?

EDIT: Ideally for python.

------
Skalman
It doesn't work in Firefox 19.

~~~
nornagon
Should be fixed now.

------
mcrider
What would be the use cases for this, other than education?

~~~
nornagon
I plan to use it to tweak values during game development, so I don't have to
edit/reload every time I tweak a number a tiny bit.

------
ashcairo
Very clever.

