# teaching machines

## Phone Programming

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:



with viewport
corner = [-1, -1]
size = [12, 19]

hole = cutout()

// Screen
with rectangle()
corner = [1, 1]
size = [8, 14]
parent = hole

// Home
with circle()
center = [5, 16]
radius = 0.6
parent = hole

// Phone body
with rectangle()
corner = [0, 0]
size = [10, 17]
color = :black
rounding = 1
mask = hole

var twovilleDiv = jQuery('#twoville_orbit');
twovilleDiv.closest('pre').replaceWith(twovilleDiv);
document.getElementById('twoville_form_orbit').submit();

with viewport
corner = [-1, -1]
size = [12, 19]

hole = cutout()

// Screen
with rectangle()
corner = [1, 1]
size = [8, 14]
parent = hole

// Home
with circle()
center = [5, 16]
radius = 0.6
parent = hole

// Phone body
with rectangle()
corner = [0, 0]
size = [10, 17]
color = :black
rounding = 1
mask = hole



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.