Teapots!

 Teapots!

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

43df3993acc9af4e9f619e59cd849aee?s=128

Georgios Gousios

October 09, 2013
Tweet

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>
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  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))
  30. None
  31. α  (1,4) β(4,  1) γ(6,  7) α’  (6,4) δ  (5,4)

  32. None
  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
  54. 16

  55. 16

  56. 17

  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 :-)