Dithering Makes Everything Cooler: Now Even Animated

[dukope] was writing a game, Return of the Obra Dinn, with a fantastic visual style. One of the choices was to make everything in glorious one-bit color, otherwise known as black and white, and then dither it back to monochrome. You know, like they used to do on the Mac Plus.

If dithering is your aesthetic, then it makes a ton of sense to take it seriously. And it’s absolutely beautiful – check out the video below.

But what’s even more amazing is [dukope]’s attention to detail on the dithering. For instance, this post on the TIG forums details the problems and solutions when you have a dithered image that needs to also be animated. You want the dots to stay relatively constant on the object as the virtual camera pans across the scene, and that’s going to necessitate a custom algorithm. And if you think that’s cool, have a look at how the book at the center of the game is animated.

What can we say. We loved dithering before, but this post has made our love even deeper.

Continue reading “Dithering Makes Everything Cooler: Now Even Animated”

Book Teaches Gaming Math

If we knew how much math goes into writing a video game, we might have paid more attention in math class. If you need a refresher, [Fletcher Dunn] and [Ian Parbery] have their book “3D Math Primer for Graphics and Game Development” available free online. The book was originally a paper book from 2011 with a 2002 first edition but those are out of print now. However, math is math, so regardless of the age of the book, it is worth a look. For now, the online version is a bunch of web pages, but we hear a PDF or E-reader version is forthcoming.

There’s quite a bit of discussion about vectors, matrices, linear transformations, and 3D graphics. The last part of the book covers calculus, kinematics, and parametric curves. Some of these topics will be of interest even if you don’t care about graphics but do want to learn some math with practical examples.

Continue reading “Book Teaches Gaming Math”

Mindblowing Graphics From An ATtiny85

[Görg Pflug] wrote in with his really nice graphics library. It’s got multiple layers, two text consoles, greyscale, internal halftoning, and sprites. It can pull off a number of classic graphics tricks and demos. Oh yeah, and did we mention it runs on a freaking ATtiny85 and an I2C OLED screen?!

This is an amazing piece of work — if you’d asked us if this was possible, we would have probably said “no”. And now it’s yours to use in your own projects. The GitHub repo is full of demos showing off everything from switching between multiple layers, extremely rapid text scrolls, animations, boing balls, and even a Wolfenstein-style raycaster. On an ATtiny85.

There’s a demo video, embedded below, that shows it all off, but honestly you have to think about what’s going to to be suitably wowed. The first demo just seems to have a graphic wave over static text, for instance. No big deal? It’s blending the greyscale layers together and dithering them out to black and white for the OLED in real time! On an ATtiny85.

While the library is written in straight C++, there are even a couple examples of how you’d integrate this with Arduino’s Wire library if you so wished. We don’t know about you, but this makes us want to whip together an ATtiny85 and SSD1306 OLED demo board just to start playing around. This isn’t just an amazing hack, but it would also be a useful way to add graphics and a nice console to any project you’re working on.

Did we mention it’s all done on an ATtiny85?  Over I2C? Kudos!

Continue reading “Mindblowing Graphics From An ATtiny85”

Advanced PCB Graphics With KiCAD 6 And Inkscape

There are many, many video tutorials about designing the functional side of PCBs, giving you tips on schematic construction, and layout tips. What is a little harder to find are tutorials on the graphical aspects, covering the process from creating artworks and how you can drive the tools to get them looking good on a PCB, leveraging the silkscreen, solder and copper layers to maximum effect. [Stuart Patterson] presents his guide for Advanced PCB Graphics in KiCAD 6.0 and Inkscape, (Video, embedded below) to help you on your way to that cool looking PCB build.

Silkscreen layers in yellow, solder mask opening in red

The first step is to get your bitmap, whether you create it yourself, or download it, and trace it into a set of vectors using the Inkscape ‘trace bitmap’ tool. If you started with an SVG or similar vector shape, then you can skip that stage.

Next simply create a PCB outline shape by deleting all the details that aren’t part of the outline. A little scaling here and there to get the dimensions correct and you’re done with the first part. [Stuart] has an earlier video showing that process.

The usability improvements in KiCAD 6.0 are many, but one greatly demanded feature is the ability to group objects, just like you do in Inkscape and any other vector graphics tool for that matter. That means you can simply import that SVG outline into the Edge.Cuts PCB layer and all the curves will be nicely tied together. Next you select the details you want for the silkscreen layer, solder mask removal layers and any non-circuit copper. In Inkscape it would be wise to use the layers feature to assign the different material types to a uniquely named layer, so they can be hidden for exporting. This allows you to handle silk, mask and copper PNG exports from a single master file, in addition to any vector details for outline, slots and holes.

