Each visit to the page deteriorates the main image | Hacker News Reader

Each visit to the page deteriorates the main image

crowd-jpeg.vercel.app

465 pointsbadorg134 comments

I love this. I’ve had an idea to do something similar for a while, except each visit would delete a random character from the page source. The character deleted might be part of the content, or it could be part of an HTML tag or CSS, so as the page degraded the layout would break and parts of the source would become visible.

We talk about bit-rot, broken links, etc, so I thought it would be interesting to take that a step further and visualize what would happen if a webpage decomposed over time like organic matter.

Oh please make this, it sounds fun!!!

Or delete one character at a time from the web server’s entire file system…

One of the first c programs I ever wrote was an infinite loop that wrote a random value to a random address. Sadly DOS 6.xx did not have address spaces as such, and while I did not know what it meant at the time, upon rebooting I found it had a write through cache... Most of the file system was littered with extended ASCII characters. Time to pull out all the floppies again for a reimage

I was going to respond that DOS didn't have any such fanciness, but then I remembered SmartDrive. And indeed, it turns out it had a write-behind cache [1] that may well have ruined your day if abused in such fashion.

[1] https://www.computerhope.com/smartdrv.htm

I remember itade me learn how fat worked, then I would use debug to make recursive directory trees with large files in them so a dir /s would terminate at max depth with a huge aize reported. I used it to make people in my HS cs class think I had found really good floppy disks.

I lost tons of work when playing with toy assembly language programs in DOS, when I would save and compile and run it and it did something to crash necessitating a reboot, faster than SmartDrive would write the cache to disk. Particularly for anything crash-prone like messing with hooking interrupt vectors.

There is russian kmem-roulette[1] - dd if=/dev/urandom of=/dev/kmem bs=1 count=1 seek=$RANDOM

1: http://bash.org/?926695

You can do something similar with images, pull them into a data string then fuck with a random bit in a character in the list using JavaScript. The interesting thing is how different image formats handle corruption. I find PNG the most lycergic.

I had to look it up, but did you mean "lysergic", as in lysergic acid diethylamide? (Nice usage...)

I wondered if it was maybe "Lycurgan", from Lycurgus, the Greek lawgiver -- "harsh or severe" ¯\_(ツ)_/¯

Yeah, the first time i used it i thought i came up with a new thing lol.

Would that include removing characters from the script that triggers on the page load?

If so, it'd be more interesting if the lexer didn't barf on syntax error, but perhaps just skipped characters until it finds a valid token. And probably some similar "best effort" algorithm for the parser.

feed it through fuckit.js

https://github.com/mattdiamond/fuckitjs/

https://news.ycombinator.com/item?id=4157777

This is the funniest GitHub README I've read in a while

You could just do it server side.

What if we made it show the decay live - no need to press refresh constantly?

Rough prototype: https://self-deleting-production.self-deletion.workers.dev/

All it has is some stupid placeholder text right now. It uses cloudlfare workers and kv storage to keep the current text, so there are lots of concurrency/latency issues. Once the entire page is deleted it will start again.

Code here: https://github.com/ch33zer/self-deleting

Aaaaaand it's dead. Too much traffic to cloudflare. Sorry all.

Did cloudflare block your website? This shouldn't happen right? Or do you mean that due to traffic all the content was deleted?

I just went over the free quota for their kv storage.

Firebase (the old one, not their new database) gives unlimited kv storage free. Just don’t upgrade to the Blaze plan or some fella from HN will spawn 30 wget loops to maliciously charge you a few thousand dollars, which is what happened to me. Never had to pay it, but it took the service down for a bit.

HN traffic is crazy, even a few days after posting:

https://imgur.com/a/zUhkYQT

If it is a bit rot you want to simulate, change a bit in random file

reminded me of (albeit a bit of a different concept):

https://en.wikipedia.org/wiki/I_Am_Sitting_in_a_Room

> The piece features Lucier recording himself narrating a text, and then playing the tape recording back into the room, re-recording it. The new recording is then played back and re-recorded, and this process is repeated. Due to the room's particular size and geometry, certain frequencies of the recording are emphasized while others are attenuated. Eventually the words become unintelligible, replaced by the characteristic resonant frequencies of the room itself.

