magenta.js Visualizer() renders blurry notes

Question

I've noticed that whenever I use magenta.js's built in Visualizer method, it renders ever so slightly blurry (perhaps an anti-aliasing issue?) notes. I've attached an image:

I can see this with varying intensities across many of the documentation's examples as well, such as https://piano-scribe.glitch.me/. Is there a way I can get sharp edges or at the least minimize the blurriness? I'm not sure whether this issue has been addressed or is suitable in the magenta github, so I'm posting here.

Edit: with image-rendering: pixelated on the canvas element, zoomed in.

I put a few different audio clips into the linked page and was unable to reproduce the issue. Given that it is drawing on a canvas, I'd guess one of two things. 1. The visualize method isn't drawing on exact pixels. 2. The image is being displayed at a larger resolution and is upscaled, without [image-rendering](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look) set to pixelated... do you have an audio sample that shows this? — Gerrit0, Dec 28 '18 at 05:50
I used [this](https://www.youtube.com/watch?v=p9tW3n6aO9Q). It's not as noticable, but if you zoom in, you can see the blurry edges. I edited the post adding the result changing my canvas to `image-rendering: pixelated` - it seems that on the edges of notes there are pixels of different colors that cause the blurriness. Is there a way to go about removing them? — , Dec 28 '18 at 18:27

score 0 · Accepted Answer · answered Dec 31 '18 at 03:24

This is a bug (if you call it that) with magenta-js's visualizer. Taking a look at the redraw method in their source reveals that the x position and w(idth) of each note are determined with the following lines.

const x = (this.getNoteStartTime(note) * this.config.pixelsPerTimeStep) +
    offset;
const w = (this.getNoteEndTime(note) - this.getNoteStartTime(note)) *
    this.config.pixelsPerTimeStep;

Now, when drawing on a canvas, if you don't draw at an integer, the browser will interpolate and try to draw a close representation, resulting in the miscolored pixels you noticed.

All that's left to do is confirm that x and/or w are not integers. I loaded the demo page, opened the relevant js file in the sources tab, searched for this line and put a breakpoint.

Sure enough. x = 13.8 and w = 15.35999. I've submitted magenta-js#238 with a fix.

With your pull request merged, do you know when the fix will show up in a release? — , Jan 05 '19 at 02:10
@KadinZhang no clue honestly, first time I'd heard of magenta-js was when I saw this question... not sure what the release schedule is. — Gerrit0, Jan 05 '19 at 02:35

magenta.js Visualizer() renders blurry notes

1 Answers1