Twoville now supports masking, which means we can subtract shapes from other shapes. Since I’m teaching a course on mobile app programming this semester, phones have been on my mind. Accordingly, here’s one of the first runs of the masking feature:
In this code,
hole is a container of other shapes that will be subtracted away. The screen and home button are its children.
Under the hood, subtraction is done by applying an SVG mask to the programmed image. The mask itself is not visible, but it affects how the image is seen. Under the white areas of the mask, the image will be visible. Under black, the image will be invisible. Where the mask is gray, the image will be semi-transparent.
I don’t want Twoville programmers to care about these color rules, so I made
cutout() generate an SVG
mask element that automatically contains a viewport-filling rectangle that’s entirely white—meaning the image will be entirely visible by default. Any child added to the mask is automatically rendered black and is therefore subtracted.