performance recording: https://www.youtube.com/watch?v=bhtO4DsSazc

The experiment has also been brought to the 21st century and its video and audio codecs: https://www.youtube.com/watch?v=icruGcSsPp0 - uploading a video 1000 times to YouTube.

reminds me of the old days of 4 track recording where you'd bounce 3 channels down to one, rerecord, bounce again. lather rinse repeat. by the time you got to the 3 or so round (depending on the quality of the tape) it would be pretty gnarly.

back when i worked in a VHS dubbing facility, we'd get bored and do stupid stuff like this taking a master to VHS, then using the VHS as a master to make dub of dub of dub. after the 8th dub, it was pretty trash. Similarly, we'd take a video in -> video out to another VCR -> video out cascading down until the original signal to the video in of the last VCR was trash. (the place was wired correctly with proper video DAs. we did this because it was 3rd shift and no supervision)

This brings back memories of art school, a friend recorded themselves running up and down a hill and made many copies of copies of the video on VHS. They displayed different generations of the degrading video side by side on a bank of monitors.

There’s also a fun version of this but it’s a song run through google translate.

https://m.youtube.com/watch?v=LMkJuDVJdTw

I used a similar concept to repeatedly upscale and zoom in on an image with different AI-based super resolution algorithms. At some point only the idiosyncrasies of the algorithm remain: https://rybakov.com/project/im_sitting_in_ai/

I found this absolutely mesmerising – thank you!

This was a really fun idea and was well executed. Thanks!

This is strangely beautiful.

A cheeky response to Lucier's work: https://coryarcangel.com/things-i-made/2004-004-iron-maidens...

A low-fidelity version of Frippertronics.

There is a album made from the deterioration of loop tapes, corroding more each time the read head passes over the tape. https://en.wikipedia.org/wiki/The_Disintegration_Loops

The track "dlp 4" is a pretty good example of this, it can be found on youtube for the curious.

https://www.youtube.com/watch?v=J46cFYqtiYQ video of dlp 4

Thank you for posting this. I'm excited to check it out. Hainbach's videos introduced me to this concept and I had no idea it was something that had been done before.

Making-of clip: https://youtu.be/dgVyl9CxHpM

It's like Stable Diffusion in reverse

(you could probably actually set Stable Diffusion up to iterate towards a new refinement of an image each time a webpage gets a new unique visitor...)

What about a 'twitch plays stable diffusion' kind of thing where each visitor can enter a prompt for the next iteration?

Reminds me of William Basinksi's Disintegration Loops:

https://www.youtube.com/watch?v=mjnAE5go9dI

They are tape loop recordings where noise and cracks gradually increase over time as the tape is played and deteriorates.

Yes, here's a bit of the background: https://youtu.be/dgVyl9CxHpM

I like the implied idea of a fragile internet.

It reminds me of Sampson by Chris Burden. Each visitor to the art gallery pushed a pair of giant pistons further towards the point they would collapse the gallery walls.

https://publicdelivery.org/chris-burden-samson/

Made me think of the classic "Do I look like I know what a JPEG is?" https://www.youtube.com/watch?v=QEzhxP-pdos (loud audio warning)

I wrote something similar a few years ago https://shkspr.mobi/blog/2013/02/ephemeral-media/

When you look at a web page, there are only a few ways you know how old it is. Absent a date in the URl or page, your best guess is how modern or fashionable the CSS is.

With a paper document, you get yellowing, staining, curling, tearing - moreso if it were popular.

I'm not saying that adding wear and tear to a digital document is a good thing - but it could be a handy contextual skeuomorph.

https://github.com/kumpmati/crowd-jpeg

> Made using SvelteKit + MongoDB and deployed to Vercel (frontend) and AWS (backend).

Sounds (over)complicated. Isn't just a static html webpage on php/js backend with sqlite or even without, just grepping logs via cron, do the trick?

Having Nginx as a front-end, with static file caching enabled, would handle just fine the load from HN front page even on a RPi.

