• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html>
3<head>
4  <style type="text/css">
5    #animatable {
6      position: absolute;
7      left: 0;
8      top: 0;
9      height: 100px;
10      width: 100px;
11      background-color: green;
12      -webkit-border-radius: 10px;
13      -webkit-transition: -webkit-transform 1s;
14    }
15
16    #poster {
17      font-family: 'Georgia', serif;
18      font-size: 36px;
19      font-weight: bold;
20      text-align: center;
21      margin-top: 28px;
22    }
23
24    #text {
25      position: absolute;
26      left: 20px;
27      top: 400px;
28    }
29
30    #text > p {
31      font-family: 'Verdana', serif;
32      font-size: 12px;
33      font-weight: bold;
34    }
35  </style>
36  <script type="text/javascript">
37    const initialValues = [
38      "translate3d(100px, 100px, 0px)",
39      "rotate3d(0, 1, 0, 0deg)",
40      "scale3d(1, 1, 1)",
41      "perspective(10000)",
42      "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)",
43      "skew(0deg, 0deg)"
44    ];
45
46    const targetValues = [
47      "translate3d(250px, 250px, 0px)",
48      "rotate3d(0, 1, 0, 30deg)",
49      "scale3d(2, 2, 2)",
50      "perspective(200)",
51      "matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)",
52      "skew(10deg, 10deg)"
53    ];
54
55    var i = 1;
56    var iterations = Math.pow(2, initialValues.length);
57    var oldStyle = "";
58
59    // For the buffon needle experiment below.
60    var hits = 0;
61    var trials = 0;
62    var estimate = 0;
63
64    function triggerTransition()
65    {
66      var style = "";
67      var elem = document.getElementById("animatable");
68
69      for (var j = 0; j < initialValues.length; ++j) {
70        if (j > 0)
71          style += " ";
72
73        var values = initialValues;
74        if (Math.floor(i / Math.pow(2, j)) % 2 == 1)
75          values = targetValues;
76
77        style += values[j];
78      }
79
80      elem.style.webkitTransform = style;
81      i++;
82
83      document.getElementById("from").innerHTML = "From:<br> " + oldStyle;
84      document.getElementById("to").innerHTML = "To:<br> " + style;
85      document.getElementById("estimate").innerHTML = "Buffon estimate of pi after " + trials.toString() + " needle drops:<br>" + estimate.toString();
86
87      oldStyle = style;
88
89      if (i < iterations)
90        setTimeout(triggerTransition, 1000);
91    }
92
93    function buffonStep()
94    {
95      for (var step = 0; step < 100000; ++step) {
96        var x = 2.0 * Math.random();
97        x = Math.min(x, 2.0 - x);
98
99        if (Math.cos(Math.PI * Math.random() * 0.5) > x)
100          hits++;
101
102        trials++;
103
104        if (hits > 0)
105          estimate = 2 * trials / hits;
106      }
107
108      if (i < iterations)
109        setTimeout(buffonStep, 0);
110    }
111
112    function startExperiment()
113    {
114      triggerTransition();
115      buffonStep();
116    }
117
118    window.addEventListener('load', startExperiment, false);
119  </script>
120</head>
121<body>
122<div id="animatable"><p id="poster">Hi!</p></div>
123<div id="text">
124  <p id="from">From:</p>
125  <p id="to">To:</p>
126  <p id="estimate">Estimate:</p>
127</div>
128</body>
129</html>
130
131