search

ParametricPress / 01-unraveling-the-jpeg

Source code for Unraveling the JPEG
https://parametric.press/issue-01/unraveling-the-jpeg/
MIT License
246 stars 21 forks source link

Add a way to highlight certain bytes in the editor #2

Closed OmarShehata closed 5 years ago

OmarShehata commented 5 years ago

Throughout the article I want to be able to say things like, "try changing this byte" or "note how if we remove this segment, this happens" or "this block is responsible for X". It can be hard to find this in just a big textarea of numbers.

This impulse-adventure article has images with highlights:

byte highlights

It'd be really cool if we can make this dynamic. Essentially I want to be able to:

Maybe get some inspiration from popular hex editors?

https://xem.github.io/hex/

OmarShehata commented 5 years ago

It also would be nice to have this editor be side by side with the image, and then collapses to on top of it/below it on mobile.

OmarShehata commented 5 years ago

Communicating "Corrupted" Image

Another problem with the editor, is that right now when an image is corrupted I show a "Image is corrupted :(" placeholder. This works great for large images, but not for the 16x8 image. I don't want to draw a color, because then you might think that change you made sets it to that color, instead of the image just being not-renderable anymore.

Maybe I should set a mimimum size to render the "corrupted" image? So even though the test image is 16x8, if it gets corrupted, the canvas should scale to 300x300 to show that corrupted text?

OmarShehata commented 5 years ago

Better Editor Formatting for Chroma Subsampling

It would also be absolutely useful if the editor placed different components on different lines. For example, if the image has chroma subsampling (many/most JPEGs do):

Chroma subsampling - You can expect that most photos will have 2x1 chroma subsampling, which will mean that the decoding sequence per MCU will be Y1 Y2 Cb Cr instead of Y Cb Cr.

So if you could see:

Y1 Y2 Cb Cr
Y1 Y2 Cb Cr
Y1 Y2 Cb Cr

Instead of:

Y1 Y2 Cb Cr Y1 Y2 Cb Cr Y1 Y2 Cb Cr Y1 Y2 Cb Cr Y1 Y2 Cb Cr Y1 Y2 Cb Cr

That'd be great. Or we could just mark it/have it so when you hover/click on it it tells you. It would actually be amazing if you can click on any byte and it'll tell you what it is!

OmarShehata commented 5 years ago

I ended up having this as part of the article - that you try to figure out how the colors are stored, and later it's revealed what it is. So would have been a nice to have but not blocking release.