Kinetix.js

November 3, 2024 · View on GitHub

Kinetix.js is a TypeScript reimplementation of the Kinetix project, and it includes a simple way to render Kinetix scenes, full code for the environment editor, and a reimplementation of the Jax2D physics engine. Kinetix.js uses p5.js to deal with all of the drawing.

See here for an explanation of the entire project, and go here for the gallery or here if you just want to start creating levels.

📋 Explanation

  • src/js2d contains the reimplementation of Jax2D, which itself is based on Box2D-lite. The code here is primarily for the physics engine itself.
  • src/kinetixjs contains the primary bulk of the code, including the environment editor (src/kinetixjs/env_editor.ts) and RL environment implementation (src/kinetixjs/env.ts).
  • src/pages contains the primary website page code, in the form of p5.js sketches.
  • src/web contains database and authentication code
  • src/index.ts is the primary entry point for Kinetix.js

🏗️ Installation / Development

git clone https://github.com/Michael-Beukman/Kinetix.js/
cd Kinetix.js
npm install

After installation, please go to src/web/database.ts and fill in the firebase config for your own project.

    const firebaseConfig = {
        // TODO: 
    };

During development, you can start a dev server by running:

npm run start

and navigating to http://localhost:8080/ for the blog post, http://localhost:8080/gallery.html for the gallery and http://localhost:8080/gallery.html?editor=true for the editor.

Tip

If you want to minimally start with just the editor, you can return null at the top of initialiseFirebaseApp in src/web/database.ts, and navigate to http://localhost:8080/gallery.html?editor=true&embed=true

Once you have made all the edits you want, npm run build will create a deployable app in dist/.

🧩 Components

🚒 Physics Engine

The first part of Kinetix.js is the reimplementation of Jax2D, so it is a simple 2D physics engine.

✏️ Interactive Editor

Secondly, we have an interactive editor where you can create and play your own levels, or watch an agent play them.

Finally, we have a gallery where you can share your own levels, and play or edit those from other people.

🗞️ Blog Post

dist/index.html contains source code for the project page/blog post, which is based on the Distill Template and the ACCEL Blog.

🕵️ See Also