4 ms·

Show HN: Image to CRT

1 points by atum47 4y ago

atum47 4y ago
Hi everyone, the other day I was watching a video about LCD screens and thought about this experiment: separating the pixel values (r,g,b) and drawing them next to each other to simulate a CRT filter. Right now I'm doing it the naive way, instantiating one Pixel class for each pixel, which is very slow depending on the size of the image. I do intend to implement another version that does this using Uint8Array which I believe will be much faster. to use just select a picture from the file input. since each real pixel gets translated to 3 pixels wide and 2 tall, I've added a slider where you can resize the original image before converting it, just drag the slider to the left. if you do use this on your phone I recommend moving the slider all the way to the left before choosing a picture (10% of the original size of the image) hope you like it
- atum47 4y ago
  here's a screenshot of a converted image https://imgur.com/a/cCeDuZq https://imgur.com/a/cCeDuZq
- navjack27 4y ago
  This is a very cool way to do this! I'm having a blast taking captures from Amiga or dos stuff and getting them to display with the correct pixel aspect with your tool. Nice
  - atum47 4y ago
    I'll try to make a new version (faster) of this this weekend. Thanks anyway
mister_goo 4y ago
Cool. But the aspect ratio is changed after the conversion.
- atum47 4y ago
  yep, side effect of the new pixel which is 3x2 (I'll try new formats on the new version)
zzo38computer 4y ago
Separating the pixels into separate pixels like this can be effectively like a tensor product. Many years ago, I had written a program to make the tensor product of two pictures. ff-tensor <(echo ff0000ff 00ff00ff 0000ffff | ff-scanf 3 1 '%2x%2x%2x%2x' + | ff-enlarge 1 2) (It also works if you write ff-enlarge outside of the parentheses instead, since it is also effectively a kind of tensor product, too, so it is associative) If you make the tensor product in the reverse order (exchanging the two operands of the input pictures), then it will make the separations with the entire red picture on the left, the entire green picture in the middle, and the entire blue picture on the right, instead.
- atum47 4y ago
  right now each pixel gets translated into its separated component 3 wide x 2 tall, like the picture https://imgur.com/a/PZCeYIt https://imgur.com/a/PZCeYIt I do intend to this using an array conversion and fiddle with the new pixel format also. but this command you posted seems very clever. I wonder what do I have to install to try it on my machine.
  - zzo38computer 4y ago
    > I wonder what do I have to install to try it on my machine. http://zzo38computer.org/prog/farbfeld.zip http://zzo38computer.org/prog/farbfeld.zip or use the fossil repository http://zzo38computer.org/fossil/farbfeld.ui http://zzo38computer.org/fossil/farbfeld.ui Compile the programs that you want; in this case, ff-tensor, ff-enlarge, and ff-scanf. And then you will need the conversions; for example, ff-xcapture captures X window screen, ff-xwin displays the picture on the screen, pngff decodes PNG, and ffpng encodes PNG. (If you prefer, you can also use any other farbfeld programs (including the original implementation from suckless); the latest version of ImageMagick also supports farbfeld, so you can also use that to convert the pictures.) (You can ignore all of the files that you do not need (you do not need to compile all of them; in fact you can delete the files that you do not need); only a few of them have dependencies such as pngff and ffpng depend on LodePNG (which is included), and ff-xwin depends on X window system.)

1 points by atum47 4y ago

Hi everyone, the other day I was watching a video about LCD screens and thought about this experiment: separating the pixel values (r,g,b) and drawing them next to each other to simulate a CRT filter. Right now I'm doing it the naive way, instantiating one Pixel class for each pixel, which is very slow depending on the size of the image. I do intend to implement another version that does this using Uint8Array which I believe will be much faster. to use just select a picture from the file input. since each real pixel gets translated to 3 pixels wide and 2 tall, I've added a slider where you can resize the original image before converting it, just drag the slider to the left. if you do use this on your phone I recommend moving the slider all the way to the left before choosing a picture (10% of the original size of the image) hope you like it

atum47 4y ago
here's a screenshot of a converted image https://imgur.com/a/cCeDuZq https://imgur.com/a/cCeDuZq
navjack27 4y ago
This is a very cool way to do this! I'm having a blast taking captures from Amiga or dos stuff and getting them to display with the correct pixel aspect with your tool. Nice
- atum47 4y ago
  I'll try to make a new version (faster) of this this weekend. Thanks anyway

mister_goo 4y ago

Cool. But the aspect ratio is changed after the conversion.

atum47 4y ago
yep, side effect of the new pixel which is 3x2 (I'll try new formats on the new version)

zzo38computer 4y ago

Separating the pixels into separate pixels like this can be effectively like a tensor product. Many years ago, I had written a program to make the tensor product of two pictures. ff-tensor <(echo ff0000ff 00ff00ff 0000ffff | ff-scanf 3 1 '%2x%2x%2x%2x' + | ff-enlarge 1 2) (It also works if you write ff-enlarge outside of the parentheses instead, since it is also effectively a kind of tensor product, too, so it is associative) If you make the tensor product in the reverse order (exchanging the two operands of the input pictures), then it will make the separations with the entire red picture on the left, the entire green picture in the middle, and the entire blue picture on the right, instead.

atum47 4y ago
right now each pixel gets translated into its separated component 3 wide x 2 tall, like the picture https://imgur.com/a/PZCeYIt https://imgur.com/a/PZCeYIt I do intend to this using an array conversion and fiddle with the new pixel format also. but this command you posted seems very clever. I wonder what do I have to install to try it on my machine.
- zzo38computer 4y ago
  > I wonder what do I have to install to try it on my machine. http://zzo38computer.org/prog/farbfeld.zip http://zzo38computer.org/prog/farbfeld.zip or use the fossil repository http://zzo38computer.org/fossil/farbfeld.ui http://zzo38computer.org/fossil/farbfeld.ui Compile the programs that you want; in this case, ff-tensor, ff-enlarge, and ff-scanf. And then you will need the conversions; for example, ff-xcapture captures X window screen, ff-xwin displays the picture on the screen, pngff decodes PNG, and ffpng encodes PNG. (If you prefer, you can also use any other farbfeld programs (including the original implementation from suckless); the latest version of ImageMagick also supports farbfeld, so you can also use that to convert the pictures.) (You can ignore all of the files that you do not need (you do not need to compile all of them; in fact you can delete the files that you do not need); only a few of them have dependencies such as pngff and ffpng depend on LodePNG (which is included), and ff-xwin depends on X window system.)