Git Product home page Git Product logo

matter-vertices-editor's Introduction

Matter vertices editor

Simple visual tool for creating matter-js bodies from image

editor-example

About the tool

Vertices editor allows for creating matter bodies from different shapes, and it also provides code for rendering concave shapes. Most engines have limitations when working with concave shapes, and Matter is no exception. Vertices set should be decomposed into convexes, and default render method won't work as expected, if you intend to use concave shape with texture. There are some valid workarounds, such as:

  1. Rewriting render method of Matter.js
  2. Creating a composite from concave shape and texture-holding shape.
  3. Using svg texture, which allows to create shape via Matter.Svg module

The third approach won't fit if you intend to create something pixel-artish, for example, and first one implies replacing some source code of Matter. I chose second approach for the editor, which seemed more flexible than others.

Usage

  1. Load image on starting screen.
  2. Create an outline for image with line or auto-line tool.
  3. Hit the export code button. There you will find an export code for creating matter body, based on your shape.
  4. If your shape is concave, you may want to add additional settings on simulation page. Then you can return to step 3.

Limitations

The auto-line tool works not as good as it could, and works especially bad when working with complex concave shapes and small resolutions. If you're not satisfied with result, you'd better try placing points manually.

matter-vertices-editor's People

Contributors

samgeven avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

charlesvg

matter-vertices-editor's Issues

Improve shape tracing mechanics

There are currently some issues with shape tracing mechanics - it works really bad with small resolutions and vertices sorting algorythm of Matter.js works not as expected sometimes (mostly when working with concave shapes).

removeCloseAndCollinear function should leave only critical edge-defining vertices, and should have better trace shaping support for small resolution images. Vertices.clockwiseSort method possibly should be replaced with custom sorting function.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.