Animation with VexFlow

[Mohit Muthanna Cheppudira]

Hi folks,

Just wanted to point out this really nice document that Gregory Ristow wrote on building animated scores with VexFlow:

  https://github.com/0xfe/vexflow/wiki/Animation-with-VexFlow-&-CSS

This is based off of the work he's done on his online learning app: uTheory (which is also quite cool.)

Thanks,

Mo.

--

Mohit Muthanna [mohit (at) muthanna (uhuh) com]

[Gaspard Bucher]

Hey !

This is really cool. Thanks for the link. I'll also explore Gregory's uTheory project :-)

Gaspard

--
--
You received this message because you are subscribed to the Google
Groups "vexflow" group.
To post to this group, send email to vex...@googlegroups.com
To unsubscribe from this group, send email to
vexflow+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/vexflow?hl=en

---
You received this message because you are subscribed to the Google Groups "vexflow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[David Stone]

Fantastic, I had no idea it could be done with CSS! I'm doing something similar for my students, attempting to animate a scrolling vex flow display for sight reading practice. I took a slightly different approach since my app is React-based. I'm calling VexFlow once in my component constructor to draw to the SVG, and then updating the SVG glyphs directly on each frame. The animation is very smooth and looks great!

The obstacle I'm hitting though, is that for the life of me I cannot get TickContext.setX() to affect the horizontal positions of the notes. I want to display arbitrary rhythms and scroll at a constant speed, but my playhead has to jump around to handle generous spacing around 8th notes and 16th notes. I need the simplest formatting possible, just proportional spacing. I've tried Gregory's method, as well as the method used in SimpleFormatter mentioned here last September, but so far nothing has worked.

I'm using Easy Score, so I am assigning notes --> voice --> system and then trying to reset the TickContext right before I call Factory.draw(). Maybe Easy Score is the wrong approach and I need to use the lower level API throughout? Help!