Trying to make one element another
Yoshiki Ohshima
I'm a complete newbie but trying to learn about Flapjax. As a
start, I'm trying to write a little program that makes the character
follow its predecessor, in the spirit of "wandering letters" mentioned
in here a document here:
http://www.vpri.org/pdf/m2010002_lobjects.pdf.
But, while the first character moves as expected, the second character
only gets the initial value from startWith() but I see no further updates.
in the following program, I commented things but the bottom
line seems that I don't get the update from pos1B. Can anybody tell
me why? The version of Flapjax is "Flapjax 2.1 (November 2, 2009)",
and I'm so far using it as a "library".
Thank you very much!
-- Yoshiki
------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="fx/flapjax.js"></script>
<title>Flapjax Demo: Wanderling Letters</title>
<script type="text/javascript">
function loader() {
// Just 5 characters inserted as individual DOM
// elements, with id's p0, p1, and etc.
var ary = 'Hello'.split('');
ary.forEach(function(x, i) {
var str = "<span id=p" + i + ">" + x + "</span>";
document.write(str);
});
// Make a timer and pos0B that starts from 0 and ten pixels toward right for
// each seconds.
var t = timerB(100);
var start = valueNow(t);
var pos0B = t.liftB(function(x) {return (x - start) / 100});
insertDomB(
DIV({style: { position: 'absolute',
left: pos0B,
top: 0 }, id: 'p0'},
'H'),
'p0');
// A function from the mailing list archive to watch the position change.
// rightB :: Element -> Behavior cumulative position of right edge
function rightB(t_) {
var t = $(t_); // adds Prototype methods
var f = function() {
var pos = Position.cumulativeOffset(t);
var size = t.getDimensions();
return pos.left + size.width;
};
return $E(t, "DOMAttrModified")
.filterE(function(x) { return x.attrName == "style";})
.mapE(f)
.startsWith(f());
}
// The following will eventually are going to wrap in a loop to deal
// with all characters, but for now I only write code for the second character.
// Just give it a name for future extension.
var pos1B = rightB('p0');
insertDomB(
DIV({style: { position: 'absolute',
left: pos1B,
top: 0 }, id: 'p1'},
'e'),
'p1');
}
</script>
</head>
<body onload="loader()">
</body>
</html>
Jacob Baskin
--
Flapjax home page: www.flapjax-lang.org
Flapjax list: groups.google.com/group/flapjax
Post: fla...@googlegroups.com
Unsubscribe: flapjax-u...@googlegroups.com
Yoshiki Ohshima
Jacob Baskin wrote:
>
> When you insert your div into the place where p0 is, it replaces p0. Thus, it doesn't have p0's ID. If you give that div its own ID, you can then use that as the argument to rightB.
I noticed it. So, my attempt was to make the call insertDomB like
this:
insertDomB(
DIV({style: { position: 'absolute',
left: pos0B,
top: 0 }, id: 'p0'},
'H'),
'p0');
with "id: 'p0'". With this, the element do have id
attribute and $('p0') seems to pick it up (so the initial value
provided by startWith() seems to be correct). Without "id: 'p0'", it
indeed cannot find 'p0' with $().
As far as I can tell, the problem seems to be something else. Or, are
you suggesting that I cannot reuse the id's?
Thank you!
-- Yoshiki
Yoshiki Ohshima
following code works as I intended. It is very slightly modified from
what I posted last night. It appears that getting "DOMAttrModified"
event does not work on Chrome and Safari in this way.
(FireFox does not work with elements generated in the loader()
function by saying "attempt to run compile-and-go script on a cleared
scope." I just put them in the body.)
For now, it's fine for me that it just works on one browser. So, I'll
try to make more progress on this route.
Thanks!
-- Yoshiki
--------------------------------------
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="fx/flapjax.js"></script>
<title>Flapjax Demo: Wanderling Letters</title>
<script type="text/javascript">
function loader() {
// Make a timer and pos0B that starts from 0 and ten pixels toward right for
// each seconds.
var t = timerB(100);
var start = valueNow(t);
var pos0B = t.liftB(function(x) {return (x - start) / 100});
insertDomB(
DIV({style: { position: 'absolute',
left: pos0B,
top: 0 }, id: 'p0'},
'H'),
'p0');
// A function from the mailing list archive to watch the position change.
// rightB :: Element -> Behavior cumulative position of right edge
function rightB(t_) {
var t = $(t_); // adds Prototype methods
var f = function() {
var size = t.getDimensions();
return parseFloat(t['style'].getPropertyValue('left')) + size.width;
};
return $E(t, "DOMAttrModified")
.filterE(function(x) { return x.attrName == "style";})
.mapE(f)
.startsWith(f());
}
var pos1B = rightB('p0');
insertDomB(
DIV({style: { position: 'absolute',
left: pos1B,
top: 0 }, id: 'p1'},
'e'),
'p1');
}
</script>
</head>
<body onload="loader()">
<span id="p0">H</span>
<span id="p1">e</span>
<span id="p2">l</span>
<span id="p3">l</span>
<span id="p4">o</span>
</body>
</html>
Yoshiki Ohshima
simple way:
http://tinlizzie.org/~ohshima/wandering/wandering.html
The idea of this demo is to show the animation of the simplest form of
text layout with some "particles" idea. You get kids to go out to a
playfield and tell them to follow simple rules, such as just follow
your predecessor, but if you hit the right edge, tell your predecessor
to find the beginnig of word and move to the next line.
I'd like to get some critique of my code. I would like to think that
each character corresponds to a row in a spreadsheet with columns like
x, y, beginningOfLine flag, etc. and each cell has some formula. The
trouble is that the position of character in the next time step
depends on its current position. The Flapjax paper describes how to
make self-dependent behavior by having delay in it, but I have yet
discovered the simplest idiom to set up such dependency. Currently, I
have a relatively large function called 'place' that handles the
computation of new position, but I wonder if I can just describe the
function more FRP kosher manner.
Also, this algorithm requires dependency from predecessor to
successor, as well as the opposite direction. When writing the code,
it is not clear for me how to set up such dependency.
Thank you!
-- Yoshiki
Arjun Guha
Yoshiki Ohshima
Arjun Guha wrote:
>
> This demo is totally awesome. I promise I'll take a look at the code, but I'm preoccupied with thesis defending right now. I'll get to this in 2 weeks.
Thank you! Yup, thesis defense is really important. As you can
tell, I'm so new to Flapjax and don't know much about even
JavaScript. It'd be really helpful if I can learn from "experts".
-- Yoshiki
Arjun Guha
Yoshiki Ohshima
Arjun Guha wrote:
>
> (We should of course just talk about this today.)
Yes, I'm (finally) here!
> I like the code. What Flapjax is missing, which might make the code even cleaner, is a collectB (really, an integrateB).
>
> Your code is lifting the place function over its arguments, and then using state to update the .asked field on a DOM node. I have nothing against state, but but you should be able to do this
> with an accumulator, if that's the better solution. Right now, Flapjax forces you to convert to an EventStream, use collectE, and convert back to a Behavior, which is silly.
My friend and I have been doing some more experiments and the
wandering letters have a revised version: (Sorry not for telling this sooner.)
https://github.com/propella/wandering
In this version, we use collectE to get the "integration" effects.
But the code around "asked" is still not pure. "asked" needs to be
propagated from your successor, so setting up the dependency graph is
still not too straightforward.
Actually, we made some prototype of our own with some
modifications/extensions. I am not sure if we are going to the right
direction but at least it is interesting to me. Hopefully, it is not
too off and I can learn good stuff in the next few days!
-- Yoshiki