Subpixel Snake: The Web's Smallest Game
HTML-код
- Опубликовано: 2 фев 2025
- This is a video about a JavaScript Snake game I wrote that uses the subpixels on your monitor as the board for the game Snake. It's so small that you need a microscope to play it correctly.
Game: patorjk.com/ga...
Code: github.com/pat...
Resource for subpixel geometries: geometrian.com...
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
0:16 >apologizes for shakiness<
Dude the shot is rock solid.
same
Yeah it does not move
@@sawsbone7303 dude, that was too much information. 😳😳
@@RoyBeerZ same
@@RoyBeerZsame
I love when people make goofy projects just to see what's possible.
Oh look, the black mesa research facility.
tho sometimes those goofy experiments end up in a resonance cascade
That's how humanity has advanced for centuries :P
@appakling Sometimes fiction is just fiction ;)
I agree. This is excellent.
cant wait for sub-subpixel doom
WE WILL BE WAITING
Gets a macro lens for Christmas, suddenly everything in the home needs a close-up examination.
I love random projects because they require you to learn about things that you didn't know existed. I had no idea that's how RBG worked with subpixels.
RGB not RBG
Okay, that is one of the coolest projects I’ve ever seen in a long time.
I know it's only a proof of concept rather than a polished game, but having the cherries 🍒 appear only on the red sub pixel would be so much more satisfying.
YOU MADE THAT SNAKE GAME? holy shit lol, I used to play that in class.
I was just thinking that! It was perfect cause I could resize the window to get food faster in the beginning.
kadedev like that fnf guy IM SO SORRY
Hi kade :D also 10/10 pfp
lol took me until that page to realise it's patorjk. used his ascii art generator so much over the years
Yeah same lmao seeing that pop up was like getting flashbanged, I spent a few too many classes in high school playing that exact one and messing with the zoom to play at different grid scales
This is such a fun little project. It's a straight forward concept, and presented a couple challenges that helped you learn a bit more. I think the curiosity aspect of 'i wonder what happens if i...' is such a positive force for exploring and learning
Making a JS snake game 15 years ago is peak ngl.
How to choose the wrong language so early on??? Impressive honestly
@@matejnovosad9152 ask the guys from Netscape, or blame it on the Internet Explorer 4
@@matejnovosad9152 I like using javascript the most so far, what's wrong with it? Java has too much unnecessary syntax
Wrong language?
Everything about JavaScript is wrong :p
This is so cool -- and I didn't know about that 0,255,0 green issue
This might just start a trend
Subpixel Game of Life?
Edit: comments of this comment suggest making it infinite, to see what kind of large scale pattern emerge from tiny pixels in a large monitor... so yeah
Thanks to commenters Purple11011 and technikchaot :)
not much of a gol fan, but that would be a sight to behold
@@Alistair on my 4k screen 24 Million cells in the Game of Life.
I might just do this now.
It would be really interesting to see what kind of large scale patterns emerge.
Good idea! I’d love to check this out.
Wow you actually uploaded something 10 days ago! I've been playing your javascript snake game for years in school. Decided to randomly check it out again, all these years later and found the link to your RUclips! I want you to know you're a legend for me and my friends in school for making that game and entertaining us all those years ago!
Back in the early 00s, I wrote an image resizer that could produce "subpixel enhanced" photos. It'd reduce by a factor of 3, but use the RGB subpixels to improve the horizontal resolution of the photo somewhat. Most screens were RGB but some were undetectably BGR, and the whole thing failed completely with CRT monitors. So, it was usually configured to only add in a configurable percentage of the subpixel version... I think it was usually about 33%. I did some "blind taste tests" with coworkers and they either couldn't tell the difference or found the processed images a mild improvement.
Of course, as soon as iPhones, iPads, HiDPI/Retina screens and smoothly zoomable browsers became popular the technique was obsolete. Still, it was an interesting thing to use for a few years.
That's fascinating! I had the same idea more recently, and I was wondering if anyone else had actually implemented it. Theoretically any subpixel arrangement would work if the image was high enough resolution, you'd just have to switch out the processing depending on the display.
How would that even work in practice? Would you have to give more control and responsibility to display drivers?
Thats why cleartype has the option to do the a/b tests for which looks right if it didn't auto guess it from the monitor id.
Granted cleartype matters a whole lot less if its configured right now than it did with early '00s lcds.
When I saw the website's domain name, I immediately recognized it-this is the website I always use to create ASCII art!
Love your project, Patrick!
Really cool man! Would love to see it running on different subpixel arangements just to see how they are handled along a line.
Fantastic video, man. What an awesome little project.
Wonderful project. My only suggestion is minor and is a modification to gameplay taking into account subpixel geometry. I would suggest reducing the vertical speed (or increasing the horizontal) by a factor somewhere between two and three to account for the longer subpixel aspect ratio. Looking at the example gameplay, that greatly increased vertical speed was the reason for the game overs that were shown.
This makes sense, because the game is programmed to move by unit of space, whereas our brain processes by unit of distance normally.
works good enough with the macro lens from the phone against the screen. The difference in vertical and horizontal subpixel sizes makes the speed change when you turn which adds to the difficulty of it being tiny
Staggered LED subpixel placement has always been preferred over aligned subpixels thanks to it producing a less aliased picture with a higher 'apparent' resolution. CRTs relied heavily on it at the tail end of CRT viability. The only reason older LCD monitors are aligned is for manufacturing convenience. The easiest way to get close to an ideal staggering is to turn the grid 45 degrees, and that's exactly how a lot of apple 'retina' displays did it. That complicates driving the panel, though.
Panel driver complications most likely a non-issue. Modern phones OLED panels are using Pentile while receiving standard RGB matrix from the OS. The panel driver chipset is able to convert that into coherent output in Pentile submatrix.
@@bltzcstrnx I don't think you could do this with pentile, right, since R and B are fraction of the resolution/shared?
Hell yeah, nice deep dive. I learned something today. Keep going!
Clever use of the LAB color space in CSS.
An idea for an even smaller game: "Whack a pixel": enter 1, 2 or 3 on you keyboard to hit the left, middle or right pixel to score points. Randomly light up pixel 1, 2 or 3 to show a pixel that can be whacked. Pixels only stay lit to be whacked for ~ .5 seconds before turning off on their own. After 60 seconds game ends. Your final score could be "announced" at the end of the game by long blinking for each 10 points you score followed by short blinks for each single point more. E.g. score of 97 would be announced at end by 9 long blinks then 7 short blinks.
0:40 I miss this format of Chevron pixels from Sony, they don't make those anymore. I have a TV that uses it, it is really good.
Sony makes good TVs. I've had that TV since 2009 and it still works great.
I believe Samsung uses this layout in their OLED panels on phones, and maybe in their TVs as well.
@@WyattFredaCowieSamsung uses Pentile on their phones OLED displays.
I don’t know that I’ve ever seen a subpixel game..I love this! I have a digital microscope, so I’ll check it out on a bunch of screens. Cool stuff man!
Liked & Subbed
I was watching this for a laugh, but I also learning something from it. And it got straight to the point. 10 out of 10 video!
What a cool project! Never thought the other colors would light up for “pure” green
That's crazy!! That regular sized javascript snake game you showed was insanely popular at my high school. It was one of only games that wasn't blocked by the our school site blocker.
For years I used to get messages from people telling me that - that it was the only game that wasn't blocked at their school. It was kind of amusing. I think it's because my website was originally a VB help site, so it probably got categorized as an educational site :P.
I think you've started a whole new gaming genre
This is awesome you deserve more views
This is an excellent video, great work, awesome project, loved the issue you ran into and the reason behind why
Thanks, learned something new! I've never considered anything but rgb(...) in CSS. Didn't know this was already so well supported!
Reminds me of my project that "encodes" text into subpixels (made after inspiration struck after watching a similar video).
It has a bit of a limited character set, but you end up with a wide image made out of a bunch of mostly uniform vertical stripes, a pixel different here or there, in 8 possible colours (RGB, CMY, black n white).
Also made a "renderer" that spits out a subpixel preview upscaled a few times so I don't need a microscope. Was fun to feed it a random regular image and see it blown up in fake subpixels.
This (your project, that is) is way cooler than whatever I could have done with subpixels back then though! 🔥
You don't even need a macro lens to see some subpixels. Put a couple of water droplets on your phone and the light will refract outwards, causing a zoom effect strong enough to see these subpixels on certain pixel densities.
Thanks!
also you can use really strong magnifying glass
Damn I remember seeing a vid about sub pixel art recently, nice to see a fellow viewer if that is the case. Otherwise it's a fun coincidence)))
The algo is probably recommending other vids on subpixels. I hadn't seen that video but it was really good!
Don't know if anyone else was curious about this but from my casual look-over the game resolution seems to be 5x7 or 35 pixels (not including border and assuming each strip of 3 colours is a pixel). This means you could fit 658 of these into a Game Boy Color Screen, or 9874 of them into the standard resolution of an NTSC DVD or 59245 subpixel snakes in a standard Full HD 1080x1920 screen.
Dude u made the best explanation there is!
I clicked this not expecting to see patorjk, but its a happy little surprise
I remember using his tools over a decade ago... seeing "patorjk" hit me like the Critic in Ratatouille
@@Johnyknowhow i used his text generator for random stuff, and i agree, it seems to be a shared feeling haha
This is AMAZING. How have you not won a world record already
"To my surprise, things at the sub-pixel level were not working as expected".
I'm happy when things work at the monitor level.
Finnally.. ive been yearning for more subpixel content
You can use ResizeObserver, then take inlineSize and blockSize to scale the canvas to physical pixels. Additionally, you need to apply image-rendering: pixelated to the canvas just in case.
1:47 i played this so much in class a few years ago, cool that you made it
same
Dude!! It took me until you mentioned the original snake game to realize I used to play your snake game all the time 10 years ago in high school. Had a “wait….no WAY this is the patorjk snake guy” moment😂
I even made my own snake game as one of my first coding projects and used the style of yours as inspiration. This is the coolest thing ever seeing this pop up on my RUclips, cheers man 🫶
Few years ago I was experimenting to get more details on low PPI LCD screens. I have my old laptop with 1024x768 display and I've write some code to convert hi-res images to 1024x768 by preserving details in sub-pixels. Basically you need an image with 3072 horizontal resolution, so you compress 3-pixels into each subpixel.
I've compared such images with normally compressed ones and my approach had surprisingly more details.
This can be definitely used on 4K displays to get near 6K look or on 1440p screens.
Custom DLSS (as DLAA) could be used to push more details into scenes in games.
The reason why this wasn't never a thing is because display resolution is increasing faster than hardware can keep up. Just think that 4K is still not a standard in video production (blockbuster movies are made in 2K and then upscaled to 4K with AI for bluray release) and only high-end PC hardware is capable of 4K gaming. 1200-1440p gaming is the standard, while consoles can't even maintain stable 60 FPS in 1080p.
Sub-pixel rendering was often used for rendering text such as with Microsoft ClearType. Though, I'm not sure if it's as relevant now that High DPI displays are common. It can also look bad on some monitors as there's generally no way for the software to detect the sub pixel arrangement of the display.
I thought the QR that contained the snake game was insane but this just doesn't stop
you should apply for a guiness world record
no thats just "who can pay to get listed"
Yeah, guiness is a huge scam, they just ask for a shitton of money to promote you with a silly "record"
hhbomberguy has good videos on that topic
And hand those scammers more money?
@@totoshampoin three people, actually!
it started with Japhy Riddle playing around with subpixel art, then both @LuckyBacon and I posted Tetris with subpixels (mine was a recreation of @LuckyBacon's)
I think people have already managed to play snake on an atomic scale so this isn't the smallest game of snake or anything like that
Darn, quite impressive project I must say! :D
Great job!
That's actually SMART!
I never thought that we could split a pixel.
1. create desktop applications that need to be built for the specific hardware
2. shift to web applications that can run on each OS and device
3. code a web application that works different on each screen 😄
This video shoul've been at least 15 minutes. Thank you for your efford and experiment.
Awesome project and very interesting theory behind it 🎉
Very cool, and thanks for sharing for all of us to play.
Bro i played that snake game all the time in class, its my favorite version to play. Who wouldve known od be brought back to the creator all these years later
love it! after going to 10fps on my cheap usb microscope to get the latency down i was able to play :) Now i also know my monitor's subpixel layout!
It's funny how new generation has never seen older screens with subpixels visible from a mile away.
What a cool project with some interesting results.
1:24 _"neat diamond pattern."_
It is called a Color Filter Array, specially a *Bayer Filter* with a 2x2 pattern.
i can actually play it on my 1080p monitor relatively easily, if you keep in mind the difference in speed between left/right and up/down
1:01 and yet we spend thousands of dollars trying to recreate the black color
Because it's not a color. It's a lack of color. And ambient light from LEDs cause a glowing effect on LCDs so we have to find alternative ways to render pixels while avoiding this problem.
@@dotXyorer/woooosh
@@dotXyore Like an OLED
@@dotXyoregive this man a facts
got some terms wrong and mixed up some concepts but you got the point!
@@dotXyore
Adding a bit of red to green in RGB additive space makes the green appear a little bit more yellowish..... which is what sRGB uses for 0,255,0
A nice real life application of this is to slap a bubble magnifier on those tiny 1inch OLEDs and you suddenly get 3x (well, in the horizontal) resolution size out of them!
3:22 PLEASE USE ADBLOCK
Lab is a completely different color model but if you simply swap an RGB value by its correspondin Lab value, it'll still be the same target color on the screen. What you'd have to do is figure out what the native gamut of your screen is and use that instead of sRGB. Or ideally just bypass that altogether and directly overwrite the subpixel values but I'm guessing that's some advanced hackery to achieve.
I mean what you did do clearly worked but based on your explanation here I'm dubious about it working "for the right reasons" if that makes sense.
I think in native Cocoa you basically just need to ask for deviceRGBColorSpace instead of sRGBColorSpace and you can draw raw RGB. On Windows I don't think the system itself does anything with the colors if you just draw raw GDI, thought drivers might in some cases. If you're trying to do things with Javascript inside a browser though, then you're at the mercy of the browser, basically.
Pixels also lighting up a bit of red reminds me eerily of printers also printing a bit of yellow or cyan or whatever when you actually just wanna print black and white
I remember playing your js snake game during class all the time
Dang it, after a couple of tries length 7 without a microscope. Now my eyes hurt...
wait holy shit *you're* patorjk?! your tools are so god damn helpful, i use the text fader all the time!
You could put the game into the favicon of the webpage!
Gaphy Riddle posted a pretty good video about sub pixel art a few months ago.
zooming in kind of makes a 3d snake where you have to match the color and position of the apple to eat it
I love when a person / multiple make something very, goofy or cool tho it is kinda pointless or just see the limit of possibility!
I came for the snake and stayed for the colorspace 😀
Meanwhile I make an electromechanical snake with 1cm dots...
now i expect this game also come in a extremely small binary so it's truly a microgame
hey I remember playing that javascript snake game when I was in middle school! had no idea the guy who made it had a youtube
This is so sick, very creative
underated
nothing fancy codewise but good to see you learned something
3:43 "fruitless" Nice.
truely awesome project!
That green thing is cool to learn about! So `lab` is how to address subpixel? I have not heard of this.
Yep! LAB is a color space that's much larger than sRGB. Most modern monitors can display way more colors than what sRGB provides, and the only way I was able to target the green subpixel without turning on the red or blue ones was to use this larger color space. Essentially, it allowed me to use a greener green.
Would be easy on some of my CRTs, I like the subpixel layout on my early 2000s 13" RCA and my Panasonic PVM. Totally different, both beautiful. I took a lovely sub pixel image of Alucard while replaying SOTN on PSX. Looked so good, love that thing.
You can actually see them with the naked eye, at least when it's green.
YOOO YOU MADE THAT SNAKE SITE? I love you man
Subpixel DOOM next??
There’s also the issue with calibration. The colors may not be completely accurate
This is a great idea! Bummed I didn't think of this. Great work man!
YOU MADE THAT JS SNAKE GAME???? I played that exact js snake game to death in high school
Yep :)
This is dope but I've always wondered. What do pixels look like when turned off? Like at the microscopic level? I've never seen a photo of pixels as objects.
Smallest possible font using subpixel is a one pixel wide 3 pixel height.
Back in days, i saw entire book of lotr in this font... It was 3 pages only on a fhd resolution.
edit: i found it, by word millitext lotr
I checked the page and for some reason I figured zooming in would do the trick. I don't know why I thought it would do the trick but it quite didn't.
Very interesting video, although if you wanted to make the "smallest" game I doubt snake would be it. If you wanted to do a part 2, perhaps make a Simon type game with the RGB of a single pixel and keyboard inputs (like the 123 keys) instead of clicking the colours (for obvious reasons).
Yeah, if someone wanted to take the title of smallest game from this it would be pretty easy. It's probably possible to target a sub-subpixel for a game like Simon. Those seems to control the brightness, so someone could make something really really small. Though such a game would be very device dependent. For this I was mostly just going for a subpixel version of snake. I came up with the title and thumbnail right before I upload the video :P.
@@patorjk Yeah, that's understandable. I did click on the title and thumbnail and watch the whole video so I'd say it was pretty good :P
Super cool project!
I used to play that js snake game in the 6th grade 10 years ago!
You made that Javascript snake game? I randomly stumbled across that like 8 years ago, and now I randomly find you again? That's wild!
I've also played with subpixel stuff. Some displays also for some reason only turn an area red when a pixel and the pixels around it are red.
I had way too much fun playing this on my new 1440p monitor lmao
never go sub-subpixel Scott, we won't be able to bring you back
Yo this was neat. Thankya!