4 ms·

Running Pong in 240 browser tabs

350 points by pr337h4m 2y ago

capitainenemo 2y ago
WRT firefox and narrower tabs. You can still inspect the browser in firefox, and find the style rule for min tab width, then add it to userChrome.css There's a few guides out there on this, and I'm sure someone has done one for tab width already. Maybe that's cheating though. (there's also browser.tabs.tabMinWidth but I think it still forces a minimum unfortunately)
wedocharlie 2y ago
The band "Ok Go" did a collaboration music video with google chrome once that had some really amazing synchronization of browser windows with dancers, and kaleidoscope like effects... This reminded me of that.
- wedocharlie 2y ago
  Here's what it looked like: https://www.youtube.com/watch?v=ISL1GfXwr-o https://www.youtube.com/watch?v=ISL1GfXwr-o
  - Rendello 2y ago
    I was introduced to Arcade Fire back in the day through a similar Chrome experiment: https://www.youtube.com/watch?v=ReIwYj7BACM https://www.youtube.com/watch?v=ReIwYj7BACM
- deleted 2y ago
  [deleted]
luma 2y ago
Delightfully absurd, A+ effort!
ge96 2y ago
really cool, I like how modifiable Chrome can be, looks like this one uses websockets but you can use an extension for tab communication too
- remram 2y ago
  Or just the web storage API
  - ashu1461 2y ago
    and a listener on the storage change then ?
smithcoin 2y ago
Love anything made by Nolen. To me it seems like he’s hitting the sweet spot of developing single purpose apps/sites that give me nostalgia for what the internet used to be like.
qingcharles 2y ago
Obligatory: https://imgur.com/a/FcYpGz1 https://imgur.com/a/FcYpGz1
LonelyWolfe 2y ago
I'm calling it - Doom is next.
- rhgraysonii 2y ago
  I believe that Nolen has already done doom in iPhoto, if you are into that kind of thing.
- eieio 2y ago
  Doom is kind of a pain because: * afaik I'm capped at 4 FPS (just how often you can update tabs) * more of the screen is likely to update on each frame, which requires way more "turning canvases into data urls to update favicons," which is expensive with my current implementation (although I wasn't aware of offscreencanvas, which might help here)
  - graypegg 2y ago
    To be fair, doom is also a pain on a calculator[0]/pregnancy test[1]/milling machine[2]/touch bar[3]/PDF document[4]! I think that's part of the fun! I absolutely love this stuff... I sort of think Doom at 4FPS is... juuuuust in the realm of playable if you've played it before haha [0] https://news.ycombinator.com/item?id=2251463 https://news.ycombinator.com/item?id=2251463 [1] https://news.ycombinator.com/item?id=24396780 https://news.ycombinator.com/item?id=24396780 [2] https://www.reddit.com/r/Doom/comments/ezuw1f/doom_on_cnc_machine/ https://www.reddit.com/r/Doom/comments/ezuw1f/doom_on_cnc_ma... [3] https://news.ycombinator.com/item?id=13008315 https://news.ycombinator.com/item?id=13008315 [4] https://news.ycombinator.com/item?id=42678754 https://news.ycombinator.com/item?id=42678754
rhgraysonii 2y ago
I attended Nolen's recent talk at Recurse, and these absolutely mad but fundamentally funny and cool games as one-shots are so delightful. It reminds me of the older internet, when people would make things just to be silly and have fun. I had some fun last night inspired by some of the stuff he has been posting making a very funny kind-of-quine that outputs its own source code of the page showing it, via BEAM decompilation and some other tricks. I wish I had the time to crank out things like this, and it makes me smile to know that there are people out there creating things in this manner that will just keep things interesting for all of us. The piece that gets the sort-of quine is here, if anyone wants a laugh https://github.com/notactuallytreyanastasio/blog/blob/main/lib/code_inspector.ex https://github.com/notactuallytreyanastasio/blog/blob/main/l...
eieio 2y ago
ah hi! I made this! was wondering if this one would appeal to the HN crowd :) Happy to answer any questions! And here are a couple of scattered thoughts: * I'm really interested in what this looks like if you use animations (firefox supports animated favicons) - I could, for example, anticipate future ball positions and create animated SVGs to get a much nicer framerate. * A friend pointed out offline that canvas rasterization (typically) is on the GPU, which is probably why my performance intuitions with my stuttering animation were so wrong * I am only moderately confident that chrome caps favicon updates to 4 a second; I know there are a lot of different ways to update favicons and I could have missed something here!
- dataviz1000 2y ago
  > A friend pointed out offline that canvas rasterization (typically) is on the GPU, which is probably why my performance intuitions with my stuttering animation were so wrong Did you solve it? A great resource is Jake Gordon's blog on simple JavaScript game design. He uses a double buffer front and back canvas game loop. [0] https://jakesgordon.com/writing/javascript-pong/part1/ https://jakesgordon.com/writing/javascript-pong/part1/
  - eieio 2y ago
    Sorry yeah I'm talking very specifically about the stuttering that I first saw when making a square move into the tab bar. I was doing something inefficient (updating all my favicons many times a second), but I didn't really understand why that would cause stuttering in my foregrounded tab. My thought process was that the favicon stuff was happening in different tabs in different threads, and so it didn't make sense to me that the thread in charge of the foregrounded animation should suffer (unless my entire computer had slowed to a crawl and everything was getting slower - but it hadn't). And my friend's point was just that i was probably GPU-bound and not CPU-bound (or at least I could be) and so I was not thinking about the original problem correctly.
