Screenshots and Rounded Rects

Screenshots were my first focus. I'll be showing progress every week and it'd be pretty annoying to manually take 6 screenshots for every image I want to show. I wrote code that will A. Take screenshots using a light and dark theme (I'm unsure if anyone noticed every image on this site has a light/dark variant) 2. Take them at different pixel densities. This is so mobile and screens with high DPI won't have blurry text. Here's an image

Initially, I wanted two resolutions, mobile and not mobile. Mobile resolution is 360x240 which doesn't give me much to show. I had to choose, either show something different for mobile or have them consistent and show less. I choose consistency. The larger resolutions (960x540) looked awkward from having a lot of empty space so I had all images be 360x240 with different pixel densities. I'll likely need a "demo build" to show off something specific since you can't reasonably see the entire app with readable text at such a small resolution.

Rounded Rects

Next, I focused on rounded rectangles. I haven't tried rendering them before, and to my surprise LLMs didn't give me a simple solution. All I got was a few algorithms to tell me if a point is within a circle or where the outline is. What I wanted was to know how transparent a pixel should be. After taking a break I realized a simple way would be to make every pixel 16x16 and count how many inside were in the circle. The number could go up to 256 so I clamped it to 255. The results look good.

On the left side of the image, the background of the menu is lighter/darker than the background color (whichever is away from gray.) On the right, there isn't any color filled so you'll see the default. I'm not sure which looks better but once I implement most of the UI components I'll spend a little time on themes and polish.

If you look at the right side you'll see the corners are not right. I wasn't sure how to decide how much transparency a pixel should have and thought about implementing a bezier or quadratic curve. Then I realized there are probably no cases where I'd need an outline.

Other Code

While writing the screen capture code I tried different pixel densities to check if my math was correct. I noticed when I use 2.5 I would have random pixels showing up depending on the letter and the destination x, y. I briefly looked into it and it appears that GPUs use bilinear sampling and I would need 2 pixels of space between letters. Other minor things were loading icons, having a light and dark theme that wasn't hardcoded, and a bit of menu rendering code. This week was almost entirely screenshots and rendering.

See you next week