Sub-pixel art - is there something smaller than pixel art? (film, 6m)
In the latest video, Japhy Riddle explores the concept of sub-pixel art, starting with an explanation of what sub-pixels actually are. He points out that a pixel is made up of three smaller rectangles, each corresponding to a different color—red, green, and blue. By combining these colors, our eyes can perceive various colors, even those not found in the traditional spectrum of a rainbow. He also shares an anecdote from his childhood about the color magenta, which results from the mixture of blue and red light, highlighting the complexity of color perception in our brains.
In direct relation to sub-pixels, Japhy Riddle moves on to the topic of sub-pixel art, which essentially involves using these sub-pixels to create artworks. He describes it as a method that theoretically allows for achieving three times the horizontal resolution if one ignores color. He cites a simple way to practically control sub-pixels, stating that one only needs to set the colors of the pixels correctly to activate them. This task requires suitable software like Nuke or Photoshop, which Japhy utilizes in his demonstration.
Riddle explains how one can convert a regular image into sub-pixel art using Photoshop. The process begins with squashing the image to one-third of its height, then converting it to 1-bit color using dithering. Next, through clever tricks with layers and their settings, the desired effect can be achieved. Japhy emphasizes that although the concept of sub-pixel art might seem extravagant, it has broader applications, such as in font smoothing.
Other aspects of sub-pixels are also noteworthy, like their use in modern camera sensors. Japhy mentions the complex structure of image sensors where colors correspond to different parts of an image. He also touches upon a topic not elaborated on in the video—how to hide text at the sub-pixel level, which could be an interesting subject for further investigation. One of these solutions is debayering, a process used in camera technology.
In conclusion, it's worth noting the video's statistics: as of writing this article, the material has gathered 569322 views and 34864 likes, showing that the topic of sub-pixel art attracts a lot of interest. Japhy Riddle certainly opens up new dimensions in digital art creation, encouraging his viewers to experiment with this unusual approach in their own projects.
Toggle timeline summary
-
Introduction to the concept of sub-pixel art.
-
Discussion about historical misconceptions regarding the smallest physical particles.
-
Clarifying the definition of a pixel and the need for magnification.
-
Introduction to sub-pixels: red, green, and blue components of a pixel.
-
Explanation that magenta is not a color in the rainbow, but a brain-perceived color.
-
Introduction to the idea of sub-pixel art.
-
How to control individual sub-pixels by adjusting pixel colors.
-
Demonstration of converting images into sub-pixel art using Photoshop.
-
Explanation of how spatial data is represented through color.
-
Discussion on the practical applications of sub-pixel art, such as font smoothing.
-
Introduction to how subpixels are used in modern camera sensors.
-
Exploration of hiding text within images at a subpixel level.
-
Conclusion and encouragement for viewers to create and share their sub-pixel art.
Transcription
This isn't pixel art. This is sub-pixel art. Okay, it's still pixel art. But what's sub... sub... what's a sub-pixel? Remember when atoms were thought to be the smallest particles? No, you don't. Unless you're around 130 years old, subatomic particles were discovered way before you or I were born. Okay, but remember when you thought a pixel was the smallest dot that could exist on your screen? You might still think that, but look closer. Depending on your display, you might need a magnifying glass to see what I'm talking about. I still use an older computer screen where I can easily see individual pixels with my eye, but something like a retina display makes that quite a challenge. Anyway, this is what a pixel looks like up close. Look, it's three little glowing rectangular boxes sandwiched together. A red one, a green one, and a blue one. These little rectangular boxes are sub-pixels. When different amounts of red, green, and blue light are combined, and those different colors of light enter our eyes, we can perceive any color of the rainbow, and even colors that aren't in the rainbow. When I was in first grade, I had a friendly argument with a fellow student about where magenta should go in the rainbow, or rather, how we should order our pens. I argued that it should be placed at the end of the rainbow, but she thought it should go at the beginning. We were both wrong. Magenta is a color that only takes place in our brains when we combine blue and red wavelengths of light. It's not in the rainbow spectrum. How cool is that? Now, for the sake of completeness, there are a number of other configurations of sub-pixels, but the repeating RGB stripe pattern is the most common as far as I know. But I confess that I haven't been paying much attention to advancements in screen technology, so feel free to let me know how wrong I am. Anyway, now that you know what a sub-pixel is, let's talk about sub-pixel art, which isn't really a thing outside of this video, to my knowledge. The idea is that your screen is actually capable of displaying three times its listed horizontal resolution, if you ignore color. Instead of turning on and off individual pixels to make an image, you can turn on and off the little red, green, and blue boxes within the pixels. Okay, how would you actually do that? Well, it's really simple. All you have to do to control the individual sub-pixels is control the color of the pixels they reside in. If you want to turn on the box on the left, make the pixel red. The one in the center? Make it green. The one on the right? Blue. And if you want to turn on multiple sub-pixels within a pixel, just add the colors of light together. I find it hard to imagine that anyone besides me would want to do this, but if you're as nuts as I am, there's a really easy way to convert any image into a sub-pixel image. Well, it's easy in theory. You have to have the right software. I have a very automated way of doing it using a program called Nuke. But since a lot of people have Photoshop or something similar enough, I'll demonstrate that concept using that program. The first thing is to create an RGB stripe pattern. Now take an image that you want converted to sub-pixel art. The first thing to do is squash it so it's a third its natural height. Now we need to convert it to 1-bit color. Use a dithering pattern if you're so inclined. Now multiply your squashed image and the RGB layers together. Select all the red pixels in the image. The easiest way to do this is with the wand. Make sure to turn off anti-aliasing and contiguity. Duplicate them to the right twice. Merge them and set their blend math to screen. Hide that layer to make things easier to see. So do the same thing with the green, only this time, duplicate them to the left and the right. And with the blue, it's the same process again, but this time, duplicate them to the left twice. Make a black background to sit behind them, and then unhide their layers so you can see them. Now resize your image's width to one-third its size and... It only looks weird because we're looking at spatial information, represented as color. If you view this at 1x scale, it works. Look at that. Spatial data and color are linked in this way. Look at how when I move this left and right, all the colors change. Fun fact, color on the Apple II computer actually works this way. Sort of. It's a little more complicated than that, but I don't want to spend a bunch of time explaining how the Apple II's video modes work. There are other YouTube videos that cover that in great depth. Okay, so what's the point of this? Well, for my purposes, not a lot. I just hadn't seen any drawings made exclusively at the subpixel level, so I had to try it out. But there are some practical applications that depend on subpixels. For instance, font smoothing. This black font on a white background actually has some subtle color to it. If we zoom in, you can clearly see that the letters are not just black. Color is employed to help anti-alias the letters and slightly shift the perceived locations of various features of each character. Not neat. Subpixels also come into play with modern single-chip camera sensors. Rather than stripes like we've been using here, the most common camera sensors use a pattern like this. When an image is focused onto the sensor, certain parts of the image will only land on certain colors. There are some really interesting solutions to this problem, but this is another topic that won't fit into the scope of this video. But if you're interested in that rabbit hole, look into debayering, or I've heard it said debiring as well, or demosaicing. Another possible usage, and I've never heard of anyone doing this, but someone's probably done it because what hasn't already been done, is hiding text within images on a subpixel level. Can you tell what this says? Well, if we view this at a 1x scale and take a picture of the monitor, and then desaturate that picture and then squish it vertically, look, totally legible. I think that's all I have to say about making art using subpixels. If you somehow feel inspired to give it a go, please show me what you make. Thank you for watching. See me next time.