- deleted 2y ago
  [deleted]
- 2y ago
sho_hn 2y ago
Doom port in days.
aqueueaqueue 2y ago
Checkboxes now tabs. Always finding a novel place to get those coveted pixels
nektro 2y ago
now this is the kind of thing HN was made to showcase. excellent work friend ^.^
dejawu 2y ago
A similar exploration by Matthew Rayfield using the URL bar instead of tab favicons: https://www.youtube.com/watch?v=q7GtCLwTmV4 https://www.youtube.com/watch?v=q7GtCLwTmV4
- eieio 2y ago
  Matt's work is a huge inspiration for me! I definitely had his URL stuff in mind when making this, but it'd been a while since I had actually read through his blog / watched his video. It was really fun to come back to it mid-project and remember that he went in the same "stack windows to get 2 dimensions" direction.
fitsumbelay 2y ago
impressive as always
kvemkon 2y ago
Reminds me of: * "Show HN: I saw this mind-blowing experiment, so I made a simple version of it" (25.11.2023) https://news.ycombinator.com/item?id=38413660 https://news.ycombinator.com/item?id=38413660 * "Synchronize a 3D scene across multiple windows using Three.js and localStorage" (27.11.2023) https://news.ycombinator.com/item?id=38437773 https://news.ycombinator.com/item?id=38437773
backyardflock 2y ago
[flagged]

350 points by pr337h4m 2y ago

WRT firefox and narrower tabs. You can still inspect the browser in firefox, and find the style rule for min tab width, then add it to userChrome.css There's a few guides out there on this, and I'm sure someone has done one for tab width already. Maybe that's cheating though. (there's also browser.tabs.tabMinWidth but I think it still forces a minimum unfortunately)

wedocharlie 2y ago

The band "Ok Go" did a collaboration music video with google chrome once that had some really amazing synchronization of browser windows with dancers, and kaleidoscope like effects... This reminded me of that.

wedocharlie 2y ago
Here's what it looked like: https://www.youtube.com/watch?v=ISL1GfXwr-o https://www.youtube.com/watch?v=ISL1GfXwr-o
- Rendello 2y ago
  I was introduced to Arcade Fire back in the day through a similar Chrome experiment: https://www.youtube.com/watch?v=ReIwYj7BACM https://www.youtube.com/watch?v=ReIwYj7BACM
deleted 2y ago
[deleted]

luma 2y ago

Delightfully absurd, A+ effort!

ge96 2y ago

really cool, I like how modifiable Chrome can be, looks like this one uses websockets but you can use an extension for tab communication too

remram 2y ago
Or just the web storage API
- ashu1461 2y ago
  and a listener on the storage change then ?

smithcoin 2y ago

Love anything made by Nolen. To me it seems like he’s hitting the sweet spot of developing single purpose apps/sites that give me nostalgia for what the internet used to be like.

qingcharles 2y ago

Obligatory: https://imgur.com/a/FcYpGz1 https://imgur.com/a/FcYpGz1

LonelyWolfe 2y ago

I'm calling it - Doom is next.

