Riven Journals upgrade: mobile/tablet support, AI upscaling & more!

It’s Riven‘s 26th anniversary! In honour of the occasion, I’ve spent roughly 350 hours upgrading the Riven Journals, marking their largest and most significant update since their original restoration in 2006.

What’s New:

• Implemented support for mobile/tablet touch devices, with adjusted & enlarged click/tap areas throughout. Puzzles using drag-and-drop mechanics have been modified to incorporate larger touch zones & pieces now snap to their correct positions when placed close enough (good puzzle design says the challenge should be the puzzle itself, not navigating the puzzle’s user interface)
• Dynamic zooming customised per page, so the content originally designed for 640×480 CRT monitors no longer looks like a postage stamp on your widescreen 4k monitor (also scales to the maximum possible size on your phone/tablet to make seeing things easier)
• AI upscaling to 4k resolutions to all images so it doesn’t look like a blurred blob on big screens, with an option on every page & integrated into every puzzle to switch back to the original images (worry not purists; the original images are still there, completely untouched, and will never go away!)
• The entire server codebase has been completely rewritten from the ground up, replacing three old languages with only current-day PHP 8.2 (running server-executable code just to deliver plain HTML is, like, so 1996)
• Numerous changes throughout to leverage modern web features for improved functionality, speed & accessibility (eg prefetch/preload, img srcset, cursor & draggable hints, alt text, async decoding, etc)
• A hints, tips & solutions section added to my main Riven Journals page. Get stuck & need help? Just want to look at the rewards? Got ya covered!

Journal 1 puzzle. Top row: the original 1997 images
Middle row: upscaled but original resolution with less compression
Bottom row: 4x upscaled

In the spirit of full disclosure, I used Topaz Photo AI for the majority of the AI upscaling. I hand-tuned the parameters of each image for the best quality one at a time and most definitely not as a basic bulk export, generating 4 different resolutions up to 4k. This included regenerating at the original resolution but without the original heavy jpeg compression. These were all integrated into the Riven Journals’ ~250 HTML files manually using Notepad++, and the HTML has ballooned to almost 5 times its original size. This represents around 2,600 images manually added into the Journals via srcset, with a total of around 5,800 images involved when counting individual frames of animated gifs and uncompressed versions (but not counting the thousands generated, edited, integrated, then recreated from scratch when I found a higher quality technique). Additionally, I processed around 1,100 of these through Photoshop, and I compressed the final images individually with mozjpeg, pngquant & FileOptimizer to get the most bang-per-byte like was necessary in the dial-up days of 1997. In short, this was absolutely not a simple load-export-dump-and-overwrite job but one where each image upscale was processed one at a time, by hand, with the care and attention to detail it deserved.

Despite my best efforts, I’ll be the first to admit that the upscaled versions aren’t always better than a basic blurry bicubic resize of the originals, but I think they look better more than 95% of the time. There’s a button to compare them with the originals on every page & every puzzle (though some puzzles only update to reflect the change upon the next action like clicking on pieces etc). That button’s also useful for investigating situations where the upscaled versions look weird because the original images lack sufficiently clear detail for proper extrapolation, or where the originals also look weird and the upscales are faithfully replicating that oddity, too.

That said, here’s some examples of the upscaling in action!

Text example – original version above, 4x upscaled version below

Line art example (this one’s actually a reddish transparent .gif floating above the tan-coloured parchment background!) – original version above, 4x upscale below

Here’s some full-screen examples:

Compare with Imgsli

Compare with Imgsli

Happy 26th Birthday Riven, and enjoy the freshly-upgraded Riven Journals!