Once you have PNG bitmap exports for the silk, mask etc. you need to create a footprint inside a board-specific library, using the KiCAD image converter tool. It was interesting to note that you can export a new image footprint from the tool and paste it straight into the footprint editor, and tweak all the visibility details at the same time. That will save some time and effort for sure. Anyway, we hope this little tutorial from [Stuart] helps, and we will be sure to bring you plenty more in the coming months.

Need some more help with KiCAD? Checkout this tutorial, and if you want a bit more power from the tool, you need some action plugins!

Continue reading “Advanced PCB Graphics With KiCAD 6 And Inkscape”

A vintage supercomputer with unique dual screen display

VCF East 2021: The Early Evolution Of Personal Computer Graphics

The evolution of computer graphics is something that has been well documented over the years, and it’s a topic that we always enjoy revisiting with our retrocomputing readers. To wit, [Stephen A. Edwards] has put together an impressively detailed presentation that looks back at the computer graphics technology of the 1960s and 70s.

The video, which was presented during VCF East 2021, goes to great lengths in demystifying some of the core concepts of early computer graphics. There’s a lot to unpack here, but naturally, this retrospective first introduces the cathode-ray tube (CRT) display as the ubiquitous technology that supported computer graphics during this time period and beyond. Building from this, the presentation goes on to demonstrate the graphics capabilities of DEC’s PDP-1 minicomputer, and how its striking and surprisingly capable CRT display was the perfect choice for playing Spacewar!

As is made clear in the presentation, the 1960s featured some truly bizarre concepts in regards to cutting edge computer graphics, such as Control Data Corporation’s 6600 mainframe and accompanying vector-based dual-CRT video terminal, which wouldn’t look out of place on the Death Star. Equally strange at the time was IBM’s 2260 video data terminal, which used a ‘sonic delay line’ as a type of rudimentary video memory, using nothing but coiled wire, transducers and sound itself to store character information following a screen refresh.

These types of hacks were later replaced by solid state counterparts during the microcomputer era. The video concludes with a look back at the ‘1977 trinity’ of microcomputers, namely the Apple II, Commodore PET and TRS-80. Each of these microcomputers handled graphics in a slightly different way, and it’s in stark contrast to today’s largely homogenised computer graphics landscape.

There’s a lot more to this great retrospective, so make sure to check out the video below. When you’re finished watching, make sure to check out our other coverage of VCF 2021, including some great examples of computer preservation and TTL-based retrocomputing.

Continue reading “VCF East 2021: The Early Evolution Of Personal Computer Graphics”

Ray Casting 101 Makes Things Simple

[SSZCZEP] had a tough time understanding ray tracing to create 3D-like objects on a 2D map. So once he figured it out, he wrote a tutorial he hopes will be more accessible for those who may be struggling themselves.

If you’ve ever played Wolfenstein 3D you’ll have seen the technique, although it crops up all over the place. The tutorial borrows an animated graphic from [Lucas Vieira] that really shows off how it works in a simplified way. The explanation is pretty simple. From a point of view — that is a camera or the eyeball of a player — you draw rays out until they strike something. The distance and angle tell you how to render the scene. Instead of a camera, you can also figure out how a ray of light will fall from a light source.

There is a bit of math, but also some cool interactive demos to drive home the points. We wondered if Demos 3 and 4 reminded anyone else of an obscure vector graphics video game from the 1970s? Most of the tutorial is pretty brute force, calculating points that you can know ahead of time won’t be useful. But if you stick with it, there are some concessions to optimization and pointers to more information.

Overall, a lot of good info and cool demos if this is your sort of thing. While it might not be the speediest, you can do ray tracing on our old friend the Arduino. Or, if you prefer, Excel.

The Faux-Vintage Becomes Vintage

For those who might have missed it, there was a brief period in the mid-00s where gamers everywhere eschewed consoles and PCs in favor of simple Flash-based games to be played in a browser. Among these was the game Peasant’s Quest, created by the folks at Homestar Runner and modeled after video games from the 80s. [deater] was a fan of this game and wondered if it would actually be possible to play this retro-styled game on actual retro hardware.

For the experiment he decided on using an Apple II since this computer is featured as a prop rather often by the developers at Videlectrix. It turns out that with some determination it’s actually possible to run this game on the late 80s hardware with very little modifications. Squeezing the sprites into the required space was a challenge, as well as getting the sound tracks to play properly, but in the end the game runs within the hardware’s 280×192 resolution with 6 colors. There are also detailed notes on how the complicated graphics system on the Apple works for those willing to take a deep dive. There’s a lot going on here, but surprisingly few compromises needed to be made to get this to work.

The game itself is available on the project’s webpage for anyone who still has an Apple II kicking around, or for anyone who is willing to try it out in an emulator. Of course you could always play the original Flash version but that’s missing a certain charm that decades old retrocomputers have with games. We certainly aren’t seeing video game controllers like those built for the Apple II anymore, for example.

Continue reading “The Faux-Vintage Becomes Vintage”