Nobody's teaching the far superior old ways, all anybody is learning any more is overcomplicated Javascript stack garbage. And most of these "show HN" type posts seem to be someone trying to show off a learning project

Don't forget to docker that puppy!

don't forget to run that docker container inside a xen or KVM VM first

that wouldn't be scalable or cloud-native. you need to deploy the KVM VMs that run the docker containers with k8s.

And if you take all that and abstract it out by running it inside another VM, then you can just pack up your infra and move it to wherever, whenever you want!

I can't tell if this is parody or not, hosting on vercel is the easiest fastest way to prod I can think of, AWS if fairly complicated if you're not used to it but honestly if you're just setting up and DB and getting a connection string is very easy. Also PHP sucks. If this is parody, I apologize.

I don’t think it’s parody. I’ve never heard of vercel. If I wanted to build this, I’d:

(1) turn on an ec2 host

(2) write a Python script to serve the image (degrading it on every call)

(3) configure nginx to ffi to the script.

Meanwhile vercel is literally “now”. Like all you need to do is cd to the directory and type “now” and press enter.

https://docs.ycombinator.lol has been running for years without fail. It’ll probably shut off someday and be lost to history, but I’d bet on it lasting a lot longer than that ec2 instance. Free, too.

I'm not sure how you are getting past the writing a python script part...

Vercel looks to be some service that deploys pre-built apps (geared towards nodejs/react, hard pass).

Your hate towards nodejs/react is making you blind to opportunities.

I used nodejs for over five years. It is not blindness...

When?

I don't think this is a parody either, this is like saying the easiest way to format text is to use Word, then poo-ing html...

Maybe to someone who only knows "modern web dev" it seems like a parody, most people don't start with "let's learn 10 overcomplex frameworks and use a template generator which only takes one step".

For generating horrible bloated apps as fast as possible you may have something "easy", I will probably never use vercel, I'm much more likely to write a script and expose it on a port somewhere.

Unless I've misgauged vercel and you can feed it a python script or something...

If you’re developing long term in node.js and js/ts, why would you use python?

You already have shared code, utils, infrastructure to deploy.

Personally I like to have all projects in the same language.

You have to admit that it scales pretty well though. Most people that set this up with PHP with nginx wouldn’t be able to do it in a way that happily handles the tens of requests per second.

Well... but does it really needs to scale, if it is designed properly?

For instance the distorted image is being loaded as base64 data blob within the html. The size of that page is 401kB, most of which is in that base64 data. The actual jpeg is just 97kB (the non-distorted image is about 300kB). If the image is served separately, browsers will cache it for those who just reload the page (there is no need to update it anyway, since it is updated on the server every 400 requests only).

So with a 100Mbps connection you can easily (assuming unique users, thus no caching in the browsers) serve not just tens requests/s, but over a hundred requests/s. Put image on CDN, pre-degrade it to have many levels, and with the same server just serving html, you can do thousands request/s.

Tens? Pretty sure I've seen nodes (code-golfed to be fair) doing millions, on ec2.

The dev experience with SvelteKit/Remix/Next is very uncomplicated. The deploy & serve experience is completely uncomplicated with Vercel.

Your way sounds more complicated.

Specifically the image degradation algorithm lives at https://github.com/kumpmati/crowd-jpeg/blob/main/api/src/ser.... I'm not sure what's causing the zebra-stripe artifacts, presumably it's a combination of resizing interpolation, lossy WebP/JPEG artifacts, and sharpening?

I did something like this in reverse a while ago. Every day the page will paint one pixel till the image reveals itself: https://jwillmer.de/blog/programming/every-day-a-pixel

I had an idea to do something similar to this but with a story, where a random text character would be garbled (or maybe deleted) with every visit.

I wasn't sure how best to handle that on the backend side, not really something I've ever had to do before. Especially dealing with (possibly) full text fields and a bunch of people hitting up the website in a short period of time, possibly thousands at a time.

I could have just recorded visit counts, and have it randomly generate on the client side based on the visit count, but I wanted to keep it persistent for all viewers.

