5 ms·

Yesterday's Pixels, Today

184 points by luu 2y ago

hettygreen 2y ago
I like the trick of rendering in a small resolution and then scaling it back up without anti-aliasing and stuff. I wonder if there's any way to do chunky pixel static websites like that just using CSS in the same way?
- JKCalhoun 2y ago
  Yeah, not sure. Rendering first to an HTML5 Canvas, but how to render CSS, etc. to a Canvas is beyond me. Maybe just a lot of custom CSS/HTML to give the appearance: https://www.vcfmw.org https://www.vcfmw.org
  - rikroots 2y ago
    The terrible, very cheaty way to do it is to screen capture a website from a browser tab, and display it in another browser tab inside a canvas element with some form of pixelize filter applied. https://scrawl-v8.rikweb.org.uk/demo/dom-019.html https://scrawl-v8.rikweb.org.uk/demo/dom-019.html
- jdiff 2y ago
  Short answer: Not really. Long answer: Sorta, with a lot of overbearing caveats. Normal HTML elements cannot be rendered this way, there's no way to disable AA when drawing and no way to disable bilinear (or similar) filtering when scaling. Things will lose resolution, but they'll blur rather than chunk. Image elements and canvases CAN be scaled to preserve pixels. Anything you draw to a canvas can be kept chunky, but you'll be writing your own rendering routines because the browser does not know how to lay off the AA. There's probably some treachery you can pull off through SVG.
  - zamadatix 2y ago
    Example of some SVG treachery (getting an exact retro style this way would be difficult to say the least) https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0 https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0
    - jdiff 2y ago
      Heads up, Firefox doesn't like SVG filters being applied to the root element, but the body element works just fine. Pretty impressive effect, seems tricky to tame though. Where's this gingham pattern bubble up from?
jtolmar 2y ago
Going as far as adding lines support to Blender gltf export is quite a flex! And it looks really good on the Ferris wheel.
megablast 2y ago
Looks great, but is there a video??
- wffurr 2y ago
  You can play it: https://nasser.itch.io/restricted-airspace https://nasser.itch.io/restricted-airspace I did not find any videos.
malet 2y ago
All of the twitter links are broken for me
- zimpenfish 2y ago
  Seems like the posts were deleted. Sadly don't seem to be in the Wayback Machine either.
- lelanthran 2y ago
  They're broken for everyone. It seems that each new internet generation needs to learn the hard way that linking to walled gardens (FB, twitter, reddit, etc) breaks their site.
- ulfw 2y ago
  And nothing of value was lost. I hope people finally move on from this 'X' shitshow.
  - layer8 2y ago
    X being a shitshow is exactly why a lot of value was lost.
  - PhasmaFelis 2y ago
    > And nothing of value was lost. Some presumably nice and relevant images were lost.
andybak 2y ago
@dang - article needs a Oct 22 2019 date (spotted this because the "unfinished Blender PR" mentioned was merged several years ago)
- latexr 2y ago
  @mentions don’t do anything. If you want to reach dang, click the contact link at the bottom and send an email.
wzdd 2y ago
The final result looks great, but I found it even more convincing limiting it to about 15 FPS: https://jsfiddle.net/9mksgbe6/1/ https://jsfiddle.net/9mksgbe6/1/
- zamadatix 2y ago
  I don't know if it was an intentional choice or not but that's pretty much the general performance range of Star Fox too.
ricardobeat 2y ago
Just want to thank you for using actual low resolution rendering, and not pixelated-looking objects on a high-res surface. This looks great! The way smooth parallax and sometimes different pixel sizes (!) show up in “retro” games is a huge pet peeve of mine.
- mistercow 2y ago
  Varying pixel sizes, pixels offset from their natural grid, and even rotated pixels were actually not uncommon in retro games. Take a look at just about any SNES game that did advanced Mode 7 effects, like Pilot Wings or Super Mario Kart, and you'll see examples of pixels being rendered at varying scales outside their native resolution. It's not the same look as modern games, because the screen resolution was much lower than what we have today, but to me, high resolution rendering of transformed low resolution sprites is a perfectly valid successor aesthetic. It's not the same as what a game would have looked like in the 90s, but as others have pointed out in this thread, neither are crisp full-color pixels rendered as perfect squares. It's all an interpretation. On the other hand, what I cannot abide are "low poly" models that use polygons other than triangles and convex quads. I will die on this hill.
