6 ms·

I wrote this to show off how to write a compact and powerful animation library. It turned out to be a nice case study in declarative programming as I wrote it!

by bollu 6y ago

I wrote this to show off how to write a compact and powerful animation library. It turned out to be a nice case study in declarative programming as I wrote it! I'd love feedback on the API design, website design, and content as I'm trying to actively improve in all of these areas.

dmix 6y ago
These are the type of blog posts I miss on HN. It used to be what was all over the homepage. Thanks for taking the time to write it. One bit of feedback: the sliders are almost impossible to click on with a mobile browser. The drag handle should be much larger. There’s also a horizontal scroll bar that appears partially above the bottom of the page, something is overlapping the main content body.
- amatic 6y ago
  Which mobile browser? Android Chrome looks nice, draggable sliders, all animations working.
  - r_deckard 6y ago
    I can’t seem to drag it on iOS safari.
RangerScience 6y ago
Very cool. I overall very much like both your library, and your presentation. That said, I found the abbreviations initially confusing. For variable names and symbol/strings, maybe hold off until not the first example? For the functions themselves, can you do a non-abbreviated alias? I also missed the `par` in `seq((...).par(...))` the first time. And, personally, I think `par([...,...])` would be clearer, and allow for some beneficial constructs - is there a way to allow both? Particularly, I really admire the time travel aspects; that you can, what that means, and what allows that to happen. It reminds me a lot of what I've tried to do (not as elegantly, so I might come crib from you!) with the pattern renderer in https://github.com/rangerscience/butterfly https://github.com/rangerscience/butterfly
jcelerier 6y ago
Not that I want to disparage as the library looks neat and clear, but is that what declarative means in 2020 ? The code looks like mainly a builder pattern for an animation datastructure. I've always heard declarative as a sort of synonym to programs defined in terms of equational reasoning such as Lustre for instance - a rule of thumb to separate declarative languages from imperative languages is that in declarative languages x := 1 y := x + 1 x := 2 y will be 3 as "y := x + 1" must hold. e.g. it's not enough to just construct a graph-like datastructure for things to be declarative, the language has to do it itself. Also, note that the par / seq model (https://en.wikipedia.org/wiki/Series-parallel_graph https://en.wikipedia.org/wiki/Series-parallel_graph) is not as powerful as a general dag as things such as the K4 graph cannot be represented in it - even though it may make sense in some animation scenarios.
- wereHamster 6y ago
  IMHO in a declarative language your example should be an error. You defined x twice. Intentionally or not, this is confusing, for others and for you in a week when you have to look at the code again. Also, why should the second binding override the first? You introduced a temporal dimension where later lines of code somehow override earlier lines of code. That is not a necessity in a declarative language. It may be how we humans read text (from top to bottom), but it does not mean the computer has to process it in the same way.
  - jcelerier 6y ago
    > IMHO in a declarative language your example should be an error. You defined x twice. Intentionally or not, this is confusing, for others and for you in a week when you have to look at the code again. c'mon, this is an example in a forum post ! of course it doesn't make sense in real life. real life is distance := computeDistanceToCenterOfScreen(cursorPosition) text := "the current distance is: " + distance but that just muddies the waters needlessly > Also, why should the second binding override the first? You introduced a temporal dimension where later lines of code somehow override earlier lines of code. yes, some languages work like that, but it's not the point - either you assume that you can update values in your declarative bindings like that, or you have to define your binding in terms of some external behaviour that will change in magic ways, which again would not be very nice to do as a simple forum post example
YeGoblynQueenne 6y ago
Thank you for the interesting post. Can you explain why the "A complex animation" code example is declarative? I can see that the names of the functions are declarative in style but the code is a series of function calls that seem to be giving instructions to the javascript interpreter to perform a sequence of operations. For example, you describe the code as follows: 1. anim_const(name, val) to set a constant value val to name name. 2. anim_interpolated(ease, name, val, time) to change to a named value with name name to value val in duration time. 3. anim1.seq(anim2) to run anim2 once anim1 has completed. 4. anim1.par(anim2) to run anim2 in parallel with anim1. 5. anim_delay(time) to do nothing for time time. All these function calls are described by verbs like "set a ... value", "change to a ... value", "run", "do" etc. The way I understand declarative programming (I do most of my coding in Prolog these days) it means that one declares what is the state of the progam, rather than describing what steps should be taken to change it. But your code seems to be describing steps to change the state of the program. It is "do this, then do that" style of coding. Do you mean something else by "declarative"? Could you say what you mean by "declarative"?
- jerf 6y ago
  "Declarative programming" at its core seems to be about separating what the code says from what it does, and trying to put more "magic" in between the saying and the doing. But that's not a binary distinction for all kinds of reasons. What a code "says" is already a bit subjective to start with, but then we get into things like, is this "declarative"? def SayHello(): print("Hello!") SayHello() After all, when I type "SayHello()", I'm not specifying how I want Hello to be Said, just that I want it said. Yet, of course, if this is called "declarative" than the word is stripped of all meaning, and we do clearly want it to mean something. Personally I'd set the line as being somewhere where by definition of the system, there is a barrier set up and you are no longer allowed to "see into" the implementation because it's going to do things so crazy to your declaration that allowing you to see into it would ruin it. e.g. in SQL when you send in your query the query engine is reserving the right to rewrite it in absolutely crazy ways, and in principle, you have no right to ask about what it actually did as long as you get the "right answer". This is because I then like to segue into how that barrier is somewhat illusory because it's always going to take some concrete actions and you may have need to see into those actions. But that isn't the only place to draw the line, it's just where I find it convenient to draw the line so I can ride a pet hobbyhorse. There isn't really a bright line, even though there is clearly some real difference we are trying to talk about.
imglorp 6y ago
I appreciate the simplicity and visual style of the blog.
effie 6y ago
> website design I like the font used for the code, very readable. But underscoring keywords is superfluous and makes the code listing weird - bold font is enough. Also, the line numbers are jarring, they are too pronounced and they are not important to the reader. Maybe make them gray or put them on the right-hand side. This is a common problem with many blogs. I don't care about the line numbers! The main text is hard to read - this font, a kind of an hybrid of serifs and tall quasi-monospace characters, is weird and hard to read. Try more usual sans-serif font with shorter-height characters, I think it will be much better both for readability and more distinct from the code listings. The paragraph symbol is obsolete, I would lose that. At least don't make it look like a link, nothing happens when I click it.
agys 6y ago
Small typo: On being invoked, it sets out.v = field should be: (…) out.field = v
carapace 6y ago
I really like your website design, very clean and readable without sacrificing style. The library is very nice too. The only thing I would add is, uh, rub some Category Theory on it. It seems like you could "go all the way" and define a formal mathematical semantics for animations, which would be nice. VPRI STEPS project made a quasi-mathematical language called Nile for compositing 2D vector graphics ( http://www.vpri.org/pdf/tr2009016_steps09.pdf http://www.vpri.org/pdf/tr2009016_steps09.pdf ) that might be something to look at.

by bollu 6y ago

dmix 6y ago

These are the type of blog posts I miss on HN. It used to be what was all over the homepage. Thanks for taking the time to write it. One bit of feedback: the sliders are almost impossible to click on with a mobile browser. The drag handle should be much larger. There’s also a horizontal scroll bar that appears partially above the bottom of the page, something is overlapping the main content body.

amatic 6y ago
Which mobile browser? Android Chrome looks nice, draggable sliders, all animations working.
- r_deckard 6y ago
  I can’t seem to drag it on iOS safari.

RangerScience 6y ago

Very cool. I overall very much like both your library, and your presentation. That said, I found the abbreviations initially confusing. For variable names and symbol/strings, maybe hold off until not the first example? For the functions themselves, can you do a non-abbreviated alias? I also missed the `par` in `seq((...).par(...))` the first time. And, personally, I think `par([...,...])` would be clearer, and allow for some beneficial constructs - is there a way to allow both? Particularly, I really admire the time travel aspects; that you can, what that means, and what allows that to happen. It reminds me a lot of what I've tried to do (not as elegantly, so I might come crib from you!) with the pattern renderer in https://github.com/rangerscience/butterfly https://github.com/rangerscience/butterfly

jcelerier 6y ago

Not that I want to disparage as the library looks neat and clear, but is that what declarative means in 2020 ? The code looks like mainly a builder pattern for an animation datastructure. I've always heard declarative as a sort of synonym to programs defined in terms of equational reasoning such as Lustre for instance - a rule of thumb to separate declarative languages from imperative languages is that in declarative languages x := 1 y := x + 1 x := 2 y will be 3 as "y := x + 1" must hold. e.g. it's not enough to just construct a graph-like datastructure for things to be declarative, the language has to do it itself. Also, note that the par / seq model (https://en.wikipedia.org/wiki/Series-parallel_graph https://en.wikipedia.org/wiki/Series-parallel_graph) is not as powerful as a general dag as things such as the K4 graph cannot be represented in it - even though it may make sense in some animation scenarios.

wereHamster 6y ago
IMHO in a declarative language your example should be an error. You defined x twice. Intentionally or not, this is confusing, for others and for you in a week when you have to look at the code again. Also, why should the second binding override the first? You introduced a temporal dimension where later lines of code somehow override earlier lines of code. That is not a necessity in a declarative language. It may be how we humans read text (from top to bottom), but it does not mean the computer has to process it in the same way.
- jcelerier 6y ago
  > IMHO in a declarative language your example should be an error. You defined x twice. Intentionally or not, this is confusing, for others and for you in a week when you have to look at the code again. c'mon, this is an example in a forum post ! of course it doesn't make sense in real life. real life is distance := computeDistanceToCenterOfScreen(cursorPosition) text := "the current distance is: " + distance but that just muddies the waters needlessly > Also, why should the second binding override the first? You introduced a temporal dimension where later lines of code somehow override earlier lines of code. yes, some languages work like that, but it's not the point - either you assume that you can update values in your declarative bindings like that, or you have to define your binding in terms of some external behaviour that will change in magic ways, which again would not be very nice to do as a simple forum post example

YeGoblynQueenne 6y ago

Thank you for the interesting post. Can you explain why the "A complex animation" code example is declarative? I can see that the names of the functions are declarative in style but the code is a series of function calls that seem to be giving instructions to the javascript interpreter to perform a sequence of operations. For example, you describe the code as follows: 1. anim_const(name, val) to set a constant value val to name name. 2. anim_interpolated(ease, name, val, time) to change to a named value with name name to value val in duration time. 3. anim1.seq(anim2) to run anim2 once anim1 has completed. 4. anim1.par(anim2) to run anim2 in parallel with anim1. 5. anim_delay(time) to do nothing for time time. All these function calls are described by verbs like "set a ... value", "change to a ... value", "run", "do" etc. The way I understand declarative programming (I do most of my coding in Prolog these days) it means that one declares what is the state of the progam, rather than describing what steps should be taken to change it. But your code seems to be describing steps to change the state of the program. It is "do this, then do that" style of coding. Do you mean something else by "declarative"? Could you say what you mean by "declarative"?

jerf 6y ago
"Declarative programming" at its core seems to be about separating what the code says from what it does, and trying to put more "magic" in between the saying and the doing. But that's not a binary distinction for all kinds of reasons. What a code "says" is already a bit subjective to start with, but then we get into things like, is this "declarative"? def SayHello(): print("Hello!") SayHello() After all, when I type "SayHello()", I'm not specifying how I want Hello to be Said, just that I want it said. Yet, of course, if this is called "declarative" than the word is stripped of all meaning, and we do clearly want it to mean something. Personally I'd set the line as being somewhere where by definition of the system, there is a barrier set up and you are no longer allowed to "see into" the implementation because it's going to do things so crazy to your declaration that allowing you to see into it would ruin it. e.g. in SQL when you send in your query the query engine is reserving the right to rewrite it in absolutely crazy ways, and in principle, you have no right to ask about what it actually did as long as you get the "right answer". This is because I then like to segue into how that barrier is somewhat illusory because it's always going to take some concrete actions and you may have need to see into those actions. But that isn't the only place to draw the line, it's just where I find it convenient to draw the line so I can ride a pet hobbyhorse. There isn't really a bright line, even though there is clearly some real difference we are trying to talk about.

imglorp 6y ago

I appreciate the simplicity and visual style of the blog.

effie 6y ago

> website design I like the font used for the code, very readable. But underscoring keywords is superfluous and makes the code listing weird - bold font is enough. Also, the line numbers are jarring, they are too pronounced and they are not important to the reader. Maybe make them gray or put them on the right-hand side. This is a common problem with many blogs. I don't care about the line numbers! The main text is hard to read - this font, a kind of an hybrid of serifs and tall quasi-monospace characters, is weird and hard to read. Try more usual sans-serif font with shorter-height characters, I think it will be much better both for readability and more distinct from the code listings. The paragraph symbol is obsolete, I would lose that. At least don't make it look like a link, nothing happens when I click it.

agys 6y ago

Small typo: On being invoked, it sets out.v = field should be: (…) out.field = v

carapace 6y ago

I really like your website design, very clean and readable without sacrificing style. The library is very nice too. The only thing I would add is, uh, rub some Category Theory on it. It seems like you could "go all the way" and define a formal mathematical semantics for animations, which would be nice. VPRI STEPS project made a quasi-mathematical language called Nile for compositing 2D vector graphics ( http://www.vpri.org/pdf/tr2009016_steps09.pdf http://www.vpri.org/pdf/tr2009016_steps09.pdf ) that might be something to look at.