Awaiting image selection…

How to use Gradientment

If nothing works, you might need to disable your content blocker to let this page’s built-in JavaScript run.

1. Select an image on your device.
2. Adjust the number of Rows and Columns down as low as looks good for maximum compact representation, or all the way to the right for maximum artistic plaid representation.
3. Turn on OKLCH mode if you want extra accuracy/more muted colours in exchange for slower processing & another 18 bytes.
4. Copy the CSS into your project, either directly into the style tag on the specific image in your HTML (best option) or into your CSS matching the image’s ID tag (not as good but still a great option).
5. Repeat for any other images you want gradient maps for and enjoy!

Quick privacy note: all processing happens locally in your browser through plain JavaScript; images & results are never uploaded or shared anywhere. I have generic Analytics on this website to track page views etc, but there’s nothing tracking how you use Gradientment or the images you select or the gradient maps you generate. In fact you “should” be able to save this page to your device to use Gradientment entirely offline.

Examples

“Standup Stage” – background:linear-gradient(90deg,#1278,#1028,#1128,#1148,#0018,#0018),linear-gradient(#208,#70c,#207,#104,#104,#84e,#102,#000); (127 bytes)

“Mars Kitty” – background:linear-gradient(90deg,#a458,#6128),linear-gradient(#c24,#712,#644); (78 bytes)

“Riven Journals” – background:linear-gradient(in oklch,#3228,#3228,#3228,#4328,#3228,#3328),linear-gradient(90deg in oklch,#321,#432,#322,#432,#322,#432,#322); (140 bytes)

“Brisbane DeLorean” – background:linear-gradient(90deg,#8458,#7448),linear-gradient(#543,#654,#633,#a66,#746,#634,#834); (98 bytes)

“Andotrope” – background:linear-gradient(#7648,#7648,#7658,#ddd8,#eee8,#eee8,#a998,#9748,#7528,#9858,#cb78,#ba88,#8738,#7648,#7538,#7638,#8738,#3228,#0118,#1118,#1128,#1128,#3468,#26c8,#38d8,#0128,#1258,#1138,#2238,#4678,#5778,#4558,#4548,#3448,#4788,#5ad8,#5ae8,#6ae8,#6be8,#6ae8,#6ae8,#6ae8,#6ae8,#6ae8,#5ae8,#2468,#0118,#1128,#2118,#4328,#6428,#6438,#6538,#7648,#2118,#2118,#3328,#1118,#ccb8,#bbb8,#bbb8,#aaa8,#aaa8,#a998,#a998,#8768,#9868,#7658,#9868,#a868,#a868,#a868,#8758,#a868,#a968,#a978,#a868,#a868,#a868,#a868,#9868,#7668,#9888,#9888,#9888,#8888,#8778,#6548,#1118,#2118,#2118,#3218,#7528,#a828,#b838,#b838,#b938,#b948,#c948,#b948),linear-gradient(90deg,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#111,#211,#321,#321,#321,#322,#322,#322,#432,#331,#542,#752,#642,#532,#431,#642,#431,#432,#432,#322,#221,#211,#853,#122,#113,#013,#124,#124,#024,#123,#854,#212,#112,#111,#222,#333,#432,#975,#752,#642,#a95,#763,#421,#753,#753,#542,#532,#432,#532,#532,#532,#532,#532,#532,#532,#532,#432,#432,#432,#542,#532,#543,#543,#764,#876,#875,#876,#987,#997,#997,#a98,#a98,#a98,#a98,#a98,#a98,#a98,#a98,#998,#a98); (1151 bytes)

“Fiji Beachouse” – background:linear-gradient(#acd8,#bcd8,#bcd8,#cde8,#dee8,#dee8,#cde8,#bcd8,#cde8,#cde8,#cde8,#acd8,#bcd8,#cdd8,#cdd8,#bcd8,#cdd8,#dde8,#9a98,#99a8,#8898,#7888,#9998,#7788,#8888,#8898,#8898,#7788,#8888,#8898,#8898,#8898,#8898,#9898,#8888,#8898,#9888,#7648,#6548,#6548,#6548,#6548,#6658,#6648,#7658,#6658,#6658,#7658,#4338,#5438,#8768,#8768,#b988,#9878,#5548,#8758,#3448,#3798,#48a8,#2798,#2798,#49b8,#4ab8,#4ab8,#4ab8,#39b8,#39b8,#39a8,#3ab8,#39a8,#39a8,#3ab8,#4ab8,#3ab8,#3ab8,#39a8,#39a8,#39b8,#4ab8,#9cd8,#acd8,#acd8,#9cd8,#8cc8,#6bc8,#5bc8,#5bc8,#5bc8,#5bc8,#4ab8,#4ab8,#4ab8,#4ab8,#4ab8,#4ab8,#3ab8,#4ab8,#4ab8,#4ab8,#4ab8),linear-gradient(90deg,#442,#442,#641,#887,#764,#442,#998,#885,#673,#331,#221,#221,#671,#9b2,#9a2,#a76,#944,#843,#532,#522,#b98,#623,#caa,#b98,#983,#994,#993,#892,#772,#433,#543,#533,#533,#452,#452,#442,#341,#442,#664,#653,#875,#885,#451,#562,#662,#a85,#976,#553,#332,#755,#654,#643,#432,#322,#211,#322,#433,#985,#873,#533,#221,#432,#421,#322,#543,#876,#675,#452,#232,#232,#231,#231,#774,#986,#543,#575,#453,#332,#451,#342,#454,#433,#433,#433,#332,#332,#342,#462,#674,#452,#443,#222,#212,#444,#9a8,#564,#443,#322,#432,#321); (1151 bytes)

“Hospital Food” – background:linear-gradient(#ccc8,#ccc8,#ccc8,#ccc8,#ccc8,#ccc8,#ccc8,#ccc8,#ccc8,#5668,#3458,#4568,#99a8,#dee8,#dde8,#ddd8,#ddd8,#7988,#4638,#8988,#5838,#4628,#5728,#7938,#7938,#7938,#7938,#7938,#7938,#3618,#4628,#3618,#3428,#3328,#4538,#8968,#7728,#8948,#7828,#6828,#7828,#7718,#8848,#8738,#a318,#b318,#b318,#c418,#c418,#c418,#c418,#c418,#c418,#d518,#c418,#c418,#c318,#9218,#b318,#c418,#c418,#c418,#c418,#c418,#7018,#b318,#b318,#b318,#a318,#a318,#9218,#9218,#8218,#7218,#7118,#7118,#6118,#6118,#6118,#6218,#6218,#5118,#5118,#5218,#5218,#6218,#6448,#6568,#6568,#6668,#6668,#6668,#6678,#6778,#6778,#5568,#2238,#0018,#0018,#1118),linear-gradient(90deg,#334,#345,#456,#223,#334,#456,#112,#233,#334,#345,#345,#122,#234,#334,#334,#345,#334,#345,#234,#556,#eee,#dee,#dee,#dee,#dee,#dee,#dee,#dee,#ddd,#ddd,#ddd,#dbb,#d52,#d51,#c41,#c41,#b31,#c31,#c31,#c41,#c42,#b41,#c31,#c31,#b21,#a01,#c31,#c31,#b21,#c41,#c31,#c31,#c41,#c41,#c41,#cba,#bba,#b98,#a75,#a85,#a86,#865,#a98,#976,#975,#986,#a97,#a97,#b98,#b96,#b86,#cba,#cba,#cba,#cba,#c85,#b98,#9a9,#bba,#ddc,#ddd,#ddd,#564,#563,#b43,#b64,#c75,#db9,#dee,#dee,#eee,#eee,#eee,#bcc,#223,#223,#223,#223,#334,#334); (1151 bytes)

Additionally, you can see the gradient maps in action in a real-world test scenario on a live website (along with some progressive-encoded AVIF images if your browser supports them) in the first section of the Riven Journals, in the main temple and the close-ups of any journal before you open the book. I’ve also added gradient maps to the first/hero images of every article on this riumplus.com website.

But why?

As of mid 2026, modern web image formats like WEBP and AVIF have lackluster progressive rendering in web browsers. For WEBP, its progressive rendering is a suboptimal top-to-bottom style and it takes a while to show anything, waiting until both chroma channels have been downloaded first (and Safari shows no progressive rendering at all). For AVIF, standard-encoded images have no progressive rendering and only pop into view when fully downloaded. The AVIF spec does support progressive rendering though (except progressive AVIF rendering is currently broken on Firefox), and it is possible to generate files that do it, but it’s not the easy default “save from Photoshop” option (there’s a good article here about the state of progressive images which also details how to create progressive AVIFs if you’re interested). In short, actually seeing a flash of a progressively-loaded image is not as common as it used to be with an old-fashioned progressively-encoded JPEG.

But even if you stick with progressively-encoded JPEGs, there can still be a delay in seeing something if there’s a delay between your HTML parsing and your image’s data packets arriving. Like if you have a slow or intermittent internet connection, a poor/flakey WiFi or cellular signal, you’re running a faraway VPN or TOR connection, or if you’re connected to a slow web server on shared hosting. With a gradient map, you see something vaguely resembling your image straight away before your image has started to display – no matter the format and no matter how long the image takes to load. It doesn’t decrease the actual loading speed of your website (in fact it very slightly increases it), but it does increase your website’s perceived loading speed a little, so it feels faster.

Tools like Blurhash are great, but they fill a different, more complex niche – they usually require server-side processing of some kind, the delay of a round-trip packet to the server, and downloading/running more JavaScript. This is a solution that runs with pure CSS (old CSS that’s been supported for years, too), that usually displays within tens of milliseconds.

Why not just embed a base64-encoded image?

A 3×3 well-compressed PNG base64-encoded amounts to 168 bytes, and that’s not much definition at all; larger images are even bigger. A 3×4 gradient map is 100 bytes with each additional colour sample adding only another 5-6 bytes, even less when the page gets gzipped. What would you do to save a few bytes? Or to put it another way… For 100 extra bytes to your first/hero image or two, why not use gradient maps to have better perceived loading?

Hey I never said turning a 2D image into two overlapping 1D gradients was a practical idea in all scenarios, but I couldn’t find any evidence of anyone trying this technique before (though it must’ve been attempted by someone out there). So I created this tool, Gradientment, to easily generate them.

Consider it an interesting art experiment to make plaid versions of your images that’s fun to play around with if you don’t want to seriously use it on a website.

What’s OKLCH mode?

This enables linear OKLCH processing on both the gradient generation step as well as appending the tag to use OKLCH blending in the final CSS. Combined with the way pixel averaging is already performed manually by a box filter instead of using your browser’s built-in rescaler to make sure it’s done right, this produces much more perceptually-accurate colours. This matters the most in highly-saturated images. However it’s off by default because it’s much slower to compute, produces much more muted results, & takes up another 18 bytes in the final CSS. If you want, you can check the box to use OKLCH processing and manually remove the extra CSS tags to get the processing accuracy without the CSS “bloat”. It’s interesting to see how much of difference this checkbox makes on the final gradient map, though – even when the colours are compressed down to 3-character #RGB codes.

npm/pip/Wordpress plugins?

Sorry, I am an artist & inventor, not a coder. This is all you’ll get from me. Feel free to implement this technique yourself in whatever framework/language/system you like; I’m not about to claim ownership of the basic CSS used in gradient maps or anything! I’d love to add a link to your repo here.

Any other usage tips?

Gradient maps work best when an image has large, low-frequency changes in brightness or colour in either straight horizontal or vertical directions. Otherwise they can look a bit muddied and might not be worth implementing.

Adding decoding=”async” to any images used with this technique helps make sure any progressive version of the actual image will display as soon as possible on all browsers. In my experience, that’s an extra 15-30ms. Go on, you can spare a few more bytes for a few more milliseconds; look at how much you just saved by using a gradient map that uses compressed 3-character #RGB colour codes instead of those hugely-wasteful 6-character #RRGGBB colour codes!

I also advise against doing this technique as a blanket optimisation to every image on your entire website due to the CPU overhead of generating a huge number of blended gradients. Doing it to just the hero images displayed above the fold should be good enough.

Speaking of tips

Like Gradientment? Donate to my Ko-fi, comment below or drop me a line to say thanks! The more donations/encouragement I receive, the more likely I am to release more guides & tools like this in the future.

The post Gradientment, the Image Gradient Map Generator appeared first on Realm of RIUM+.

Things like the in-depth Andotrope build logs will stay here on this domain; it’s just the high-level show-off summary stuff I’m promoting to its own dedicated domain.

You can find it at https://andotrope.com . Check it out!

The post New Andotrope Website appeared first on Realm of RIUM+.

Andotrope v2 with its domed glass lid

Andotrope v2 Main Improvements

It’s smaller – I built the original Andotrope proof of concept to look like a specific video game prop replica. This makes it big, bulky, uses a lot of decorative brass, and it has a lot of empty space in its base. I mean the hand crank is cool, but it’s a bit unnecessary. This updated Andotrope does away with all that while still opting for a minimalist, retro-Steampunk aesthetic. This shrunk the device to under half its old size.

It’s faster – now that I have a better understanding of what’s involved with creating an effective Andotrope, I’ve nearly doubled the rotational speed to 1800 RPM. This improves the persistence-of-vision effect.

It’s quieter – I’ve replaced the brushed motor and gearbox in v1 with a brushless drone motor and no gearbox. V2 is now whisper quiet.

Inside the base of my v2 Andotrope

It’s cheaper – the smaller, lighter size with less brass knocked 90% off the raw material price of this Andotrope and that’s not an exaggeration. What’s more, because it uses a common smartphone with a quick-release lid, you can simply use your everyday phone instead of purchasing a dedicated device, further saving money.

It’s optionally semi-transparent – I demoed this at Open Sauce in June 2024 – by simply swapping cylinders you can go from a solid black background to a semi-transparent background. How did I do this? That’s a secret 😉 Personally I prefer a solid black background as it’s hard to see the display with a transparent background, so I mainly demo it with a solid black background.

(YouTube link in case the above embedded video doesn’t work for you)

All these improvements put together, they represent a decent leap forward in Andotrope technology. I’m excited to see what the future will bring, because I already have versions 3 and 4 underway…

Publicity & Media

Version 1 achieved much professional acclaim. Here’s a list of some of my favourite features on Andotrope technology:

• Open Sauce 2024
• Wikipedia, both English and German
• DIYODE Magazine, front cover of issue 78, 13-page article
• MagPi Magazine, the official Raspberry Pi magazine, issue 144, 4-page article
• The Official Raspberry Pi Handbook 2026, front cover & 4-page article
• Hackaday
• coolsten (translated)
• The Perspective Research Centre

If you’re interested in turning an Andotrope into a real product or integrating the patent-pending technology into your systems, contact me to arrange licensing. I’d love to hear from you to make it happen.

The post Andotrope v2 – Smaller, Faster, Quieter, Cheaper appeared first on Realm of RIUM+.

Here’s the contraption in action with zero video editing, CGI or other trickery:

(YouTube link in case the above embedded video doesn’t work for you)

And here’s what the original looks like in-game:

(YouTube link in case the above embedded video doesn’t work for you)

There’s no CGI or video editing in the above video, it’s straight off my phone. There’s also no head-tracking cameras or special glasses or other tricks involved. Unlike the game version, the same image is visible no matter where you stand around it, and this works for unlimited simultaneous viewers. A whole crowd can stand around it and everyone will see not only the same image of a person, they’ll see that person making direct eye contact with them. This is actually far more useful than if it was just a floating head in space like in the game, where 3/4 people get a bad view as they’re looking at the back or sides of the head. It’s full-colour and full-HD.

How it works: the Andotrope

Readers are probably most interested in the Andotrope, which is the main mechanism in the middle that creates the omnidirectional holographic display. It consists of two specially-chosen tablets sandwiched back-to-back inside a black cylinder with viewing slits in front of the tablets, and the whole cylinder rotates at high speed (up to 1200RPM for mine, which gives an effective 40fps). Both tablets synchronise their output, effectively doubling the frame-rate by displaying two images per rotation.

Andotrope exploded diagram. As the mechanism rotates, your view through the red slits sweeps across the displays, which ensures everyone in all directions ends up with a view of the full screen.

Andotrope with the external black cylinder removed, showing the internal components.

The effect is similar to a Zoetrope. Basically, I’ve brought a 150-year-old children’s toy into the 21st century. Because this doesn’t quite meet the definition of a Zoetrope any more, and because I couldn’t find anyone else who successfully pulled this off before, I’m calling any display you could build that’s similar to this by the generic term Andotrope. Here are the key differences between an Andotrope and a Zoetrope:

• An Andotrope uses relatively few screens and can show infinitely-long animations, while a Zoetrope uses a dozen or more still pictures and is limited to showing only a second or so of looping animation.
• An Andotrope’s screens & slits are arranged so that you don’t see multiple animations at once, while in a Zoetrope you can usually see through multiple slits to see multiple animations at a time.
• Because it uses fewer screens & slits, an Andotrope rotates much faster to maintain an animation, rotating tens of times per second, while a Zoetrope might rotate only once per second.
• All combined, the main purpose of an Andotrope is to provide an omnidirectional, bill-boarding holographic* video to multiple simultaneous viewers in all directions.

It’s not an exaggeration to say I couldn’t find any other examples of people successfully pulling this off before; I searched to the literal last page in Google Image Search for terms like “Zoetrope LCD”, “spinning LCD”, “tube POV display”, “cylindrical POV LCD” etc and turned up nothing. Because of this, I’m happy to announce that this display tech is now covered under Patent Application 63/511,582!

It seems I’ve accidentally invented new technology in my quest to make a video game prop more screen-accurate. Um. Oops?

This kind of display has a wide range of applications. I’m going to get a little promotional here but imagine being in a boardroom meeting video call and the boss is in the centre of the table, so everyone sees a clear view of them. Imagine a restaurant table with this in the middle, a digital assistant taking your orders, playing games with you until your food arrives. Imagine this on your kitchen island table showing the weather, currently playing music & other information from your Virtual Assistant, viewable no matter where you’re standing. Imagine those cylindrical advertising posters/screens, but everyone all around always sees the intended view. Imagine theme parks with these futuristic displays around the place. Imagine board games with friends, with this in the middle of the table, the dungeon master talking & pointing to YOU. Anywhere people are in a group where you currently look at a display to one side, this puts the display in the middle of the group. It’s effective. It’s practical. It’s achievable. And it’s relatively cheap.

If your company is interested in commercialising or integrating this tech into your systems, contact me to arrange licensing (obviously just the Andotrope part, not the video game replica parts like the brass cage or base).

(YouTube link in case the above embedded video doesn’t work for you)

There’s lots of fine-tuning to make the visual effect actually work, and selecting the right displays is crucial. I used the Blackvue Tab 10 as it was a good compromise of all requirements. Most important is that the displays must have almost zero flicker since any flicker becomes visible at high speeds, which unfortunately rules out most OLED and a lot of LCD screens that either purposefully flicker the pixels/backlight at a high frequency for dimming or their driving circuitry has a slight voltage ripple that’ll show up. You also want the brightest displays you can get, as a thinner viewing slit means a crisper but darker image – a 5-degree viewing slit means you only see 1/36th the display’s original brightness. Picking displays that are as light as possible makes balancing them easier, and as thin as possible is good for reducing the distortion curve in the final video. Finally, they need to be rugged enough to survive what’s effectively the speeds of a washing machine spin cycle; this is an occasion where devices with poor repairability that have been fully glued shut can sometimes be preferable.

The Andotrope display without the Imager’s brass cage, demonstrating that the final display you see is actually curved. The video is Catherine’s Escape from Riven.

To get the best contrast ratio possible, the outside of the cylinder is coated in Musou Black VL fabric as a compromise to find the blackest black that will hold up to the centripetal forces. My experiments with paints revealed that they didn’t like to stay attached to acrylic spun at high speeds, and the famed “Black 3.0” paint isn’t actually as dark as this fabric. The viewing slits were covered in a layer of 3M anti-reflective film.

Multiple layers of Black 3.0 paint on a Toy DeLorean’s bonnet vs Musou Black VL fabric under a bright light. The fabric is noticeably darker than the paint.

How it’s built: the Imager’s brass cage

The whole imager is actually only 60% scale of the original in-game one, because the original was just impractically large and everyone who has seen it in-person (including the game’s creators) thinks my one is the right size & big enough. The spherical cage is constructed of around 12 metres (40 ft) of 6 mm brass tube. The 20 segments were professionally bent, cut to length, filled with resin to provide extra strength (don’t forget these tubes hold the top of the Andotrope in place, meaning they’re structural), and a hole drilled through each end. They’re secured at the top & bottom by a bolt going through that hole, through a 3D-printed holder, to a Stainless Steel plate. There’s a matching second 3D-printed holder that goes on the inside of the cage, sandwiching the tube in place between both holders. The penta-bolts squeeze both 3D-printed holders together, firmly gripping all the tubes.

I applied a clear coat to the most of the brass to preserve its shiny appearance, while leaving the cage tubes untreated to allow them to develop a natural tarnish over time. Here’s what the inside of the mounting points look like to give you a sense of how complicated they are & how fiddly it was to assemble this in the limited space.

3D-printed components

I divided the 3D-printed holders into 5 segments, because I held true to the spirit of Riven/Gehn to that level of detail. Modelling them presented challenges such as matching the curves of the tubes, ensuring proper clearance for bolt heads and access for tightening bolts, optimising the design to minimize resin usage, and incorporating drainage holes for improved printing. All of which is millimetres (or sometimes under a millimetre) away from one another. They represent the most densely complicated parts I’ve modeled and printed to date. They’re super pretty though.

I designed four 3D-printed grips that securely hold the tablets in place and can be adjusted to balance the device. These were honeycomb-hollowed not only to save resin but also save a few grams of weight since they are part of the rotating mechanism. Including the spherical dome on top, this makes the total number of resin 3D-printed parts… 25. Gehn’s extra favourite number. Mwahaha.

The base case was FDM 3D-printed in 4 parts out of PLA+, a corn-based plastic. Modelling & optimisation took around 30+ hours for these parts, with an additional approximately 70 hours for printing. The quarters were bolted together then covered in flexible automotive putty and painted up to resemble rock. The interior was coated in noise & vibration-absorbing paint to help make moving parts as quiet as possible.

The Imager’s base

The Imager itself stands as its own work of art. I wanted it to be as authentic to the game as possible, so metal was used for a lot of the internal and external components. 3D printing, laser cutting, resin casting etc all have their places (and all were used to create this device in other areas) but none match the aesthetic appeal of actual brass. The long-necked three-way toggle switches on the front are all made of stainless steel, while the brass panel they’re attached to serves as both the access panel for the internal electronics and features an exciter on its back, so the entire panel functions as an invisible speaker. The Imager’s handle is made from machined stainless steel, mounted on a cast iron crank, connected to a brass axle, which in turn is attached to a dynamo designed for wind turbines. As a result, you can feel the weight and resistance of real metal in your hand, while it actually generates electricity and produces the right kind of whirring sound, resembling a proper machine rather than a plastic toy. Since human output is too intermittent to reliably power the device, I incorporated a power cable made of mains-rated braided twisted jute, to maintain consistency with the overall design aesthetic.

Altogether, the Imager weighs 13 kg (29 lbs), stands 71 cm (28 in) tall, and utilises over 300 bolts. Speaking of bolts, yes, those are 5-sided pentagonal bolts, or “pentabolts”. Just like Gehn used in the game. And every single one serves a structural purpose; none are merely decorative additions. I meticulously sanded off the stock markings from each bolt to maintain the 90s-basic-3D-model-shape aesthetic without any distractions. I sourced mine from McMaster-Carr.

I have to share these 3D wireframe views even though I know it’s a bit hard to see anything in them because they illustrate well the amount of complexity inside the machine. Plus, the top-down view looks a bit like an Iron-Man-style Arc Reactor. And when you’re creating things that accidentally resemble Iron Man’s equipment, that’s a sign you’re on the right track.

Internally, things are built from a mix of Aluminium to save weight, Stainless Steel where more strength is needed, pure steel for the device’s main axle, and brass where it would be visible (always the thinnest sheet I could get away with to save weight & reduce costs). The main internal structure is constructed using T-slot, opting for their slightly higher strength compared to V-slot. The mechanics come from goBILDA, a company that specialises in robotics competitions, but they’re also great for quick prototyping with all their components using a well-thought-out modular grid system. I strategically placed rubber washers and rubber sheets throughout the device to minimise machine noise & vibration. My cat Lana supervised the assembly process, because the Internet insists that all decent build logs should include at least one picture of a cat.

Electronics

Due to the intermittent nature of a human turning the crank/dynamo, the imager is powered by a Meanwell 12V power supply that accommodates both 110V & 230V. The motor driver is a DFRobot DRI0042, with an Arduino Pro Mini acting as the motor controller. A Raspberry Pi 4 with an attached DAC+ shield for audio output serves as the heart of the machine that controls all the other components. To prevent voltage spikes or reverse current from motor braking, a Pololu Shunt Regulator is used to keep the voltage below 13.2V.

The electronics inside Gehn’s Imager that drive the Andotrope display (only some of the wires are connected in this photo). From left to right: 12V Meanwell power supply, Pololu Shunt Regulator, Raspberry Pi 4 with DAC+ shield, Arduino Pro Mini, DFRobot DRI0042 Motor Driver.

Although the game version of the Imager doesn’t have them, I added five three-way toggle switches and a brass panel to control it. The first switch controls the power. The second switch controls the speed, with settings of roughly 20fps, 30fps or 40fps. Slower speeds produce quieter operation, while faster speeds result in a more stable image. The third switch adjusts the volume. The third, fourth and fifth switches are for video selection, offering a total of 27 available videos. Speed and volume adjustments can be made at any point during the Imager’s operation.

One significant aspect to making the Andotrope work is that all communication between the Raspberry Pi and the tablets occurs over Wi-Fi. Physical wired connections, such as brushes or slip rings, aren’t reliable for high-bandwidth data connections, and I know some have said that Wi-Fi can become unreliable at high speeds, but I haven’t noticed any issues in this application. MQTT handles the basic communication, and optimisations have been made to minimise latency so the tablets stay synchronised. For example, dummy packets are sent every 8 seconds to prevent the Wi-Fi chips from entering low-power mode. And because all communication happens via Wi-Fi, I can also control every aspect of this Imager from my phone – including playing back extra videos that aren’t on the switches.

I wrote a custom app for the tablets to handle network communications & play videos (though you can also run any other app to watch something on YouTube, video chat, play a game, etc). The tablets’ backlights dim in between videos to conserve battery life and maintain a visually seamless black appearance of the cylinder. This also means the tablets’ batteries last a full day between charges.

The Dabber

In case I ever need to manually use the tablets due to a pop-up menu or something, my other half created this neat little device we named “the dabber”. It’s made out of hand-carved leather & thread with a wooden handle. A conductive stylus tip is attached to the end, with enamelled copper wrapped around it down to the handle to give it sufficient capacitance. It fits through a small hole in the top of the cylinders, and when you rotate the spindle on the handle, it bends over in that direction. Removing the tablets from the brass cage requires significant disassembly, but this plus the small amount of space you get by lifting the end cap off the cylinder is enough access. If a lot of tapping is needed, a Bluetooth mouse does the job.

The Dabber. A custom tool made of wood, hand-carved leather & thread designed so you can use the tablets inside the Andotrope/Imager without removing them.

(YouTube link in case the above embedded video doesn’t work for you)

Presentation

Below is a video of my Mysterium 2023 presentation, and here’s a copy of my slides.

(YouTube link in case the above embedded video doesn’t work for you)

Improvements

There’s lots of ways you can iterate on the Andotrope design, some of these I intended to implement but I ran out of time before the presentation. I’m sure some people interested in licensing this tech will be interested in developing some of these ideas further. Here’s a few of them:

• Wireless power, eliminating the need for manually recharging the tablets. I bought the coils for this but I didn’t have enough time to wire them in.
• Anaglyph/Red-Blue Glasses 3D. Right now, this is just a matter of playing a correctly-formatted video.
• Polarised Glasses 3D by using different polarising filters on each tablet. I had planned to implement this feature, but once again, I ran out of time.
• Different numbers of screens. I used two screens as they conveniently balance themselves and give you twice the brightness, but there’s no reason there couldn’t be 1, or 3, or even 5. Higher numbers increase cost & complexity but provide a brighter image with reduced spinning speed for the same equivalent frames per second.
• Different sizes are definitely possible, from a small cheap phone-sized Andotrope to a larger monitor-sized screen. The main limit for larger sizes is overcoming centripetal forces. A cost-effective “BYO device” version could also be developed for different sized phones/tablets.
• By carefully synchronising the timing, frames could be synchronised across screens so each one always shows a different frame vs showing identical frames. When streaming content to two screens via Wi-Fi, this could reduce the amount of data sent by half.
• Using displays with very high frame rates and carefully synchronising timing, you could present different images to different directions simultaneously. Then you really could show some viewers the sides and back of someone’s head.
• Alternative screen technologies can also be used. OLED would be awesome if it didn’t flicker, particularly a flexible OLED that you curve so the final image appears flat. I investigated both transflective and e-ink tablets for this device, as you could front-light those with very bright LEDs, but all currently available options had poor contrast ratios.
• The enclosure doesn’t necessarily have to be solid. You could use something like privacy film, shuttered lenses, or other techniques to make sure the light from the screen only goes in the direction of the viewing slit, and the rest of the enclosure could be open. Make a significant portion of the enclosure open would result in a partially transparent display. I really wanted to do this but just couldn’t manage it in the limited time I had. There’s no reason the enclosure has to be a cylinder, either.
• Positioning optics either in front of the tablet or at the viewing slit to better direct the screen’s light. This would increase the display’s effective brightness, and it could also be used to reduce display distortion.

Addendum: other videos, assembly photos

Below are additional videos of other content currently loaded onto the Imager.

The original Andotrope proof of concept – a rugged phone, inside a tomato soup can painted black & sliced open, hot-glued to a pedestal fan. Hacky as all heck, but it proved the concept works.

Riven: Gehn’s Schoolroom Imager original in-game video. Compare it with my remade version.

Riven: Gehn’s Schoolroom original video, this time played on the Andotrope.

Hatsune Miku – World is Mine, because of course I had to. This is an earlier video from before I fine-tuned the synchronisation code.

Imager Explanation Instructions. This plays if you flip all switches up.

Riven: Moiety Sickle. This is exclusive new content from the remake of Riven, not the original. This is an earlier video from before I fine-tuned the synchronisation code.

Cyan Intro Logo.
Riven: Gehn’s Age 233 Office Imager of Keta: Original In-Game Video.
Riven: Gehn’s Age 233 Office Imager of Keta: Played on the Andotrope.
Riven: Minecart Ride. This is an earlier video from before I fine-tuned the synchronisation code; you can see a smoother version of this during my presentation.
Riven: Mag-Lev Ride. This is an earlier video from before I fine-tuned the synchronisation code.
Star Wars Episode IV: A New Hope Death Star Trench Run animation.
Riven: Catherine’s Freedom. This is an earlier video from before I fine-tuned the synchronisation code.
Myst IV: Intro video.
Myst IV: Atrus’s Intro Speech.
Myst 3: Amateria Ball Ride.
Obduction Mayor Introduction video. This is my personal favourite.
Firmament Trailer. This one does a good job of showing the maximum size a video can be.
Riven: Gehn’s Opera Easter Egg. Because I couldn’t resist being silly.
Gehn: “I apologise for the cage” (except I really don’t).
Riven Remake Teaser Trailer.
Mind Blown Meme Guy.
Mr Burns Computer Greeting.
Cool-looking Exploding Particles.
A Cat. The internet demands it.
Generic 3D Animal Imagery.

Here’s a few action shots of the assembly process.

Partially-assembled selfie!

Assembling the imager.

Assembly yoga.

Finally, if you like the Andotrope technology at the heart of this video game prop replica, you should check out my version 2 Andotrope proof of concept. It’s smaller, faster, quieter and cheaper – aka better in so many ways!

The post Gehn’s Holographic Imager/​Andotrope appeared first on Realm of RIUM+.

…Or I’ve come up with a convenient narrative excuse for making Riven Village/Tay Cake Pops! 😉

The cakes are dark chocolate, tequila & chilli flavoured, as that seemed like a very Riven-esque combination to us. The outsides are all coloured white chocolate. Everything except the cake pop sticks and the stand is 100% edible with no armature wire or other supports used.

@made_meka and I first tried Tay itself, but melting the chocolate to make the window depressions didn’t work very well at scale, so we pivoted to villager huts.

There are NO supports/wires in any of the bridges/ladders/etc; those are 100% chocolate! Each piece was made individually, then “glued” together with liquid chocolate in an air-conditioned, humidity-controlled room.

Cake pops need a stand to hold them up, so we built Tay’s cliffs. They were made from 5mm foam board, traced freehand while watching the flyby video.

A super big thanks again to @made_meka for their help with this!

Now it’s time for me to pop some Rivenese cake pops!

The post Riven Village/Tay Cake Pops appeared first on Realm of RIUM+.

(YouTube link in case the above video doesn’t work for you)

We started with planing the design – specifically, how could we make a unique approach to this cake, so it wasn’t just another iteration of Myst island. That’s when I had the idea to show a cross-section of the island to display the subterranean caverns. Meka loved this idea, and with his background in architecture, he was well equipped to visualise the final product.

As a way to take stock of what ingredients are available to make this edible diorama, we took a few trips to different stores to find the best ingredients for sculpting and cake decorating. The grocery store had a decent selection that would have been fine, but the trip to a specialist cake decorating shop had fantastic things such as bronze food paint & powdered food colouring.

The making process begun with choosing an appropriate scale to make the cake. Using a 3D model of Myst Island, we found a size that would allow Meka to sculpt the smallest models we wanted to include, as well as considering how much fruit cake we can realistically eat (side note: this is Australian-style fruit cake, which is far more edible & tastes far better than its international counterpart). The board is around 600mm by 300mm, or around 2′ by 1′. I then printed out scaled drawings of the plan view of the island for Meka to start sculpting. Being able to consult these wireframe images, as well as measure dimensions straight off the 3D model, was super handy to make sure everything was scaled correctly & in the right place. Sculpting all the individual buildings, trees & artefacts took many days of fiddly work until we had the majority of the chocolate and sugar cake toppers finished.

2 days put from the deadline, the cake sculpting began. A copy of the island plan was made on baking paper, which was used to make approximate placement of the landscape, contours, buildings & the dock. Again I was in charge of scaling the elevations of the landscape, while Meka’s sticky but far steadier hands sliced away at the cake.

Once we were happy with the overall shape of the island (taking into consideration the underwater portion of the island that Meka approximated), the cake was generously drenched in rum so that it would stay preserved for weeks. There was also the added bonus that the rum helped pull the crumbling cake together after much cutting & piecing together.

It was now time to put on some top soil. A thin layer of brown fondant was stretched across the fruitcake & massaged into shape. The rock portions of the island were painted with a palate of royal icing in different colours to approximate granite, and a layer of moulding chocolate put on the cake board, ready for the ocean water (a mistake we would soon find out) The tricky job of making the sectional view of the internal chambers took a little planing & creative licence. As many Myst fans may know, the chambers don’t exactly fit in the island faithfully, and to make a clean section, a small amount of artistic license was required.

Grass made of crushed digestive biscuits mixed with shredded coconut was applied to the appropriate areas. The buildings, pathways, stairs, ships, pillars & trees were positioned and blended into the landscape, before a dam of packing tape & cardboard was constructed around the cake ready for the sea water. The ocean water was made with agar powder, water, sugar & flavouring, which was cooled to 40’C/105’F before being poured around the cake. The underwater chocolate & the fondant of the island began to dissolve in the agar, even though the jelly was hard. This was not a major problem as the colour stayed in the jelly, and the dissolving fondant dripped slowly, which we continued to mop up.

After removing the jelly mould, the cake was almost done, but there was a blank space on the side where the island was cut off. Meka had a plan for this – literally! He drew out the plan view of the island, as though Atrus was still in the process of writing the island into existence. It was finished with a chocolate version of Atrus’s quill and ink, along with his memorable words.

Aside from some small amounts of armature wire to hold up things like the trees, everything else in this cake is edible. Most importantly, most of the sculptures are chocolate-based instead of being fondant-based, so it actually tastes good too (eg the quill is entirely white chocolate). And now that it’s finally done, it’s time for us to enjoy some cake after staring at it all week! *nom*

The post Myst Island Cake appeared first on Realm of RIUM+.

A 2x DPDT knife switch, rated for 500V 60A, with arc suppressors

Just cleaning it & replacing the springs was the easy part. Safety is important – especially when you’re going to have “exposed” bare copper like I have here. For this knife switch the exposed bare copper is only ever running at 5 Volts, and those +5V connections are used to open/close some relays, with additional protection if the exposed areas ever go too high in voltage or current. You could lick the bare copper if you wanted without feeling so much as a tingle. But I don’t recommend licking copper; it tastes bad.

(YouTube link in case the above video doesn’t work for you)

“Pull the Lever, Kronk!”

Fully restored/repaired/running, this knife switch is now sitting around my house as a random extension cord you can use to turn on/off any appliance it’s paired with. Because why not make turning on a lamp a little bit more Mad Sciencey.

The post Mad Scientist Knife Switch Extension Cord appeared first on Realm of RIUM+.

It tells you the time both in our “surface” time and in the D’ni cavern!

Technically it’s more a “chronometer” than a “clock” – the main difference between the two is that chronometers have far higher accuracy & precision, to the point that they can be used for scientific experiments. For this one, it’s generally safe to assume it shouldn’t read outside 0.003s of the actual time, but in practice it’s usually under 0.001s of the actual time. It’s no atomic clock, but it’ll do for most of my slow-mo needs. The whole project’s been designed to be as cheap, low-tech, skill-free, and expensive-tool-free as possible.

(Youtube Link in case the above video doesn’t work for you)

First up, a little primer – the digits used in the Myst games, aka D’ni digits, are a base-25 numbering system. This means they count up using symbols like [1], [2], [3], [4] … [22], [23], [24], [1][0]. That is, what they call “10”, we call “25” – the same way that in hexadecimal “10” represents what we call “16”. The numbers themselves are based on the numbers 0-4, which are then rotated anticlockwise 90° to represent 5/10/15/20. Here’s an example of D’ni numbers, showing how you add the row & column header symbols together to get the final number symbol:​

Each D’ni “day”, or “yahr”, is roughly 30 hours, 14 minutes long and each D’ni “second”, or “prorahn”, is roughly 1.4 seconds. The Guild of Archivists has more details on how the actual D’ni timekeeping system works if that interests you. There’s nothing like these digits anywhere out there on the market, aside from something way over-complex like using LCD displays, but that didn’t interest me much and wouldn’t meet the goals of cheap or low-tech. So I had to come up with my own… And here’s how that turned out!

There’s so many places I could start with describing how this project was made so I’m gonna pick the one that probably interests most people reading this – the custom D’ni digit 25-segment displays! These are basically like my own custom 7-segment displays, but they’re easier to read with much higher contrast than store-bought 7-segs. I couldn’t find any instructions or guides out there on how to make your own (I’m sure there has to be some out there somewhere), so I had to work it all out myself from trial and error. The design itself was all made in Inkscape. Laser cutting holes in sheet acrylic and filling them with translucent resin was the way to go. The trickiest part is to have even light diffusion throughout an entire cell. The black parts are made from laser-cut 4.5mm black acrylic.

Laser-cutting D’ni digits out of acrylic

To help bounce light around inside each cell as much as possible, I airbrushed them with a thin white paint before filling them with resin. For the side that was to be the “front”, aka the good-quality side, I wanted the poured resin cells to be smooth & flush with the surface of the acrylic, which is tricky. I placed a piece of clear packing tape on a table with the sticky side up, stretched it out as far as I could, then carefully placed the front of the acrylic piece on the stretched tape. This kept the packing tape under constant tension, so that the resin cured against a smooth flat surface. The empty cells were filled with a 7:1 mixture of clear resin with super fine plaster of paris (mixed before pouring, obviously), which was the best-looking diffusing medium I tried. If you try this, sift the plaster into the resin while stirring to make it as evenly distributed as possible and to reduce plaster clumps in the resin. Use a needle to break up the remaining clumps and to remove any air bubbles that might be stuck in the corners. I recommend carefully picking up the cured acrylic blocks and looking at them from underneath to check for any plaster clumps or bubbles too. A vacuum chamber would be great if you’ve got one to remove the bubbles, but I didn’t have one. Once the resin was cured I carefully removed the packing tape and the segments were ready.

(Youtube Link in case the above video doesn’t work for you)

At 4.5mm thick, a single layer of diffusion from this material is likely good enough for most people, but just to make the light segments look extra smooth I used two layers of resin-filled acrylic. However, in this video you can see that there’s a lot of light bleeding from one cell to another, so to seal the edges well, I laser-cut some cardboard gaskets out of 2mm thick black cardboard backing board. I painted the interior edges with a silver pen to increase reflection. I used these gaskets between the two layers of acrylic as well as between the acrylic and the circuit board. I tried adding layers of proper light diffusion film between the gaskets, but they did so little and they would’ve been so fiddly to place in each cell that I didn’t bother.

The 5 layers in the 25-segment digital D’ni display modules – acrylic layers on the left, cardboard gaskets in the middle, circuit board on the right

The custom circuit boards were all made in EasyEDA, which is simple enough to use that it runs in your web browser. The layout was imported from Inkscape’s SVG and I used that to properly position the LEDs. Each board has 50 individual LEDS in strings ranging from 1 LED to 4 LEDs long. There’s 36 discrete cells, or resin-filled holes in the acrylic, but some are always lit up together so there’s only 26 controllable segments. There were 2 different voltages used for these boards – 9 Volts for the strings of 4 & 3 LEDs, and 5 Volts for the strings of 2 & 1 LEDs.

EasyEDA’s logic-level layout of the 25-segment D’ni Display

Silkscreen layout of the 25-segment D’ni Display

I know a lot of people like to rag on the autorouter feature of EDA software, but for something like this it works perfectly. Aside from a few starting obvious straight traces I put down myself, and a few extra links added right at the end to reduce the chances of the top or bottom planes acting like antennae, everything else was autorouted.

LEDs and a couple traces placed on the 25-segment D’ni Display circuit layout

Final circuit layout of the 25-segment D’ni Display circuit, mostly autorouted – I didn’t draw this, it was automatically drawn for me

With so many tiny SMD LEDs needing soldering, I definitely recommend paying extra to order a solder stencil along with your circuit board. I have pretty shaky hands due to some medication I’m currently on, but I could manage placing them on the small pads of solder paste left by the stencils. It’s called solder paste but it’s easier to work with (and more accurate) if you think of it as a bunch of tiny beads in oil, rather than an actual paste. If you’ve ever wondered what solder paste looks like up close, here’s some microscope photos!

You can use a fancy reflow oven or an electronics hot plate to fuse the solder, but you can also just use a frying pan on a stove, so long as your pan is actually properly flat. Getting the right temperature is important so check with your brand of solder paste – I used Maker Paste which needs 140’C/284’F. Note that standard cheap IR spot thermometers won’t normally work on metal pans (the pan will reflect the IR light giving a wrong reading), but thermal cameras or cooking thermometers work. One clever hack is to add a few drops of water to the pan & count how long it takes for those drops to boil, add half of that time again, and you should be at around 140’C. Preheat the frying pan and the moment the paste all melts & goes shiny, remove the board from heat – this should take under 10 seconds.

Frying pans totally work as reflow ovens

Pro tip – you can use baking paper to help make it easier to pick up when you’re done, but make sure you use paper that’s rated for whatever temperature you’re using. This is what happens when you use cheap paper that’s not rated that high. Oops. Made a super pretty pattern, though.

I asked a couple dozen people for guesses on what made this bubble-like burn pattern and no one guessed baking paper on fire. Go figure.

And here’s what they look like with the solder paste melted solid. Note that you don’t have to actually get the LEDs perfectly lined up when you’re using solder paste to do SMD soldering, if you’re slightly off then surface tension will (hopefully) pull them all into near perfect alignment.

I tried 0804 LEDs but they were too big to fit within the segments so I dropped down to 0603, which if you don’t know what that means, they’re 0.06 inches by 0.03 inches, or around 1.5mm by 0.76mm. This is 100% tweezer territory. Here’s a size comparison for you.

Hi I’m a tiny 0603 LED! These are my friends, a US penny and an Australian 5c coin!

Here’s what the circuit board looks like all lit up

(Youtube Link in case the above video doesn’t work for you)

Here’s what the final thing looks like with only one layer of diffuser over the top! It honestly could’ve been fine like this, but because I went the extra mile and made 2 diffuser layers, those segments are more evenly lit than the standard 7-segments I used for the normal digits!

(Youtube Link in case the above video doesn’t work for you)

Just because, this is what the digit circuit boards look like with a thermal camera, which is a great way to make sure that all the connections are good. This step certainly isn’t necessary, but I have access to a thermal camera with work, so I figured why not use it.

Thermal camera photo of a D’ni digit

Put this all together, and you get a finished 25-segment display module for showing D’ni digits! The screws are carefully positioned so the threads will go through the case but the head of the screws overlap the modules to hold them in place. Here’s what they look like – layered like an onion, or maybe an Ogre.

Overview of the layers of a 25-segment D’ni Display Module

Here’s what the insides look like without any wires connected. Bottom left in pink are some TLC5947 constant-current variable brightness LED drivers, and they’re sitting in standard off-the-shelf breakout boards with heatsinks attachedto them. These are what turn on/off all the LEDs behind the D’ni digits. Bottom right is some power supplies to convert the 9V in to the 5V some chips require (this takes some of the heat load off the TLC5947’s for the segments with only 1 or 2 LEDs in them).

The inside of my 25-hour D’ni clock, without any wires connected. The top right is a voltage level converter that I screwed up its size in the circuit board design step, so I just extended it up to have enough room to fix the error

Top middle is another custom circuit board with high-current shift registers to display the “normal” digits. This whole board was designed to be through-hole, as an “easy” design for a beginner solderer to start with. The reason why I’m using a bank of shift registers to control all the LEDs instead of just alternating between them in banks is that this means the display has no flicker and still works during high-speed/slow-motion photography experiments – which is part of what makes it a chronometer and not just yet another fancy clock. Rounding it off is the guts, a branded (not Chinese knock-off; they often have bad power regulators) WeMos/Lolin D1 Mini ESP8266. Having 802.11n-speed WiFi capabilities means it’s already equipped with a reasonably accurate Quartz crystal, to the point that I found an external timekeeping regulator like a temperature/oven based crystal to be unnecessary. The logic it runs isn’t too complicated – connect to the nearest available WiFi point, perform a geoIP lookup, perform a timezone lookup for that location, then poll a few of the nearest NTP servers every few hours. The initial sync is pretty much always within 3ms, and by keeping track of the ESP8266’s clock drift as well as the latency/jitter to the nearest NTP servers (plus a few additional tricks like time of day to estimate the crystal’s temperature variance and waiting for a quiet moment on the WiFi network before transmitting to reduce jitter), its accuracy is refined with each update. Internally it calculates its accuracy in picoseconds (that’s the unit prefix smaller than nanoseconds), but that’s mostly because I’ve been stung enough times by weird edge cases that I try to avoid floating-point maths wherever possible. Officially I’m only calling it accurate to within a best-case of 1ms because that’s a nice round number & is already beyond my home DIY abilities to measure or improve, and just to make extra sure I’m not “overselling” its accuracy that’s why the display only shows a 100ms & a 10ms digit, but not a 1ms digit. One hidden feature of this chronometer is because of the choice of drivers used for the LEDs, I can fully control their brightness and not just turn them on or off – for instance, at night the display dims and the squares around the D’ni digits turn off so it isn’t blindingly bright if you have to go to the bathroom at 2am.

These circuit boards are held up by custom 3D printed standoffs – sure, I could’ve just bought some, but 3D printing some was cheaper.

This design was very cheap and very modular, but its one problem was a ridiculous number of wires were involved – over 450 (!) connection points, all of which have to be connected to wires long enough that you’ve still got enough space to access them, which occasionally gives signal integrity flickers. If I was doing this again, I absolutely would design the digit circuit boards to at least have the shift registers included on them, to drastically reduce the number of potential failure points.

The final step was to laser cut a box to fit this all within. I used the fantastic online tool Boxes.py to make this happen – this is the “Display Case” option. All I had to do here was place holes for the displays & power cable, then get laser cutting. I recommend doing a small test first to make sure you get the play or burn correction settings right depending on how snug a fit you want. This also shows what the box actually looks like, since it’s so hard to photograph glossy black acrylic.

The warning label is true – lasers are awesome.

Oh and before I forget – don’t ever give up on your electronics projects just because they seem too hard. I started trying to build this clock nineteen years ago by trying to assemble it out of individual transistors, because modern cheap easy-to-use microcontrollers like Arduinos weren’t a thing, and higher-speed wireless-enabled ones like the ESP8266 were even further away. Building things with electronics is literally getting both easier and cheaper every single year. So if you think something is “too hard” right now, wait a few years and you’d be surprised what other options might be available for you! Here’s one of my failed attempts to build this project from back in 2002 (yes really that old!).

Finally, here’s the SVG of the D’ni Digits including segment numbers, and Gerber files of both the SMD 25-Segment D’ni Display Digit circuit boards and the through-hole normal digit shift register circuit board. You’re free to create whatever you want with these – just credit & link back to me plus let me know so I can see what cool stuff you make! I officially unveiled & presented this chronometer at Mysterium 2019, the annual fan convention for Myst fans. Here are my slides for the presentation, and you can watch my presentation below – I skip over some of the more technical areas but I go more into actual D’ni timekeeping than I do on here.

(YouTube link in case the above video doesn’t work for you)

One final final thing – just to show that the 10ms digit really works and isn’t just a random blur, here’s a slow-mo recording of it at 240fps.

(YouTube link in case the above video doesn’t work for you)
(Before anyone tries to correct me – yes I know there are technically 36 discrete light cells making up 26 controllable segments in these displays, neither of which are 25. But I asked myself “what will people search for when looking to find this project?”, and since D’ni numbers are base-25 that’s what people are likely to use, so that’s why I decided to call them 25-segment displays instead. So there. 😉 )

The post 25-Hour Digital Myst Clock/Chronometer appeared first on Realm of RIUM+.

The selection of wafers is as varied as I could make it, made by multiple manufacturers across both Europe & America, from 76mm/3 inches to 150mm/6 inches in diameter, from the late 1970s though to the 2000s. Examples include an 8051-compatible microcontroller, a monitor driver chip, military/industrial grade ruggedised memory, a thermometer (DS1775), a Lexmark printer cartridge chip, an Operational Amplifier (DS4812), a MIPS R3010 floating-point co-processor similar to that used in the PlayStation 1 and the SGI workstations used to render 90s things like Jurassic Park and my favourite game Riven: The Sequel to Myst, Solar Photovoltaic panels, interposers, test patterns, bare unpolished Silicon, and even a thin layer of pure 24k gold.

Because the etchings on the wafers are so small, a lot of them produce fantastically vibrant rainbow patterns when the light catches them at the right angle.

Some background if you don’t know what these are: computer chips are created by first growing giant cylindrical crystals of almost-pure Silicon. These are then sliced up into thin wafers and these wafers are chemically etched with all the wires & transistors using mask & a UV light source. Think of it like creating an image on photography paper using shadow puppets & a flashlight. Each wafer normally has hundreds of individual chips, or dies, etched into it. Then they’re cut up, tested, and packaged into their final form. Companies don’t normally sell the raw whole wafers but you can often buy them on eBay, mostly for older wafers and/or manufacturing runs that had defects and were destined for the bin. Prices for etched Silicon wafers vary anywhere between a few dollars to a few ten thousand dollars per wafer, depending on what it is. In total, the whole artwork is made up of many thousands of dies, far too many for me to try and count.

The first step in producing this wall artwork was to create a smaller test version, to see if the whole concept would work & how it’d look, and to iron out any kinks in the process. The prototype I created was made with just one wafer. This wafer was held in place by just the raw screw threads, which didn’t really do a good job to hold it securely in place. Valuable experience gained – come up with a better mounting system for the large design. I used a laser cutter at a lower power level to engrave-remove a few millimetres of acrylic to countersink the screw heads so they didn’t stick out. It took some trial & error but eventually I had it dialled in perfectly so the screws were perfectly flush with the acrylic. This test run was to be a present for my mother, so I picked a wafer that was made the year I was born and shines mostly pinkish (her favourite colour). The actual chips are 256K SRAM memory, so the back’s got a cheesy engraving text about “memories” on it.

Despite some of the wafers being supposedly the same size, I noticed that a lot varied in size a little bit. To account for this, and to hold them in place so they wouldn’t rattle or rotate, each wafer was individually measured and individual mounting spacers were laser cut out of 2mm thick black backing cardboard. Since the wafers are round, I modelled the top holding clips to look like the Chevrons that surround the Stargate. These Chevron clips were 3D-printed on a resin printer – resin printers might be normally slow but when you can print 18 clips at a time, they’re not only quicker than an FDM 3D printer, the end quality is far better too.

The whole display piece was far too large (730mm high * 830mm wide) to be cut in one go on a laser cutter, so the piece was broken into 4 smaller pieces and glued together. A brutalist aesthetic was adopted for both the jigsaw-like interlocking lines as well as the whole shape. This worked well to hide some of the size limitations so I could get the maximum usable area possible out of the raw sheets of acrylic. For instance, the notch cut out on the middle left isn’t just there for aesthetics, it gives me a couple more centimetres of length for both the upper left and the bottom pieces. Without that notch, neither piece would fit within standard 300mm * 600mm sheets of Acrylic. A top layer of clear acrylic was added to both keep dust away and to protect the wafers. Some of these wafers are so delicate even a single gentle wipe with a fresh microfibre cloth will instantly destroy them (which I accidentally did trying to clean fingerprints off one, oops). It took around 9 months to build, most of which was taken up with trying to acquire as wide a variety of wafers as I could.

When doing any project involving lots of something, it’s important to remember that the time required can quickly balloon if you have to do that job many times over. For instance, there’s 63 3D-printed Chevron clips in this project – spending 8 minutes per object cleaning them up means over 8 hours just cleaning. I tried to keep the part count to a minimum, but even still there’s 21 wafers held in place by 63 3D-printed clips and 63 laser-cut mounting spacers, held together with 63 bolts plus 63 nuts and 63 black end caps, mounted on 4 sheets of black acrylic with 4 sheets of protective clear acrylic over the top, separated by 16 bolts with 48 nuts and 16 end caps… Phew. This all means the total part count for this project was 424 pieces. If I could do it again I would consider removing the laser-cut spacers and merging them with the 3D-printed Chevron clips to reduce the number of parts a little & eliminate one of the construction materials.

In the spirit of openness and encouraging others to build cool stuff too, here’s the Stargate Chevron .STL (3.0MB) and the Silicon Wafer layout .SVG. Go nuts with them!

Finally, since I know some people love them, here’s some photos of the Silicon Wafers taken with a 500x digital microscope so you can see what they look like up close. The patterns vary widely depending on the wafer – memory tends to look like repeating structures, logic gates tend to look like a random mess, and sensors/anything analogue/test patterns tend to look like some abstract painting. I could swear that one of them has Silicon art of an OR-gate with one leg shorter to make it look more like the Star Trek logo, but it’s just slightly beyond the magnification limits of my microscope so I can’t photograph it. Most of these are from the wafers you see in this artwork, but there’s a few from other wafers I didn’t use.

The post Silicon Wafer Wall Artwork appeared first on Realm of RIUM+.

1. Internet memes
2. That are at least 15 years old
3. Involving a giant banana

I still can’t believe that I managed to get three costumes out of something so restrictive.

To go with this costume I made a red sound box to play music that I could dance to. That’s mostly what I want to write about on here, but let’s just get the costume photos out of the way first.

Friday’s costume: ring ring ring ring ring ring ring, BANANAPHONE!

It’s no baloney, it ain’t a phoney!

Saturday’s costume: it’s Peanut Butter Jelly Time!

Where you at? Now there you go!

Sunday’s costume: Rejected by Don Hertzfeldt’s My Spoon Is Too Big (which, by pure luck, was re-released in 1080p just two weeks before the convention)

“My Spoon is too big. My SPOON is TOO BIG!”

As you can no doubt tell, I spared no expense with these costumes.

The red sound box was one of those things that “should” have been easy, but because I used cheap Chinese parts & left it to the last minute, it became a giant cascade of one hack after another. The idea was to have a button that when pressed played a short piece of music to accompany that day’s costume variation. I wanted the front button to be super enticing so other people would want to press it, and nothing’s more enticing than a giant glowing red button. I eventually got there with everything, but it ended up way more complicated than I had anticipated.

(YouTube link in case the above video doesn’t work for you)

The software on the box isn’t too complicated – press the button, music plays for a bit (just the first stanza). Press it again while it’s still running, it’ll play a little longer. The list of stanza stopping points was all pre-calculated per song. I’ll say right now, with anything like this it’s very important to consider how trolls could abuse what you’re building. In this case if someone ran up, pressed it a dozen times in quick succession then ran off, it only extended the music by at most one stanza beyond what’s currently playing – if you wanted to keep the music going you had to stay there and keep on pressing it as each stanza plays. And yes, many people tried doing that – much to their frustration when it didn’t work.

Here’s a numbered photo of the box’s innards, showing that copious quantities of hot glue & electrical tape are totally valid mounting & insulating techniques.

1) Arduino Nano 168p, 2) 5V relay board, 3) Red button light & microswitch, 4) Capacitors, 5) USB power bank, 6) Speaker, 7) MP3 board

