Forem: Liu Chenyang

Newcar - A modern animation engine based on CanvasKit-WASM

Liu Chenyang — Wed, 03 Apr 2024 11:25:22 +0000

Hello! We are BugDuck OPen Source Team, which is composed by some junior/senior high school students. We use about 1.5 years to develop a animation engine. After countless ups and downs, we find out our own way - CanvasKit-WASM + Frontend framework algorithms.

GitHub: https://github.com/Bug-Duck/newcar

Tutorial

Welcome to the beginner's guide for the Newcar animation engine! Here, you will learn some of the fundamental concepts and knowledge about Newcar, including:

CarEngine
App
Scene
Widget
Animation

These concepts will be explained in detail in future documents. This guide will briefly introduce the basic usage of the Newcar animation engine, allowing you to quickly grasp the development philosophy of Newcar. Without further ado, let's get started!

Creating a Newcar Project

"To do a good job, an artisan needs the best tools."

First, you need to prepare the following:

Node.js
NPM/PNPM/YARN
A modern code editor, such as VSCode, Webstorm, etc.
A browser that supports WebAssembly compilation, here we recommend the latest versions of Firefox, Chrome, Edge

We recommend using PNPM and Vite to create our project. For the sake of demonstration, we will use a Vanilla environment, but you can also choose your preferred framework.

$ pnpm create vite my-newcar-project
$ cd my-newcar-project
$ pnpm install

Next, we need to install two things: Newcar itself and CanvasKit-WASM.

$ pnpm add newcar
$ pnpm add canvaskit-wasm

We can see that Vite has automatically included main.ts in index.html. Let's clear everything in main.ts and add a <canvas> tag in the <body> section of index.html.

<canvas width="1600" height="900" id="canvas"></canvas>

Then, add the following code in main.ts.

import * as nc from "newcar";

await new CarEngine()
  .init("../node_modules/canvaskit-wasm/bin/canvaskit.wasm")
  .then((engine) => {});

In the code above, we imported newcar and named it nc. Then we created a CarEngine object and passed in the CanvasKit-WASM file we just installed.

Creating an Animation App

import * as nc from "newcar";

await new CarEngine().init("../node_modules/canvaskit-wasm/bin/canvaskit.wasm").then((engine) => {
  const app = engine.createApp(document.querySelector("#canvas"));
});

We used CarEngine.createApp to create an animation instance and passed in the DOM object of <canvas>.

Creating a Scene and Adding Objects

import * as nc from "newcar";

await new CarEngine().init("../node_modules/canvaskit-wasm/bin/canvaskit.wasm").then((engine) => {
  const app = engine.createApp(document.querySelector("#canvas"));
  const root = new Circle(100);
  const scene = new nc.Scene(root);
  app.checkout(scene);
  app.play();
});

First, we created a root, which is a Widget subclass Circle. The constructor's first parameter of this subclass is the radius of the circle, which we set to 100.

Next, we created a Scene object and set root as the root widget of this scene. A scene can only have one root widget, but a root widget can have multiple child widgets, and those child widgets can have their own children, thus forming a tree structure for a scene.
Finally, we used the App.checkout method to switch to this scene and the App.play method to play the animation.

If everything is correct, you should see a white circle with a radius of 100 on the canvas.

Adding Animation

root.animate(nc.create, 0, 30);

This method will add an animation named create to this root widget and set the animation start at the 0th time unit.

Congratulations! You have now understood the basic usage of the Newcar animation engine. We will explain each concept in detail next. If you like our project, feel free to join us and contribute or give us a free Star on GitHub.

[Open source front-end framework]Some middle school students' framework tntjs

Liu Chenyang — Wed, 20 Jul 2022 09:08:57 +0000

We made a runtime frontend framework from scratch

Hello!

We're an open source team named BugDuck, which is mainly of middle school developers.

In April 2022, we started TNTjs with a sudden thought. At first, we promoted a runtime programming language to the outside world, implemented with pure JavaScript, but later felt unrealistic, so we changed TNTjs to a real-time dynamic fully reactive front-end framework and supports two-way data binding.

Now, we are refactoring TNTjs again. We are about to release tntjs Alpha 0.2.0 in the end of July this year.

So hop on and let me introduce you some core features of TNTjs!

In 0.2.0, you can use dynamic variables by using reactive(), just like in Vuejs. You can use <v data="variableName"> tags to render their data as well:

<v data="x"></v>

And more than that, we wrapped all core functionalities into the TNTApp top-level class. You can use it like follows:

const app = new TNT.TNTApp()
    .useData({
      x: 233333
    })
    .mount(document.getElementById("app"));

In TNTjs Alpha 0.2, we're using Virtual DOMs, and it turned out to be much faster than TNTjs Alpha 1.0. For rendering 10000 nodes it will take about 200ms. However - that is still pretty slow and we're currently working on improving the performance.

You can use <t-for> to implement a loop, and you can use <t-if> <t-elif> <t-else> to implement condition rendering.

Here's a kitchen-sink demo of TNTjs:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TNTjs Demo</title>
  <script src="./dist/tnt.min.js"></script>
  <style>
    .green {
      color: green;
    }

    .red {
      color: red;
    }
  </style>
</head>

<body>
  <div id="root">
    <div>
      <h1>Counter</h1>
      <v data="nae"></v>
      Bar: <v data="bar"></v>
      <p :class="(sum % 2 === 0 ? 'green' : 'red')">
        Sum:
        <v data="sum"></v>
      </p>
      <button onClick="data.foo.push(1)">Plus 1</button>
      <button onClick="foo.push(-1)">Minus 1</button>
      <button onClick="foo.pop()">Pop top</button>
      <button onClick="bar++">Plus bar</button>
      <button onClick="foo[foo.length - 2] += 2">Plus 2</button>
      <t-if cond="sum % 2 === 0"> It's even! </t-if>
      <t-else> It's odd! </t-else>
      <br />
      <p>
        <code>data.foo</code>
        content:
      </p>
      [
      <t-for data="currentNumber in foo">
        <span onclick="alert(`You clicked: ${currentNumber}`)">
          <t-if cond="currentNumber > 0">
            <v data="`${currentNumber}`"></v>,
          </t-if>
          <t-else>
            &larr; 0
          </t-else>
        </span>
      </t-for>
      <t-if cond="foo.length && foo[foo.length - 1] > 0">
        <span>
          <v data="`${foo[foo.length - 1]}`"></v>
        </span>
      </t-if>
      ]
      <t-get src="./test.json" type="json">
        <v data="name"></v>
      </t-get>
    </div>
  </div>
</body>
<script>
  const app = new TNT.TNTApp()
    .useData({
      nae: 114514,
      foo: [],
      bar: 5,
    })
    .useComputed({
      sum() {
        let sum = 0;
        data.foo.forEach((v) => (sum += v));
        return sum;
      },
    })
    .useEffect(() => {
      console.log(`Sum changed: ${data.sum}`);
    })
    .onMounted((app) => {
      console.log("App mounted!");
    })
    .mount(document.getElementById("root"));
  data.foo = [233];
</script>

</html>

Finally, if you like our framework, please leave us a star on GitHub !

If you have some good ideas about improving TNTjs, please file us an issue or email us at bugduck@163.com.

And at last, any contributions are highly welcomed. If you want to become a contributor, you can fork the repo and submit us a pull request. We will be happy to review it!

Thank you!