1cb93a386Sopenharmony_ci<!DOCTYPE html>
2cb93a386Sopenharmony_ci<html>
3cb93a386Sopenharmony_ci<head>
4cb93a386Sopenharmony_ci  <meta charset="utf-8" />
5cb93a386Sopenharmony_ci  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6cb93a386Sopenharmony_ci  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7cb93a386Sopenharmony_ci  <title>CanvasKit Demo</title>
8cb93a386Sopenharmony_ci
9cb93a386Sopenharmony_ci  <script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
10cb93a386Sopenharmony_ci
11cb93a386Sopenharmony_ci  <script type="text/javascript" charset="utf-8">
12cb93a386Sopenharmony_ci    const bootTime = performance.now();
13cb93a386Sopenharmony_ci    const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
14cb93a386Sopenharmony_ci    // loadKit resolves with CanvasKit.
15cb93a386Sopenharmony_ci    const loadKit = CanvasKitInit({
16cb93a386Sopenharmony_ci      locateFile: (file) => 'https://particles.skia.org/dist/'+file,
17cb93a386Sopenharmony_ci    });
18cb93a386Sopenharmony_ci
19cb93a386Sopenharmony_ci    loadKit.then(() => {
20cb93a386Sopenharmony_ci      const n = performance.now();
21cb93a386Sopenharmony_ci      console.log(`loaded Kit in ${(n - bootTime).toFixed(2)} ms`)
22cb93a386Sopenharmony_ci    });
23cb93a386Sopenharmony_ci
24cb93a386Sopenharmony_ci    const loadLegoJSON = fetch(cdn + 'lego_loader.json').then((resp) => {
25cb93a386Sopenharmony_ci      return resp.text();
26cb93a386Sopenharmony_ci    });
27cb93a386Sopenharmony_ci    const loadPartyJSON = fetch(cdn + 'confetti.json').then((resp) => {
28cb93a386Sopenharmony_ci      return resp.text();
29cb93a386Sopenharmony_ci    });
30cb93a386Sopenharmony_ci    const loadDrinksJSON = fetch(cdn + 'drinks.json').then((resp) => {
31cb93a386Sopenharmony_ci      return resp.text();
32cb93a386Sopenharmony_ci    });
33cb93a386Sopenharmony_ci    const loadOnboardingJSON = fetch(cdn + 'onboarding.json').then((resp) => {
34cb93a386Sopenharmony_ci      return resp.text();
35cb93a386Sopenharmony_ci    });
36cb93a386Sopenharmony_ci
37cb93a386Sopenharmony_ci
38cb93a386Sopenharmony_ci
39cb93a386Sopenharmony_ci    function SkottieDemo(values, canvasID, width=400, height=400) {
40cb93a386Sopenharmony_ci      const [CanvasKit, legoJSON] = values;
41cb93a386Sopenharmony_ci      const animation = CanvasKit.MakeManagedAnimation(legoJSON);
42cb93a386Sopenharmony_ci      const duration = animation.duration() * 1000;
43cb93a386Sopenharmony_ci      const size = animation.size();
44cb93a386Sopenharmony_ci
45cb93a386Sopenharmony_ci      const bounds = {fLeft: 0, fTop: 0, fRight: width, fBottom: height};
46cb93a386Sopenharmony_ci
47cb93a386Sopenharmony_ci      const surface = CanvasKit.MakeCanvasSurface(canvasID);
48cb93a386Sopenharmony_ci      if (!surface) {
49cb93a386Sopenharmony_ci        console.error('Could not make surface');
50cb93a386Sopenharmony_ci        return;
51cb93a386Sopenharmony_ci      }
52cb93a386Sopenharmony_ci
53cb93a386Sopenharmony_ci      const firstFrame = Date.now();
54cb93a386Sopenharmony_ci      const clearColor = CanvasKit.WHITE;
55cb93a386Sopenharmony_ci
56cb93a386Sopenharmony_ci      function drawFrame(canvas) {
57cb93a386Sopenharmony_ci        const seek = ((Date.now() - firstFrame) / duration) % 1.0;
58cb93a386Sopenharmony_ci        const damage = animation.seek(seek);
59cb93a386Sopenharmony_ci
60cb93a386Sopenharmony_ci        if (damage.fRight > damage.fLeft && damage.fBottom > damage.fTop) {
61cb93a386Sopenharmony_ci          canvas.clear(clearColor);
62cb93a386Sopenharmony_ci          animation.render(canvas, bounds);
63cb93a386Sopenharmony_ci        }
64cb93a386Sopenharmony_ci        surface.requestAnimationFrame(drawFrame);
65cb93a386Sopenharmony_ci      }
66cb93a386Sopenharmony_ci      surface.requestAnimationFrame(drawFrame);
67cb93a386Sopenharmony_ci    }
68cb93a386Sopenharmony_ci
69cb93a386Sopenharmony_ci    const legosAnimating = Promise.all([loadKit, loadLegoJSON]).then((values) => {
70cb93a386Sopenharmony_ci      SkottieDemo(values, 'legos', 800, 800);
71cb93a386Sopenharmony_ci    });
72cb93a386Sopenharmony_ci    const partyAnimating = Promise.all([loadKit, loadPartyJSON]).then((values) => {
73cb93a386Sopenharmony_ci      SkottieDemo(values, 'party', 800, 800);
74cb93a386Sopenharmony_ci    });
75cb93a386Sopenharmony_ci    const drinksAnimating = Promise.all([loadKit, loadDrinksJSON]).then((values) => {
76cb93a386Sopenharmony_ci      SkottieDemo(values, 'drinks', 800, 800);
77cb93a386Sopenharmony_ci    });
78cb93a386Sopenharmony_ci    const onboardingAnimating = Promise.all([loadKit, loadOnboardingJSON]).then((values) => {
79cb93a386Sopenharmony_ci      SkottieDemo(values, 'onboarding', 800, 800);
80cb93a386Sopenharmony_ci    });
81cb93a386Sopenharmony_ci
82cb93a386Sopenharmony_ci    Promise.all([legosAnimating, partyAnimating, drinksAnimating, onboardingAnimating]).then(() => {
83cb93a386Sopenharmony_ci      const frames = new Float64Array(100);
84cb93a386Sopenharmony_ci      let idx = 0;
85cb93a386Sopenharmony_ci      let now = performance.now();
86cb93a386Sopenharmony_ci      function benchFrame() {
87cb93a386Sopenharmony_ci        frames[idx] = performance.now() - now;
88cb93a386Sopenharmony_ci        idx++;
89cb93a386Sopenharmony_ci        if (idx < frames.length) {
90cb93a386Sopenharmony_ci          now = performance.now();
91cb93a386Sopenharmony_ci          window.requestAnimationFrame(benchFrame);
92cb93a386Sopenharmony_ci        } else {
93cb93a386Sopenharmony_ci          let out = '';
94cb93a386Sopenharmony_ci          for (const frameTime of frames) {
95cb93a386Sopenharmony_ci            out += frameTime.toFixed(2);
96cb93a386Sopenharmony_ci            out += '\n';
97cb93a386Sopenharmony_ci          }
98cb93a386Sopenharmony_ci          console.log(out);
99cb93a386Sopenharmony_ci        }
100cb93a386Sopenharmony_ci      }
101cb93a386Sopenharmony_ci      window.requestAnimationFrame(benchFrame);
102cb93a386Sopenharmony_ci    })
103cb93a386Sopenharmony_ci  </script>
104cb93a386Sopenharmony_ci
105cb93a386Sopenharmony_ci  <style>
106cb93a386Sopenharmony_ci    canvas {
107cb93a386Sopenharmony_ci      border: 1px dashed #AAA;
108cb93a386Sopenharmony_ci      width: 400px;
109cb93a386Sopenharmony_ci      height: 400px;
110cb93a386Sopenharmony_ci    }
111cb93a386Sopenharmony_ci  </style>
112cb93a386Sopenharmony_ci
113cb93a386Sopenharmony_ci</head>
114cb93a386Sopenharmony_ci<body>
115cb93a386Sopenharmony_ci  <h1> CanvasKit</h1>
116cb93a386Sopenharmony_ci
117cb93a386Sopenharmony_ci  <canvas id=legos width=800 height=800></canvas>
118cb93a386Sopenharmony_ci  <canvas id=party width=800 height=800></canvas>
119cb93a386Sopenharmony_ci  <canvas id=drinks width=800 height=800></canvas>
120cb93a386Sopenharmony_ci  <canvas id=onboarding width=800 height=800></canvas>
121cb93a386Sopenharmony_ci
122cb93a386Sopenharmony_ci</body>
123cb93a386Sopenharmony_ci</html>