A custom MacOS screen saver, featuring 2D metaball outlines that merge with each other and with the current time, all rendered on the GPU using Metal!
Screen.Recording.2024-02-28.at.12.31.19.PM.mov
NOTE: For some reason the screen recording messes with the colors. Trust me, they look normal when you actually run it. (The lines are also a lot thicker.)
The project uses 3 main tools:
- The first is the nightmare that is Apple's whole proprietary way to make applications in Objective C. The core of this is a class called ScreenSaverView, whose methods are overridden to run the core application code, such as setting up render pipelines.
- Next is FreeType. FreeType is an amazing and open way to render text from ttf files to bitmaps or vectors. In this case, it is used to calculate a distance field for each character in the time, every minute, and then write them to a texture to be used in the render pipeline.
- Finally, we come to the inspiration for this project: shader code in Metal! There are 3 distinct vertex & fragment shader pairs that run each frame to render the text. The first takes the location and size of each ball and writes the sum of the distances to each pixel on a texture. The second performs marching squares on the ball distance texture and the sdf generated by freetype to combine them and save an outline to a texture. The final pass performs some anti-aliasing and adds color to the output of the previous pass, drawing the result to the screen.
Just download and build the project, then double-click the .saver file produced. Make sure that you have freetype installed via brew install freetype. To change the font, edit FONTNAME in timeGen.m.
You may also have to change the face_index in FT_New_Face (line 37). Currently working on a preference panel to be able to actually select fonts!