Back to all discussions

  •   over 9 years ago

emulating an infinite scroller with physics

cool engine, great work!
We were looking for something like it in order to construct UI for mobile web apps (not games) based on physics. Specifically, first experiment is a scroller for a list of tiles. Tiles could be organized in a simple way, sequentially in one column, or in a masonry formation (like a masonry.js or packery.js) by Desandro. It would be cool if tiles exhibited interactions with other tiles, like a string (to not let them get away too far from each other) and repelling (to avoid bumping into each other) and also would be cool to wiggle each tile (or some other movement) correlated to a force of the user's flick.

What would be your suggestion on how to emulate this in physics. Currently modeled it as a ferris wheel and are experiencing some issues (will post them on your github repo).

  • 9 comments

  • Manager   •   over 9 years ago

    For this I would use the DOM renderer and create square "convex-polygon" bodies for each tile. Then you'd need to create a behavior that would apply accelerations to bodies that were too close or far from each other (see the newton behavior).

    To wiggle a tile, bind your mouse events to the htmlElements and when the user is dragging, set the body to be "fixed" and update the body positions to match the mouse cursor.

  •   •   over 9 years ago

    @wellcaffeinated, thank you for your reply. Right, we are definitely using the DOM renderer. This is what a ferris wheel does already, see it in repo forked form yours: https://github.com/urbien/PhysicsJS/blob/master/examples/sims/ferris-wheel.js
    But it is not good yet for a scroller, besides it gets into an infinite loop often when you drag an object in an unlucky way.

  •   •   over 9 years ago

    any suggestion what behavior would help simulate http://masonry.desandro.com/? May be I am wrong, but does not look like a modified newtonian behavior by itself can help with that.

  • Manager   •   over 9 years ago

    It's up to you what behavior you want to simulate. If you want to apply gradual forces (like magnets) when objects are too close or too far, then something like a modified newtonian behavior is appropriate.

    If you want to have things attached by strings then a verlet constraint is better.

    I think I need more specific information about what you're trying to do before I understand and am able to advise.

  •   •   over 9 years ago

    @wellcaffeinated, thank you and I appreciate your offer of help. We created a masonry prototype, see it in a forked repo from yours http://github.com/urbini/PhysicsJS
    Click masonry.html in examples.
    To emulate magnetic force we added a new behavior that is not centroid, it uses a closest point instead. And we wanted it to work at a short distance so it is cubic. So bricks/tiles in masonry are attracted with gravity and repulsed/repelled at short distances with this new magnetic force behavior.

    But the main thing is we added a constraint from each brick to one point far far away so that all constraints form an approximation of the parallel lines. Then we connected the mouse to this far away point, and it drives the whole set of bricks.

    It is working but is not yet as fast as we need it to be on mobiles, so may be you can suggest an improvement or a different, way to achieve the same.

  • Manager   •   over 9 years ago

    I don't think I quite understand what you're doing with the constraints. could you explain in more detail?

  •   •   over 9 years ago

    here is the first demo. See the comment on github issue for demo links and a description of how it works: https://github.com/urbien/urbini/issues/3

  •   •   over 9 years ago

    We have redesigned our code moving PhysicsJS to a webworker. We also realized that we needed to move two more components to webworker, components that interact with the PhysicsJS and use CPU to do extra calculations. Those two components are Layout Manager (based on masonry.js) and a Sliding Window manager for infinite scroll, which allows DOM Renderer to only keep a small subset of objects in DOM, making DOM renderer a lot more reliable (browser does not die when amount of world bodies grows) and it now works even on mobiles with low (256MB) RAM. We developed a postMessage protocol to communicate between DOM renderer and the rest of the components running in webworker.

    After all these architectural improvements we started to milk the cow. By now we have used PhysicsJS for:
    - adding effects to scrolling, like a header that hides when you scroll down and appears back when you scroll up.
    - another scrolling effect we added is a scrollbar itself that fades in and out based on scrolling velocity
    - we have added a bounce at the end of scroll that uses constraints and we allow developer to click menu item Physics and change air drag, spring damping and spring stiffness to achieve the desired bounce behavior
    - we added menu transitions
    - and transition between pages
    - added fading-in the tiles on a masonry page (each tile corresponds to a body in the world)
    - we fly in bodies on a resource list page (each body arrives with a slight delay to the previous one)

    We are now working on adding some more effects:
    - individual inertia for items in a list when scroller stops, like in iOS7 messaging app
    - 3D effect that ties scroll velocity to a tilt so that the scrolled content transforms into a road that goes into infinity, more so if user swiped faster, much like a picture wall demo by css-vfx: http://css-vfx.googlecode.com/svn/trunk/snowstack/snowstack.html
    - 3D effect for a list that zooms into the item on which user clicked/tapped, as a first step to an effect by famo.us: http://techcrunch.com/video/famo-us-demos-new-open-source-development-platform/518036249/

  •   •   over 9 years ago

    we just added zooming in effect but not using a scaling, we instead used movement over the z-axis and with the perspective the object appears to visually zoom in. This will allow us to emulate a bit later the light room effect shown by famo.us. It works on any masonry page, like App Gallery or Ideas Gallery on http://urbien.com/app/UrbienApp

Comments are closed.