Code Monkey home page Code Monkey logo

p5-matter-examples's Introduction

x gif

p5.js × matter.js

Examples and documentation on how to combine p5.js and matter.js

About

The examples have been derived from the course Programmiertes Entwerfen (Sketching with Code) @ the HfG Schwäbisch Gmünd by Benedikt Groß, Benno Stäbler and Stephan Bogner.

Some of the examples are based on the matter.js demos by liabru and p5-matter by Daniel Shiffman.

👀 It is also highly recommended to watch the Introduction to Matter.js videos by Coding Train to complement the examples here.

p5-matter-examples's People

Contributors

b-g avatar ron-mandic avatar stephanbogner avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

p5-matter-examples's Issues

Improve docs: document all methods of each class

like https://github.com/liabru/matter-js/blob/master/src/body/Body.js#L109

    /**
     * Returns the next unique group index for which bodies will collide.
     * If `isNonColliding` is `true`, returns the next unique group index for which bodies will _not_ collide.
     * See `body.collisionFilter` for more information.
     * @method nextGroup
     * @param {bool} [isNonColliding=false]
     * @return {Number} Unique group index
     */
    /**
     * Creates a new rigid body model with a circle hull. 
     * The options parameter is an object that specifies any properties you wish to override the defaults.
     * See the properties section of the `Matter.Body` module for detailed information on what you can pass via the `options` object.
     * @method circle
     * @param {number} x
     * @param {number} y
     * @param {number} radius
     * @param {object} [options]
     * @param {number} [maxSides]
     * @return {body} A new circle body
     */

Matter wrap

What exactly does the matter - wrap library do?

Multiple bugs with PolygonFromSVG

I think I found some issues with the class:
(See examples here)

  • Image doesn't align with geometry even though geometry svg and image have the same size (see 1-image-on-path)
    • If I understand the class code correctly it should be possible to manually override this using offset, but it doesn't seem to do anything (should it?). But even if it works I think both images should align out of the box
  • Scale is not affecting image put on top of polygon (see 1-image-on-path)
  • When scale is not set, the body is not shown (or maybe scaled to 0). More logical would be a scaleFactor of 1 when it's omitted from the attributes (see 2-path-not-working-without-scale) (especially since the console also doesn't throw an error)
  • Stroke doesn't work when not used in combination with fill/color (see 3-not-drawing-stroke)
    • Also: Not a bug (and not limited to this class), but it would be better to call it strokeWeight instead of weight, and fill instead of color, to stay consistent with p5's terminology

Maybe @b-g or @ByronStar

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.