/docs/examples/sierpinski.html

https://github.com/thysultan/dio.js · HTML · 105 lines · 91 code · 14 blank · 0 comment · 0 complexity · c3af438ac724ed07e6211439beb309a8 MD5 · raw file 

    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3.   <head>
    4. 

  4.     <meta charset=utf-8>
    5. 

  5.     <meta http-equiv=X-UA-Compatible content=IE=edge>
    6. 

  6.     <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    7. 

  7.     <title>Sierpinski Triangle</title>
    8. 

  8.     <script src=https://unpkg.com/dyo></script>
    9. 

  9.   </head>
    10. 

  10.   <body>
    11. 

  11.     <main></main>
    12. 

  12.     <style>
    13. 

  13.       html {width: 100%; height: 100%; overflow: hidden}
    14. 

  14.     </style>
    15. 

  15.     <script>
    16. 

  16.       const {h, memo, render, Fragment, useState, useEffect} = dyo
    17. 

  17.       const start = performance.now()
    18. 

  18.       const target = document.querySelector('main')
    19. 

  19. 

  20.       const dotStyle = {
    21. 

  21.         position: 'absolute',
    22. 

  22.         background: '#61dafb',
    23. 

  23.         font: 'normal 15px sans-serif',
    24. 

  24.         textAlign: 'center',
    25. 

  25.         cursor: 'pointer',
    26. 

  26.       }
    27. 

  27. 

  28.       const containerStyle = {
    29. 

  29.         position: 'absolute',
    30. 

  30.         transformOrigin: '0 0',
    31. 

  31.         left: '50%',
    32. 

  32.         top: '50%',
    33. 

  33.         width: '10px',
    34. 

  34.         height: '10px',
    35. 

  35.         background: '#eee',
    36. 

  36.       }
    37. 

  37. 

  38.       const targetSize = 25
    39. 

  39. 

  40.       const Dot = ({x, y, size, text}) => {
    41. 

  41.         const [{hover}, setState] = useState({hover: false})
    42. 

  42.         const s = size * 1.3
    43. 

  43. 

  44.         return (
    45. 

  45.           h('div', {
    46. 

  46.             style: {
    47. 

  47.               ...dotStyle,
    48. 

  48.               width: s + 'px',
    49. 

  49.               height: s + 'px',
    50. 

  50.               left: x + 'px',
    51. 

  51.               top: y + 'px',
    52. 

  52.               borderRadius: (s / 2) + 'px',
    53. 

  53.               lineHeight: s + 'px',
    54. 

  54.               background: hover ? '#ff0' : dotStyle.background
    55. 

  55.             },
    56. 

  56.             onMouseEnter: () => setState({hover: true}),
    57. 

  57.             onMouseLeave: () => setState({hover: false})
    58. 

  58.           },
    59. 

  59.             hover ? '*' + text + '*' : text
    60. 

  60.           )
    61. 

  61.         )
    62. 

  62.       }
    63. 

  63. 

  64.       const Triangle = ({x, y, s, children}) => {
    65. 

  65.         if (s <= targetSize) {
    66. 

  66.           return h(Dot, {x: x - (targetSize / 2), y: y - (targetSize / 2), size: targetSize, text: children})
    67. 

  67.         }
    68. 

  68. 

  69.         s /= 2
    70. 

  70. 

  71.         return h(Fragment, {},
    72. 

  72.           h(Triangle, {x: x, y: y - (s / 2), s: s}, children),
    73. 

  73.           h(Triangle, {x: x - s, y: y + (s / 2), s: s}, children),
    74. 

  74.           h(Triangle, {x: x + s, y: y + (s / 2), s: s}, children)
    75. 

  75.         )
    76. 

  76.       }
    77. 

  77. 

  78.       const Main = ({elapsed}) => {
    79. 

  79.         const [{seconds}, setState] = useState({seconds: 0})
    80. 

  80. 

  81.         useEffect(() => {
    82. 

  82.           const interval = setInterval(() => {
    83. 

  83.             setState(state => ({seconds: (state.seconds % 10) + 1}))
    84. 

  84.           }, 1000)
    85. 

  85. 

  86.           return () => {
    87. 

  87.             clearInterval(interval)
    88. 

  88.           }
    89. 

  89.         }, [])
    90. 

  90. 

  91.         const t = (elapsed / 200) % 10
    92. 

  92.         const scale = 1 + (t > 5 ? 10 - t : t) / 10
    93. 

  93. 

  94.         return h('div', {style: {...containerStyle, transform: 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)'}},
    95. 

  95.           h('div', {}, h(Triangle, {x: 0, y: 0, s: 1000}, seconds))
    96. 

  96.         )
    97. 

  97.       }
    98. 

  98. 

  99.       requestAnimationFrame(function update (now) {
    100. 

  100.         render(h(Main, {elapsed: now - start}), document)
    101. 

  101.         requestAnimationFrame(update)
    102. 

  102.       })
    103. 

  103.     </script>
    104. 

  104.   </body>
    105. 

  105. </html>
    106.