teaching machines

Phone Programming

May 1, 2019 by Chris Johnson. Filed under public, twoville.

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, 2]
  size = [8, 14]
  parent = hole

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

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

    
    
    
  
  
    

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

hole = cutout()

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

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

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

  
  expand

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.