https://github.com/oguzhanumutlu/physics-engine

Physics engine that I made with the things we learned in school
https://github.com/oguzhanumutlu/physics-engine

canvas engine javascript js newton physics physics-engine render web

Last synced: 9 days ago
JSON representation

Physics engine that I made with the things we learned in school

• Host: GitHub
• URL: https://github.com/oguzhanumutlu/physics-engine
• Owner: OguzhanUmutlu
• License: mit
• Created: 2022-10-10T20:44:05.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-27T16:13:54.000Z (almost 2 years ago)
• Last Synced: 2024-10-02T17:35:47.107Z (about 1 month ago)
• Topics: canvas, engine, javascript, js, newton, physics, physics-engine, render, web
• Language: JavaScript
• Homepage:
• Size: 119 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# physics-engine

Physics engine that I made with the stuff we learned in school

Used lots of trig functions and "Newton"s equations

[Click to view old preview](https://oguzhanumutlu.github.io/physics-engine/legacy)

[Click to view new preview](https://oguzhanumutlu.github.io/physics-engine)

# Preview

![](./screenshots/ss.png)

# Importing

Just add this to your HTML to import it!

```html

```

# Example

## Add a canvas to your body, so you can use it for rendering

```html

    

```

## Initializing physics engine

```html

    window.Phygic.then(Phygic => {

        // your code goes here!

        console.log("Phygic has been loaded! ", Phygic);

    });

```

### Or just use await it!

```html

    await window.Phygic;

    // your code goes here!

    console.log("Phygic has been loaded! ", Phygic);

```

## Getting canvas

```js

const canvas = document.querySelector("canvas");

```

## Creating a physics world

Note: If you don't want the renderer you don't have to enter the canvas element

```js

const world = new Phygic.World(canvas);

```

## Rendering

✨ Just run this function and done! ✨

```js

world.createAnimators();

```

## Adding camera movement, tile dragging etc.

✨ Again, just one line! ✨

```js

world.addHelpers();

```

## Adding a box

✨ Still one line! ✨

```js

new Phygic.Tile(50, 0, world);

```

## Adding a static tile so our box doesn't fall to the nothingness

✨ You get the idea everything is one line. ✨

```js

new Phygic.Tile(50, 500, {world, isStatic: true});

```

## Final product:

[Preview](https://oguzhanumutlu.github.io/physics-engine/example.html)

```html

    

    window.Phygic.then(Phygic => {

        const canvas = document.querySelector("canvas");

        const world = new Phygic.World(canvas);

        world.createAnimators();

        world.addHelpers();

        new Phygic.Tile(50, 0, world);

        

        new Phygic.Tile(50, 500, {world, isStatic: true});

    });

```