woolion 2y ago
Ex-Zodiac is another Star Fox inspired game that was released on Steam with big chunky pixels. It comes with the option to disable the pixel filter to simply play with a clean low poly aesthetic. I find the big pixels to be extremely tiring after only a few minutes, so I find this option to be a game-changer (pun intended). Typing this I remembered "A short Hike" similarly had the option to disable it and I also preferred it disabled. It wasn't as important as it is slower paced though.
layer8 2y ago
Yesterday’s pixels look quite different on today’s screens than they looked on CRTs of the time. In particular, “pixel-perfect lines and points” weren’t a perfectly sharp grid, but mixed up and re-defined by the CRT’s shadow mask and scanlines, making them look more organic and less pixelated. Look at this for example (CRT left, “perfect” pixels right): https://cdn.xcancel.com/pic/orig/media%2FFQI0t9PacAALT14.jpg https://cdn.xcancel.com/pic/orig/media%2FFQI0t9PacAALT14.jpg Many more examples here: https://xcancel.com/CRTpixels https://xcancel.com/CRTpixels
glitchc 2y ago
I don't understand the love for thick pixels. The effect clearly reflects the resource constraints of the platform. Is there anything here beyond nostalgia?
- layer8 2y ago
  It’s also false nostalgia: https://news.ycombinator.com/item?id=41282225 https://news.ycombinator.com/item?id=41282225
  - tekknolagi 2y ago
    Not if you had LCD video games like on a Gameboy.
    - layer8 2y ago
      The Game Boy is a bit of a different story, but its pixels weren’t as chunky because they had significant separating lines, and the long LCD afterglow blurred anything in motion, further supported by its low contrast. It’s still quite difficult to accurately emulate the appearance of the real Game Boy screen on modern displays.
  - deleted 2y ago
    [deleted]
- bogwog 2y ago
  It might have originated from specific technical constraints, but it's a unique art style. Some people will like it, other people won't. Nostalgia might be a factor in its popularity, but people without nostalgia can (and do) fall in love with it.
  - glitchc 2y ago
    It's akin to falling in love with brutalist architecture IMO.