Have you tried just doing it the naive way? Databases are damned fast, and actually hitting pageview counts of "thousands at a time" is pretty unlikely (it seems like being on the HN front page gets you about 10 hits per second at peak).

Modern computers can easily mutate text thousands of times a second. Think about what a browser does instantly when you load a page.

Also what would you need a database for? Why not write to a text file?

DB for most easily handling concurrency I would assume. Not that it would actually matter how you implemented it in this scenario.

Or maybe the opposite, where the story unscrambles with each visit. Either direction could be kind of interesting.

Like imagine a murder-mystery game, of sorts. The story gives more clues as each guess to solve the murder goes unanswered. Or a choose your own adventure type scenario, where the directions are "chosen" by some visit.

Interactive story telling on the massively-multiplayer scale could be really interesting.

Yeah I like that also.

Kind of matches another idea I had, but never got around to making, where it was kind of a mystery novel, but it was written in segments, and each purchased PDF would create a random assortment of like 30% of those segments, with some enforcement of sequencing or acts to keep them somewhat coherent, and in some of those segments would be some pretty crazy relevations, and then there's a shared community book available to anyone who's purchased a copy of the individualized book, that auto-includes any passages that people choose to share from their copies (or I could just let people do it themselves, add it to a wiki or whatever).

But they could also choose to keep it private if they wanted, and the website would let everyone know how many times each passage has been generated (but not shared).

I even considered making the tech in a way that if successful I could open it up to others to make and sell their own stories like that, like a dedicated website.

Problem is, you need to write a story that works with that format, and that's difficult. I started a bit of work on it, and then got distracted by other projects.

It's kind of like those old sticker books back in the day, where you buy packs of stickers and put them in numbered spots in the book and it slowly reveals the whole picture. Loved getting those back when I was a kid.

Also getting the random generation right so it doesn't like give everything away after just 10 books sold.

Still like the idea though. Maybe someday I'll get back around to it.

Why does it need to be random? Pseudo random with a fixed seed would give you random looking deterministic numbers

Yeah I hadn't considered that and I should have, that's a good point. Should have brought been using my gamedev brain more.

Probably because I was coming up with various ideas of making it more gamified, where visitors could help keep the page from falling into entropy by spotting errors and fixing them (like it'd only work if they changed it back to the correct word or whatever).

But yeah, pseudorandom might be the way to do this on a basic level. Good idea.

How about it deletes a random word and replaces it with an AI-chosen word.

Reloading this page every few seconds contextualizes how massive the traffic on a top HN post is/can be.

It's a couple dozen rps and that's with a page that's actively begging to be reloaded. It's not nothing but as traffic spigots go, it's not that much even for a small single-person-hosting-a-thing kind of project.

If you look at things that get overwhelmed by HN, more often than not they get fixed pretty quickly as the authors figure out they've missed something relatively straightforward that's response-murdering.

Free (over)load testing!

I love the interwebs. Hitting refresh on this page and looking at the counter increase by multiple numbers each time shows how many curious people really are out there OR a clever dev that has the number increment by a random number on each reload.

Refreshing the page consistently is amusing. Next feature might be to add a slider and animate the degradation over time for each visit like a time lapse!

I wonder what cases it to seem like it is zooming in.

There's a 1.5% chance for the image to be 4 pixels wider and taller than usual, so that's probably moving things around.

https://github.com/kumpmati/crowd-jpeg/blob/main/api/src/ser...

if someone cropped the jpeg you sent them

This reminds me of an idea I had for a button years ago. Reddit eventually kind of did it:

A website with a button and a countdown. If the timer hits zero, a large sum is donated to a charity. The button resets the timer. Anyone can push the button.

I would call it “This is Why We Can’t Have Nice Things.”

All I need is to figure out a free way to maintain a tiny api that provides state.

> All I need is [...]

So you have the money to donate a large sum all the time?

Send me the money and I'll implement it :-)

Okay let me rephrase:

I need a free state host for a single timestamp and I need to also write a button-pressing bot, carefully, to keep me out of crippling debt.

Every September 26th, the LessWrong forum has some variation on a button that can be pressed by a large number of people and which will bring down the entire site for the day if one person presses it. In 2022 the model was that it was open to all users, and the karma threshold to use it went down every hour.

Oh I love it so much.

You could do this with the free tier of cloudflare workers and cloudflare KV for state

And the first time you'd be able to DDoS site for charity

The guy who made Wordle created this for reddit

XKCD has you covered

https://xkcd.com/1683/

Thankfully the internet archive exists : https://web.archive.org/web/20221108093757/https://crowd-jpe...

This reminds me of a classic zach gage piece, Temporary.cc: http://www.stfj.net/index2.php?year=2009&project=art/2009/te...

This feels like it could cause a hell of a bandwidth bill if it does something like hit the HN front page.

On the other hand this site also teaches the internet that eventually everything becomes a reaction-diffusion system/phase separating fluids [1].

[1]: https://www.karlsims.com/rd.html

Haven’t had this much fun since last Saturday morning pressing refresh for Glastonbury tickets.

Watch it degrade with frequent refresh?

    import requests
    import time
    for i in range(100):
        print(i)
        r = requests.get('https://crowd-jpeg.vercel.app')
        if i%10 ==0 : time.sleep(3)

So, if it gets crawled by an aggressive bot, the image disappears in a day?

You may also like https://github.com/carlmjohnson/shitpic if you like this.

It would be interesting to see the code. This seems to provide a fairly interesting approach to image convolution. Does the data also compress or is this purely a data transformation?

I'm surprised no-one has mentioned the 2008 movie Untraceable.

CTRL + R my friends.

That's what it means in some cases to share jpgs (if you don't always share the original for one reason or another).

