Teapots!

How to draw the Utah teapot in HTML using only right triangles.

Transcript

1. Teapots! Georgios Gousios & Erik Meijer TU Delft
2. Draw this in pure HTML + CSS!
3. <style>    div{  background:Black;                position:absolute;                width:9px;  } </style> <div  style="left:10px;  height:10px;"></div> <div  style="left:20px;  height:20px;"></div> <div  style="left:30px;  height:30px;"></div> ... <div  style="left:80px;  height:80px;"></div>
4. <div  style="font-­‐family:'Comic  Sans  MS'; width:300; border-­‐left:  60  solid  green;   border-­‐right:  40  solid  yellow;   border-­‐top:  30  solid  red;   border-­‐bottom:  50  solid  blue;"> My  borders  are  bigger  than  yours </div>
5. <div  style="width:0; border-­‐left:  60  solid  green;   border-­‐right:  40  solid  yellow;   border-­‐top:  30  solid  red;   border-­‐bottom:  50  solid  blue;"> </div> Could  do  any  triangle  with   ver2cal  or  horizontal  leg
6. Make  right  border  zero  width Make  bo8om  border  zero  width
7. <div   style="width:0; border-­‐left:  60   solid  green;   border-­‐right:  0   solid  yellow;   border-­‐top:  30   solid  red;   border-­‐bottom:  0   solid  blue;  "></ div> <div   style="width:0; border-­‐left:  60   transparent;   border-­‐right:  0   solid  yellow;   border-­‐top:  30   solid  red;   border-­‐bottom:  0   solid  blue;  "></ div> <div   style="width:0; border-­‐left:  60   solid  green;   border-­‐right:  0   solid  yellow;   border-­‐top:  30   transparent;   border-­‐bottom:  0   solid  blue;  "></ div>
19. α  (1,4) β(4,  1) γ(6,  7)
20. 10 f(x)  =  αx  +  β analy2c  geometry  101
21. 10 f(x)  =  αx  +  β analy2c  geometry  101 φ α  =  tan(φ)
22. 10 f(x)  =  αx  +  β analy2c  geometry  101 φ α  =  tan(φ) }β
23. 10 f(x)  =  αx  +  β analy2c  geometry  101 φ α  =  tan(φ) }β  μ(5,4)  v(4,3)
24. 10 f(x)  =  αx  +  β analy2c  geometry  101 φ α  =  tan(φ) }β  μ(5,4)  v(4,3) α  =  (μ.y  -­‐  ν.y)  /  (μ.x  -­‐  ν.x) β  =  μ.y  -­‐  α  *  (μ.x)
25. 11 f(x)  =  αx  +  β g(x)  =  γx  +  δ analy2c  geometry  101
26. 11 f(x)  =  αx  +  β g(x)  =  γx  +  δ analy2c  geometry  101 (x,  (f(x)|g(x))
27. 11 f(x)  =  αx  +  β g(x)  =  γx  +  δ analy2c  geometry  101 (-Long.MaxValue to Long.MaxValue).find(x => f(x) == g(x)) (x,  (f(x)|g(x))
28. 11 f(x)  =  αx  +  β g(x)  =  γx  +  δ analy2c  geometry  101 (-Long.MaxValue to Long.MaxValue).find(x => f(x) == g(x)) (x,  (f(x)|g(x)) (min(β,δ) to max(β,δ)).find(x => f(x) == g(x))
29. 11 f(x)  =  αx  +  β g(x)  =  γx  +  δ analy2c  geometry  101 (-Long.MaxValue to Long.MaxValue).find(x => f(x) == g(x)) αx  +  β  =  γx  +  δ              <=> αx  -­‐  γx  =  δ  -­‐  β                  <=> x  =  (δ  -­‐  β)/(α  -­‐  γ) (x,  (f(x)|g(x)) (min(β,δ) to max(β,δ)).find(x => f(x) == g(x))
31. α  (1,4) β(4,  1) γ(6,  7) α’  (6,4) δ  (5,4)
33. α  (1,4) β(4,  1) γ(6,  7) δ  (5,4)
34. α  (1,4) β(4,  1) δ  (5,4)
35. α  (1,4) β(4,  1) δ  (5,4)
36. α  (1,4) β(4,  1) δ  (5,4)
37. α  (1,4) β(4,  1) δ  (5,4)
38. α  (1,4) β(4,  1) δ  (5,4) ε  (4,4)
39. α  (1,4) β(4,  1) δ  (5,4) ε  (4,4)
40. α  (1,4) β(4,  1) δ  (5,4) ε  (4,4) WIN!
41. α  (1,4) β(4,  1) δ  (5,4) ε  (4,4) WIN! WIN!
42. α  (1,4) γ(6,  7) δ  (5,4)
43. α  (1,4) γ(6,  7) δ  (5,4)
44. α  (1,4) γ(6,  7) δ  (5,4)
45. α  (1,4) γ(6,  7) δ  (5,4)
46. α  (1,4) γ(6,  7) δ  (5,4)
47. α  (1,4) γ(6,  7) δ  (5,4)
48. α  (1,4) γ(6,  7) δ  (5,4)
49. α  (1,4) γ(6,  7) δ  (5,4)
50. α  (1,4) γ(6,  7) δ  (5,4)
51. α  (1,4) γ(6,  7) δ  (5,4)
52. α  (1,4) γ(6,  7) δ  (5,4)
53. α  (1,4) γ(6,  7) δ  (5,4) Stop when too small to see, e.g. when area is 1 or when line is 1 pixel
57. The challenge • Teams of 2 • Convert code to Hack gist:gousiosg/6871500 • Speed it up • Add types • Use Hack containers • Optimize triangle generation • Fastest (relative) speed up wins t-shirt! • Extra hacker’s tie-dye t-shirt if output is HTML!
58. Rules • The code must produce exactly the same number of triangles as base case • Results are reported as mean of 5 runs • Don’t remove assertions • Don’t change triangle generation cutoff • No busy loops in base case :-)