- hoseja 2y ago
zamadatix 2y ago
Yesterdays aesthetic wasn't thick chunky pixels with outputs exactly matching the indexed palettes with wide color range. Sure, resolution was low and color choice was limited... but so similarly limited was the way we transmitted and displayed things. These dithered polygon shadings turned into new colors, the blocky details into new smooth shapes, and the colors overall more muted than just popping the RGB value onto a modern screen would suggest. That's not to say this aesthetic is "bad" (I'm actually quite fond of it and similar styles too) but just that it's absolutely nothing like the emulated Star Fox screenshots being used as the target suggest. If yesterday's pixels is the goal then this is missing the main part of what made those pixels look the way they did. For those who haven't seen games like this on the typical technology of the era: this is a photo of LCD output using a similar path as taken here, a photo the same with a CRT emulation shader, and a photo of an actual CRT (don't take this one CRT to be gospel of what every CRT output from all of time looked like) https://i.imgur.com/lo8ytRq.jpeg https://i.imgur.com/lo8ytRq.jpeg
- bitwize 2y ago
  I know, right? It's like those people who listen to Zeppelin on CD or -- ugh -- streaming instead of how they were meant to be listened to: on vinyl.
  - zamadatix 2y ago
    There's no right or wrong way to enjoy good content but if you're goal is to recreate the original aesthetic then "Hey Siri, play Stairway to Heaven remastered" isn't that.
    - dahart 2y ago
      Meh, the remastered version is what they wish they could have done the first time, and what they would have done if digital audio had been available. People have nostalgia for the limitations of tape and vinyl and radio, but that’s what they were, limitations, not an aesthetic choice.
      - 2y ago
lulzury 2y ago
Very cool style! I wonder if one could further reduce some of the constraints (i.e. # colors on palette), maintain the pixelated style, but improve overall aesthetics.

184 points by luu 2y ago

I like the trick of rendering in a small resolution and then scaling it back up without anti-aliasing and stuff. I wonder if there's any way to do chunky pixel static websites like that just using CSS in the same way?

JKCalhoun 2y ago
Yeah, not sure. Rendering first to an HTML5 Canvas, but how to render CSS, etc. to a Canvas is beyond me. Maybe just a lot of custom CSS/HTML to give the appearance: https://www.vcfmw.org https://www.vcfmw.org
- rikroots 2y ago
  The terrible, very cheaty way to do it is to screen capture a website from a browser tab, and display it in another browser tab inside a canvas element with some form of pixelize filter applied. https://scrawl-v8.rikweb.org.uk/demo/dom-019.html https://scrawl-v8.rikweb.org.uk/demo/dom-019.html
jdiff 2y ago
Short answer: Not really. Long answer: Sorta, with a lot of overbearing caveats. Normal HTML elements cannot be rendered this way, there's no way to disable AA when drawing and no way to disable bilinear (or similar) filtering when scaling. Things will lose resolution, but they'll blur rather than chunk. Image elements and canvases CAN be scaled to preserve pixels. Anything you draw to a canvas can be kept chunky, but you'll be writing your own rendering routines because the browser does not know how to lay off the AA. There's probably some treachery you can pull off through SVG.
- zamadatix 2y ago
  Example of some SVG treachery (getting an exact retro style this way would be difficult to say the least) https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0 https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0
  - jdiff 2y ago
    Heads up, Firefox doesn't like SVG filters being applied to the root element, but the body element works just fine. Pretty impressive effect, seems tricky to tame though. Where's this gingham pattern bubble up from?

jtolmar 2y ago

Going as far as adding lines support to Blender gltf export is quite a flex! And it looks really good on the Ferris wheel.

megablast 2y ago

Looks great, but is there a video??

wffurr 2y ago
You can play it: https://nasser.itch.io/restricted-airspace https://nasser.itch.io/restricted-airspace I did not find any videos.

malet 2y ago

All of the twitter links are broken for me

zimpenfish 2y ago
Seems like the posts were deleted. Sadly don't seem to be in the Wayback Machine either.
lelanthran 2y ago
They're broken for everyone. It seems that each new internet generation needs to learn the hard way that linking to walled gardens (FB, twitter, reddit, etc) breaks their site.
ulfw 2y ago
And nothing of value was lost. I hope people finally move on from this 'X' shitshow.
- layer8 2y ago
  X being a shitshow is exactly why a lot of value was lost.
- PhasmaFelis 2y ago
  > And nothing of value was lost. Some presumably nice and relevant images were lost.

andybak 2y ago

@dang - article needs a Oct 22 2019 date (spotted this because the "unfinished Blender PR" mentioned was merged several years ago)

latexr 2y ago
@mentions don’t do anything. If you want to reach dang, click the contact link at the bottom and send an email.

wzdd 2y ago

The final result looks great, but I found it even more convincing limiting it to about 15 FPS: https://jsfiddle.net/9mksgbe6/1/ https://jsfiddle.net/9mksgbe6/1/

zamadatix 2y ago
I don't know if it was an intentional choice or not but that's pretty much the general performance range of Star Fox too.

ricardobeat 2y ago

Just want to thank you for using actual low resolution rendering, and not pixelated-looking objects on a high-res surface. This looks great! The way smooth parallax and sometimes different pixel sizes (!) show up in “retro” games is a huge pet peeve of mine.

mistercow 2y ago
Varying pixel sizes, pixels offset from their natural grid, and even rotated pixels were actually not uncommon in retro games. Take a look at just about any SNES game that did advanced Mode 7 effects, like Pilot Wings or Super Mario Kart, and you'll see examples of pixels being rendered at varying scales outside their native resolution. It's not the same look as modern games, because the screen resolution was much lower than what we have today, but to me, high resolution rendering of transformed low resolution sprites is a perfectly valid successor aesthetic. It's not the same as what a game would have looked like in the 90s, but as others have pointed out in this thread, neither are crisp full-color pixels rendered as perfect squares. It's all an interpretation. On the other hand, what I cannot abide are "low poly" models that use polygons other than triangles and convex quads. I will die on this hill.

woolion 2y ago

Ex-Zodiac is another Star Fox inspired game that was released on Steam with big chunky pixels. It comes with the option to disable the pixel filter to simply play with a clean low poly aesthetic. I find the big pixels to be extremely tiring after only a few minutes, so I find this option to be a game-changer (pun intended). Typing this I remembered "A short Hike" similarly had the option to disable it and I also preferred it disabled. It wasn't as important as it is slower paced though.

layer8 2y ago

Yesterday’s pixels look quite different on today’s screens than they looked on CRTs of the time. In particular, “pixel-perfect lines and points” weren’t a perfectly sharp grid, but mixed up and re-defined by the CRT’s shadow mask and scanlines, making them look more organic and less pixelated. Look at this for example (CRT left, “perfect” pixels right): https://cdn.xcancel.com/pic/orig/media%2FFQI0t9PacAALT14.jpg https://cdn.xcancel.com/pic/orig/media%2FFQI0t9PacAALT14.jpg Many more examples here: https://xcancel.com/CRTpixels https://xcancel.com/CRTpixels

glitchc 2y ago

I don't understand the love for thick pixels. The effect clearly reflects the resource constraints of the platform. Is there anything here beyond nostalgia?

layer8 2y ago
It’s also false nostalgia: https://news.ycombinator.com/item?id=41282225 https://news.ycombinator.com/item?id=41282225
- tekknolagi 2y ago
  Not if you had LCD video games like on a Gameboy.
  - layer8 2y ago
    The Game Boy is a bit of a different story, but its pixels weren’t as chunky because they had significant separating lines, and the long LCD afterglow blurred anything in motion, further supported by its low contrast. It’s still quite difficult to accurately emulate the appearance of the real Game Boy screen on modern displays.
- deleted 2y ago
  [deleted]
bogwog 2y ago
It might have originated from specific technical constraints, but it's a unique art style. Some people will like it, other people won't. Nostalgia might be a factor in its popularity, but people without nostalgia can (and do) fall in love with it.
- glitchc 2y ago
  It's akin to falling in love with brutalist architecture IMO.
hoseja 2y ago

zamadatix 2y ago

Yesterdays aesthetic wasn't thick chunky pixels with outputs exactly matching the indexed palettes with wide color range. Sure, resolution was low and color choice was limited... but so similarly limited was the way we transmitted and displayed things. These dithered polygon shadings turned into new colors, the blocky details into new smooth shapes, and the colors overall more muted than just popping the RGB value onto a modern screen would suggest. That's not to say this aesthetic is "bad" (I'm actually quite fond of it and similar styles too) but just that it's absolutely nothing like the emulated Star Fox screenshots being used as the target suggest. If yesterday's pixels is the goal then this is missing the main part of what made those pixels look the way they did. For those who haven't seen games like this on the typical technology of the era: this is a photo of LCD output using a similar path as taken here, a photo the same with a CRT emulation shader, and a photo of an actual CRT (don't take this one CRT to be gospel of what every CRT output from all of time looked like) https://i.imgur.com/lo8ytRq.jpeg https://i.imgur.com/lo8ytRq.jpeg

bitwize 2y ago
I know, right? It's like those people who listen to Zeppelin on CD or -- ugh -- streaming instead of how they were meant to be listened to: on vinyl.
- zamadatix 2y ago
  There's no right or wrong way to enjoy good content but if you're goal is to recreate the original aesthetic then "Hey Siri, play Stairway to Heaven remastered" isn't that.
  - dahart 2y ago
    Meh, the remastered version is what they wish they could have done the first time, and what they would have done if digital audio had been available. People have nostalgia for the limitations of tape and vinyl and radio, but that’s what they were, limitations, not an aesthetic choice.
    - 2y ago

lulzury 2y ago

Very cool style! I wonder if one could further reduce some of the constraints (i.e. # colors on palette), maintain the pixelated style, but improve overall aesthetics.