Deep Fried Page

I always find it funny how there's wear of images on the internet, just like in real life

The current image reminds me a little of the shimmery image I get during ocular migraines.

Now run it back through stable diffusion with its alt description...

I wish it had a snapshot every n visits or so so, ideally as a slider somewhere.

I'm excited to see who the tree eventually turns into.

Every 400 visitors someone gets an opportunity to reset it and it picks a different Unsplash image.

It was a joke, albeit an obscure one.

I just ran curl in infinite loop and no delay :)

I figured you would start with something better than a 300kb jpeg that already looks pretty bad in my 900x800 viewport

It looks quite close to what the vision of a person with migraine aura is like.

Or do a counter lmao

::refreshes page 100 times::

Buahahahahahahah

I refreshed the page after 60 seconds to estimate how many people are clicking, and it came to 4.9 requests per second. All of a sudden I don't have as much sympathy for HN knocking someone's site offline when it's just a static blog filled with text.

Yeah, it’s no big deal for static content. My little Raspberry Pi had no trouble with it even though it uses a SQLite DB.

https://joeldare.com/private-analtyics-and-my-raspberry-pi-4...

Granted, it was a Sunday.

HN volume is pretty weak tbh. Web devs are just getting worse.

Pretty easy problem to solve too - just scale up the static asset Kubernetes cluster‽

I'm seeing about 20 per second by doing the same method. Still nothing crazy, but it probably needs a bit more time at the top of HN

Probably more to do with the fact that people are mashing F5 to see the difference.

Refreshing every second and mentally averaging, I'm getting closer to 15-20 requests per second. But yes, only a badly designed static site should be crashing under that load (unless it's on a residential connection, perhaps it's ISP rate limiting?)

As a rule of thumb, if the post get N upvotes, you get 100N+50 visits. YYMV.

The post has now 76 points in 40 minutes, so an average of (76*100+50)/40/60 ~= 3.2 that is close to your 4.9. But the peak may be much higher, like the 20/s reported by other users.

Let's destroy it!

Is this some NFT stunt?

From the website:

> You could see this website as a metaphor for the effects of tourism, how humanity affects nature, or how meme quality degrades over time as they are shared.

Came to comment with same quote. It's really touching parallel and the degraded image give it weight. Kudos to OP

Take nothing but pictures, leave nothing but pixels.

From a mobile view, that is nowhere evident. I only had the URL and the title to see if anything made sense.

Given the hypercapitalist point of view here, I figured it was some auto-degrading NFT.

Reply on news.ycombinator.com