rhgraysonii 2y ago
I believe that Nolen has already done doom in iPhoto, if you are into that kind of thing.
eieio 2y ago
Doom is kind of a pain because: * afaik I'm capped at 4 FPS (just how often you can update tabs) * more of the screen is likely to update on each frame, which requires way more "turning canvases into data urls to update favicons," which is expensive with my current implementation (although I wasn't aware of offscreencanvas, which might help here)
- graypegg 2y ago
  To be fair, doom is also a pain on a calculator[0]/pregnancy test[1]/milling machine[2]/touch bar[3]/PDF document[4]! I think that's part of the fun! I absolutely love this stuff... I sort of think Doom at 4FPS is... juuuuust in the realm of playable if you've played it before haha [0] https://news.ycombinator.com/item?id=2251463 https://news.ycombinator.com/item?id=2251463 [1] https://news.ycombinator.com/item?id=24396780 https://news.ycombinator.com/item?id=24396780 [2] https://www.reddit.com/r/Doom/comments/ezuw1f/doom_on_cnc_machine/ https://www.reddit.com/r/Doom/comments/ezuw1f/doom_on_cnc_ma... [3] https://news.ycombinator.com/item?id=13008315 https://news.ycombinator.com/item?id=13008315 [4] https://news.ycombinator.com/item?id=42678754 https://news.ycombinator.com/item?id=42678754

rhgraysonii 2y ago

I attended Nolen's recent talk at Recurse, and these absolutely mad but fundamentally funny and cool games as one-shots are so delightful. It reminds me of the older internet, when people would make things just to be silly and have fun. I had some fun last night inspired by some of the stuff he has been posting making a very funny kind-of-quine that outputs its own source code of the page showing it, via BEAM decompilation and some other tricks. I wish I had the time to crank out things like this, and it makes me smile to know that there are people out there creating things in this manner that will just keep things interesting for all of us. The piece that gets the sort-of quine is here, if anyone wants a laugh https://github.com/notactuallytreyanastasio/blog/blob/main/lib/code_inspector.ex https://github.com/notactuallytreyanastasio/blog/blob/main/l...

eieio 2y ago

ah hi! I made this! was wondering if this one would appeal to the HN crowd :) Happy to answer any questions! And here are a couple of scattered thoughts: * I'm really interested in what this looks like if you use animations (firefox supports animated favicons) - I could, for example, anticipate future ball positions and create animated SVGs to get a much nicer framerate. * A friend pointed out offline that canvas rasterization (typically) is on the GPU, which is probably why my performance intuitions with my stuttering animation were so wrong * I am only moderately confident that chrome caps favicon updates to 4 a second; I know there are a lot of different ways to update favicons and I could have missed something here!

dataviz1000 2y ago
> A friend pointed out offline that canvas rasterization (typically) is on the GPU, which is probably why my performance intuitions with my stuttering animation were so wrong Did you solve it? A great resource is Jake Gordon's blog on simple JavaScript game design. He uses a double buffer front and back canvas game loop. [0] https://jakesgordon.com/writing/javascript-pong/part1/ https://jakesgordon.com/writing/javascript-pong/part1/
- eieio 2y ago
  Sorry yeah I'm talking very specifically about the stuttering that I first saw when making a square move into the tab bar. I was doing something inefficient (updating all my favicons many times a second), but I didn't really understand why that would cause stuttering in my foregrounded tab. My thought process was that the favicon stuff was happening in different tabs in different threads, and so it didn't make sense to me that the thread in charge of the foregrounded animation should suffer (unless my entire computer had slowed to a crawl and everything was getting slower - but it hadn't). And my friend's point was just that i was probably GPU-bound and not CPU-bound (or at least I could be) and so I was not thinking about the original problem correctly.
deleted 2y ago
[deleted]
2y ago

sho_hn 2y ago

Doom port in days.

aqueueaqueue 2y ago

Checkboxes now tabs. Always finding a novel place to get those coveted pixels

nektro 2y ago

now this is the kind of thing HN was made to showcase. excellent work friend ^.^

dejawu 2y ago

A similar exploration by Matthew Rayfield using the URL bar instead of tab favicons: https://www.youtube.com/watch?v=q7GtCLwTmV4 https://www.youtube.com/watch?v=q7GtCLwTmV4

eieio 2y ago
Matt's work is a huge inspiration for me! I definitely had his URL stuff in mind when making this, but it'd been a while since I had actually read through his blog / watched his video. It was really fun to come back to it mid-project and remember that he went in the same "stack windows to get 2 dimensions" direction.

fitsumbelay 2y ago

impressive as always

kvemkon 2y ago

Reminds me of: * "Show HN: I saw this mind-blowing experiment, so I made a simple version of it" (25.11.2023) https://news.ycombinator.com/item?id=38413660 https://news.ycombinator.com/item?id=38413660 * "Synchronize a 3D scene across multiple windows using Three.js and localStorage" (27.11.2023) https://news.ycombinator.com/item?id=38437773 https://news.ycombinator.com/item?id=38437773

backyardflock 2y ago

[flagged]