Hacks & Slashes

Now for some of those hacks I mentioned:

• The cheap Chinese Arduino Nano’s (#1) that I had bought were supposed to be based on the ATmega328P chip, however when I plugged them in they were actually using the ATmega168P. The 168 has only 1024 bytes of RAM instead of 2048, and that’s not enough to read data off a microSD card & send it to an MP3 shield for playback. This meant I had to use a different music shield with its own on-board microSD card that accepts play/stop control commands. I probably should’ve bought the right Arduino instead, but hindsight & all that.
• The second cheapo MP3 shield I tried had no on-board amplifier. I bought a cheap eBay amplifier for it, but for whatever reason the amplified sound quality was atrocious – worse than a fast food drive-through speaker. So I had to change to yet another music board (#7), this one even simpler – apply power, it played the first song on its microSD card, and it had manual buttons I could tap into to control it beyond that.
• This worked great on a breadboard on my desk, but when all installed into the box there was too much electrical interference – likely because the speaker’s (#6) magnetic coil was right below the music board (#7). I could start the board, and control playback when it was playing music very quietly, but I lost the ability to control it or even stop it when playing music above a certain volume. Given I was running out of time and all I really needed was to just start & stop the music, I decided to use the sledge hammer approach. By which I mean I added a 5V relay board (#2) to manually supply & cut all power to the music board (#7) to control it that way instead. Insert an “I’m done asking nicely” reference here.
• This worked, but only intermittently – the relay’s (#2) inrush current was large enough to cause the Arduino to sometimes reset from the voltage sag, particularly when running off the battery and not my bench power supply. So, I added a ceramic & electrolytic capacitor that I had lying around (#4), and this fixed the voltage droop problem.
• …But it created another problem. The USB power bank (#5) I was using couldn’t handle the huge inrush current required to charge up the capacitors when you first turned it on. Rather than do something sensible like swap batteries or reduce the capacitor values, I wired them up so the USB bank went straight to the Arduino’s USB point (#1) but the capacitors were connected via the Arduino’s pins, in effect using the thin traces on my knock-off Arduino as inrush current limiters to the capacitors. This is what peak hack looks like.
• The USB power bank (#5) had another issue – since this was a power bank not a power supply, it was designed for charging things, not powering devices. As such, it automatically turned off if it thought the device it was connected to was fully charged. The clever hack to get around this was to reduce the value of the resistor to the glowing red button (#3), making it use more current & shine brighter, and altering the button’s pulsing pattern. This was enough to trick the USB power bank into staying on. Remember folks, if it’s a silly hack but it works, it’s not silly.
• At the convention centre the button kept on randomly triggering. Experienced cosplayers know that it’s always a good idea to shield, isolate & over-build anything electronic on your cosplay – the Brisbane Convention & Exhibition Centre main hall is well known as having a lot of stray RF noise inside it. I ended up modifying the code multiple times to incrementally harden it. I ended up adding my own external pullup/pulldown resistors around the place as I didn’t trust my knockoff boards to actually have them, I switched from a digital input pin to an analogue input pin for the button, I required reading a value of at least 992 out of 1023 from the button’s pin (aka 4.85V or higher), for 200ms straight without dipping for even a single moment, to trigger the music. This still resulted in a random trigger every couple of hours. Dat RF noise.
• Finally, hot gluing the speaker (#6) in place introduced a lot of reverb from mounting it by a mostly-solid method to the case’s fixed plastic. A sheet of ~1cm thick EVA foam was used as a decoupling spacer between the speaker & the case, and this solved all the bad audio quality issues.

If I had one piece of advice I learned from this project, it’s that knock-off parts from China can get you by if you’re on a budget or while you’re testing things, but for the final version I absolutely recommend purchasing the genuine products. This project would’ve taken me a fraction of the time it did if I had just spent a little extra for quality parts in the beginning.

(If I had a second piece of advice, it would be to set yourself a deadline well before something’s due. That way you’re not stuck hacking things together at the last minute from whatever you’ve got on hand plus what you can buy locally at exorbitant prices… But we both know neither you nor I are ever gonna actually do that one)

(YouTube link in case the above video doesn’t work for you)

This audio box’s going to be disassembled shortly, because I need some of its parts for another project (and it also served as a semi prototype of yet another underway project… I have too many things in progress).

Happy hacking!

It’s Peanut Butter Jelly Time!

The post Peanut Butter Jelly Time Banana Cosplay, Red Sound Box appeared first on Realm of RIUM+.