Git Product home page Git Product logo

composephysicslayout's Introduction

Physics Layout

This library offsers a custom Jetpack Compose layout that is backed by some physics engine. Currently it is powered by and tightly coupled with dyn4j.

Sample App

Download (๐Ÿšง)

Not yet uploaded to Maven Central

How to use (๐Ÿšง)

To get started (and to be honest, there is not much you can currently do after you got started) create a PhysicsLayout and fill it with Composables. Every root level Composable in PhysicsLayout must use the body modifier to tell the simulation how the Composable behaves in the physics world. The body modifier can be configured with following parameters:

  • id: The id the body should have in the simulation. Useful for operations that act directly on bodies (not yet supported).
  • shape: Describes the outer bounds of the body. Only RoundedCornerShapes are supported.
  • isStatic: Set true for unmovable bodies like walls and floors.
  • initialTranslation: Where this body should be placed in the layout. An Offset of (0,0) is the center of the layout, not top left.
  • initialImpulse: The impulse that should be applied to this body once it's placed into the world

PhysicsLayout takes a Simulation as a parameter. Use rememberSimulation to create a Simulation. rememberSimulation is used as the default argument for simulation.

Example usage

PhysicsLayout {
    Card(
        modifier = Modifier.body(
            shape = CircleShape,
        ),
        shape = CircleShape,
    ) {
        Icon(
            modifier = Modifier
                .size(32.dp)
                .padding(4.dp),
            imageVector = Icons.Default.Star,
            contentDescription = "Star",
            tint = Color.White
        )
    }
}

This would add a ball with a star in the center of the layout, which then starts falling to the ground.

Note: The shape must be set on both the body modifier and the Card.

Change gravity

If you need to change the gravity of the simulated world, use Simulation.setGravity

Caveats, notes, missing features

  • I don't think Compose was made to display hundrets of Composables at the same time. So maybe it's not a good idea to build a particle system out of this.
  • In general, what is true for all of Compose is especially true for this Layout: Release builds perform way better than debug builds.
  • State is not restored on config changes ๐Ÿ˜ฑ.
  • Currently there is no way to interact with the bodies.
  • Currently there is no way to observe bodies / collosions / etc.

composephysicslayout's People

Contributors

klassenkonstantin avatar

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.