PhSim is a JavaScript library that I am creating. I wanted to remake some of the games I created on Sploder.com using Matter.js. However, I created some code that I decided to use to create a new JavaScript library that runs on top of Matter.js because there are features that were not included in Matter.js that I wanted. The library was inspired partially by things such as Scratch and Sploder’s Physics creator. As mentioned before, it is built on top of the JavaScipt library Matter.js and it allows one to create a 2-dimensional simulation with ease. The simulation could be created out of a JSON object, which in turn can be edited with another creation of mine: the PhSim editor.

Take the following JSON:

{
  "version": 1,
  "audio": [],
  "simulations": [
    {
      "layers": [
        {
          "objUniverse": [
            {
              "rectangle": true,
              "x": 171,
              "y": 135,
              "w": 260,
              "h": 185,
              "cycle": -0.5485494024505281,
              "strokeStyle": "black",
              "lineWidth": 19,
              "fillStyle": "gray"
            },
            {
              "circle": true,
              "x": 622,
              "y": 121,
              "radius": 42.5205832509386,
              "cycle": 0.851966327173272,
              "name": "untitled_(1)",
              "strokeStyle": "#000000",
              "lineWidth": "4",
              "fillStyle": "#333333"
            },
            {
              "circle": true,
              "x": 567,
              "y": 283,
              "radius": 46.51881339845203,
              "cycle": -0.4444192099010989,
              "name": "untitled_(1)",
              "strokeStyle": "#780000",
              "lineWidth": "4",
              "fillStyle": "#a73333"
            },
            {
              "rectangle": true,
              "x": 392,
              "y": 401,
              "w": 147,
              "h": 109,
              "cycle": 0,
              "strokeStyle": "black",
              "lineWidth": 3,
              "fillStyle": "#623333"
            },
            {
              "circle": true,
              "x": 491,
              "y": 86,
              "radius": 45.5411901469428,
              "cycle": 0.33563855032760925,
              "name": "untitled_(1)",
              "strokeStyle": "#780000",
              "lineWidth": 5,
              "fillStyle": "#623333"
            },
            {
              "verts": [
                {
                  "x": 124,
                  "y": 53
                },
                {
                  "x": 195,
                  "y": 54
                },
                {
                  "x": 199,
                  "y": 118
                },
                {
                  "x": 90,
                  "y": 165
                },
                {
                  "x": 40,
                  "y": 129
                }
              ],
              "path": true,
              "strokeStyle": "#000000",
              "lineWidth": "5",
              "fillStyle": "#62ff33"
            },
            {
              "verts": [
                {
                  "x": 754,
                  "y": 259
                },
                {
                  "x": 640,
                  "y": 268
                },
                {
                  "x": 703,
                  "y": 307
                },
                {
                  "x": 643,
                  "y": 374
                },
                {
                  "x": 639,
                  "y": 430
                },
                {
                  "x": 687,
                  "y": 447
                },
                {
                  "x": 716,
                  "y": 417
                },
                {
                  "x": 733,
                  "y": 366
                }
              ],
              "path": true,
              "strokeStyle": "#000000",
              "lineWidth": "5",
              "fillStyle": "#ff0048"
            },
            {
              "verts": [
                {
                  "x": 118,
                  "y": 290
                },
                {
                  "x": 60,
                  "y": 482
                },
                {
                  "x": 331,
                  "y": 427
                },
                {
                  "x": 129,
                  "y": 417,
                  "last": true
                }
              ],
              "path": true,
              "strokeStyle": "#000000",
              "lineWidth": "5",
              "fillStyle": "#0000ff"
            }
          ],
          "name": "Untitled Layer"
        }
      ],
      "world": {
        "grav": 1,
        "bg": "white",
        "border": 0,
        "unit": 1
      },
      "superlayer": true,
      "widgets": [],
      "name": "Untitled Superlayer"
    }
  ],
  "box": {
    "width": 800,
    "height": 600
  },
  "camera": {
    "x": 0,
    "y": 0,
    "c": 1
  }
}

This code produces the following world of objects:

Features

First, there are four basic shapes: irregular polygons, circles, rectangles, and regular polygons. Moreover, these form the main objects of a PhSim simulation. In addition, these shapes can have solid color backgrounds, sprites, or even a gradient.

Each body can have one or more widgets, which extend the functionality of an object. Some of these widgets are things that allow someone to make an object

Superlayers contain layers and have several properties that define a world. One of these properties is diagonal, constant gravity. However, there are also graphical features, such as background color. Superlayers can also act as levels for a game.

Furthermore, Superlayers can have a Newtonian gravity simulator enabled, which makes the objects attract each other. In addition to this, one can have no gravity at all.

In addition to simulating Newtonian gravity, one can turn a superlayer into a level. Therefore, one can make a game out of a PhSim simulation.

PhSim editor

The PhSim editor will be a GUI that allows one to create PhSim worlds with little or no programming knowledge.

I created the following screenshot on September 9, 2020 (it is not finished and that is why it looks weird in many ways):

The Object Editor allows users to edit objects, as the name suggests. This allows one to add widgets to an object and modify it in many other ways. The Object Editor can add velocities, forces, rotations, text, and many other things to an object. Here are some screenshots of the Object Editor:

More information

I will soon release more information about PhSim.