Vexflow scaling

[loncemon]

Hi,

   I am working on a "dynamic score" where music notation is animated. Currently I am doing everything on the canvas and rendering music notation using jpg files, but there are obvious problems when I scale images and animate them (as you can see here:

http://animatedsoundworks.com:8005/

double click on the rhythm track).

   I was really hoping the beauteous VexFlow rendering would work in my application, but I can't figure out how to scale the staves I create (though it looks like "My VexFlow" provides this capability). Any hints would be greatly appreciated!

- lonce

[Mohit Muthanna]

First get the canvas/SVG context from the renderer, then call its
scale() function:

ctx = renderer.getContext();
ctx.scale(0.8, 0.8); // scale X and Y

> --
> --
> 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/groups/opt_out.



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

[loncemon]

Hi Mohit,

   Thanks for your reply.

    I had actually tried that earlier, but forgot that I would have to adjust the (x,y) position of the rendering after I scaled, so didn't see the misplaced rendering of the notation against the background. 

    Unfortunately, I see that the scaling of the VexFlow notation (http://animatedsoundworks.com:8006/) suffers the same kinds of loss that scaling of the jpgs do (http://animatedsoundworks.com:8005/ ) [double click on the rhythm track to see]. I guess because the image is first rendered to a bit map and then scaled? 

     I am really at a loss as to what to do for my musical animation ... I may have to abandon the Canvas all together for the dynamic score, and move to pure SVG....VexFlow would probably still not work for me if scaling works on the rendered image rather than by scaling the SVG drawing parameters..... 

    Anyway, please accept my compliments on an amazingly complete and beautiful musical notation system - it works great for what it was designed to do. Really fine work!

Best,

          - lonce

[Mohit Muthanna]

On Mon, Aug 19, 2013 at 12:51 PM, loncemon <lonc...@gmail.com> wrote:
>
> Hi Mohit,
>
> Thanks for your reply.
>
> I had actually tried that earlier, but forgot that I would have to
> adjust the (x,y) position of the rendering after I scaled, so didn't see the
> misplaced rendering of the notation against the background.
>
> Unfortunately, I see that the scaling of the VexFlow notation
> (http://animatedsoundworks.com:8006/) suffers the same kinds of loss that
> scaling of the jpgs do (http://animatedsoundworks.com:8005/ ) [double click
> on the rhythm track to see]. I guess because the image is first rendered to
> a bit map and then scaled?

I'm not sure what's going on there, but it shouldn't look like that.
The only thing that is scaled is the coordinate system, so any vectors
drawn after the scaling should be clean. Are you scaling first, then
drawing?

[loncemon]

OK, I think I know why I am seeing the degradation in quality. It is because I am setting the widths of all my divs and canvases in CSS using % rather px - which means there are several layers of scaling that happen after the svg is rendered to the canvas. 

   When I fix all div and canvas dimensions in px,  and then scale the context in the the code as you suggest, I can get silky animations and articulate rendering at any scale.

Thanks!

               - lonce

[Mohit Muthanna]

Sounds good. Would love to see a demo when you're done.