Making this site

So, for a school project, I was tasked with making this website. Since I had a bit of experience with HTML before hand and needed a website of my own anyways, I decided to go all out and make this.

Design

First was deciding what I actually wanted this site to be. With the (somewhat self imposed) restriction of not being able to use JavaScript, and my dislike for overly modern, complex webpages, I decided that I would go with something very simple. I took inspiration from the site "Alf's Room" in its simplicity and clear passionate intent, and the focus on stuff the author finds interesting, rather than what will look good and do well. After getting the idea of what I wanted the site to be like, it was time to decide on theming. I wanted it to be simple again, partially out of desire to keep the code tolerable, and partly out of the fact that I didn't want my eyes to be confused by what I was looking at. The color scheme was inspired by the musical artist Inabakumori, who typically uses black and grey videos to accompany his music. After this, I spent some time comparing some colors that are built into HTML, landing on a slightly modified “Dark Slate Grey.” With these two colors in mind, I quickly scratched up a basic version of how I want it to look, with a navigation header, content, and a footer. I decided to have a lot of page specific elements, with wider page categories, to keep what I wanted to get across on that page more pertinent. To avoid making copious amounts of work for myself though, I still would follow a similar template. Finally was deciding what I actually wanted on the site. I needed a homepage, so that was order number one, and I've had the idea of sharing some of the images I take freely for a while now, so that was on the list as well. I also wanted a blog, since sharing my various (minor) discoveries with the world seems like a noble enough cause. Finally, I decided on adding the programming tab, since if I ever make more significant programs, being able to share them would be very nice.

Programming It

Now, it was time to put it together! After some very basic formatting, the first thing to do was the header and footer. The header was simple enough to adapt from a tutorial, but I can't say the same for the footer. Many tutorials just lied about what kind of formatting was needed, and broke entirely when scrolling was involved. I had to rework it multiple times throughout the project, since it was pointlessly complicated and convoluted to just make an element stay at the bottom of the screen. After that, the rest of the homepage was relatively uncomplicated. Next up was the image tab. Considering that I was going to actually host this online, I had to keep in mind the cost of bandwidth. Because of this, all the images had to have two versions, one small in resolution to keep bandwidth down when displaying them all, then one that was full size for people to download and use. I was inspired by Wikipedia's approach to this, with a small image in their articles, and a clickable version leading to a different page with the full image. I knew that copy and pasting some code then modifying it for every image would be unfeasible, so I had to make a script to do it for me. I made a short python script to automate the task, which worked remarkably well! After that, it was time to start working on the blog. The main challenge was getting the visual difference between standard page content and the blog posts themselves. Because the navigation was a separate div, there were issues with it clipping into the same space. After that, the main issue was page scrolling. Because I was using different position attributes, the footer didn't move when scrolling started. That was resolved by (ab)using the navigation panel, and pushing the div below it. After that, it was mostly smooth sailing! Attached is a video explaining some of the design decisions more in depth. After all that, Now I have this site!

Making a QOA decoder ASIC

I have always been interested in the chips that power computers. Throughout the years I have learned a lot about the process and what makes a computer tick, but I never had the ability to make one of these chips. Eventually, through the Tiny Tapeout project, I managed to make my own one of these chips that contribute to the whole world, a custom QOA decoder ASIC.

Tiny Tapeout

Through a newsletter, I came across Tiny Tapeout, a multi-project wafer program that allowed for relatively cheap development of custom silicon. By that point I knew that I wanted to do something involving the semiconductor industry, but I didn't really know where to start, but Tiny Tapeout enabled me to work on this project. It took me a few more months to start working on the chip, but eventually, inspiration struck, and I decided on a decoder for the QOA audio format. The format is a PCM audio codec designed for simplicity and speed, much like its sister image format QOI.

Designing the Chip

To design the chip, step number one was to learn the tools to make it. Modern silicon uses a language called Verilog to define what circuits to make and how the chip should function, but I came into this knowing none. I started off learning by using the tutorial on the Nandland website and made a custom adder. The process to turn this code into an actual design file, called a GDS, is all accomplished through the Tiny Tapeout GDS action on Github, making it all nice and simple.

After learning the language and tools the next step was to make the chip itself. The heart of the QOA format is the LMS predicter, which uses a look up table of dequantized values along with two, 16 bits wide and four deep banks of memory containing the values for the predictor itself, called history and weights. I decided to split the predictor into some segments: ROM, Multiplier, and history/weights. I would also need an interface to communicate with the chip, so I could actually use it. Because Tiny Tapeout has a limited amount of I/O, and because of its ubiquity, I settled on using an SPI bus, with a custom protocol to communicate what the chip is supposed to do.

If you want to learn more about the chip's architecture, I recommend reading the docs on the Github page for the chip, but the process went relatively smoothly. I encountered some issues stemming from my lack of knowledge about circuits, but I ended up submitting a chip that I hope works, which is being manufactured with Tiny Tapeout 07 and Skywater's 130 nm process node.

Conclusions

Working on this chip has been very interesting, and I hope to continue working on similar projects in the future. The samples of this are expected in late December, and I will keep everything updated once they arrive. My only main concern is with the SPI interface, which, since it was implemented when I was still very new to Verilog, may have some issues. If I ever do a second revision, I would like to improve that. I also aim to improve the performance with parallel execution, since currently the chip can only do one thing at once, but no parts are re-used between different instructions. Going forward, I hope I can implement these changes one day, and improve as a computer engineer.