urbien / urbini Goto Github PK
View Code? Open in Web Editor NEWUrbini ideas are now part of Tradle https://github.com/tradle, see also
Home Page: http://tradle.io
Urbini ideas are now part of Tradle https://github.com/tradle, see also
Home Page: http://tradle.io
We implemented the world in the web worker. The main thread (renderer) is stepped by a requestAnimationFrame (raf). How should the world be stepped?
This issue may depend on the design of #4 for variable timeframe physics.
This issue has been well understood in Games. Stefan (creator of cannon.js and p2.js) brought my attention to bullet physics engine, which addresses this issue. Here is their doc, and a discussion on this topic that illuminates the problems one developer was having and introduces the term temporal aliasing.
Steven Witten addresses this problem in his amazing webgl-ed slides on the topic of employing math to more close matching physical world in our animations, by creating what human brains are expecting to see, not just clean bezier curves, and along the way compensate for bumps on the road (caused by GC, background apps, user actions). All of this is to achieve a buttery-smooth life-like animation, or an illusion thereof. Fascinating presentation! If I understood Steven correctly, he does not just do temporal aliasing, he is also adjusting the animation path, to create an illusion for the user that the body was moving along the projected path in a gradual manner.
Right we do not add a body corresponding to navbar to the world (physics engine's view of the UI). That means we also can not do cool things with it, move it, bump it, morph it, hide it, unhide it with the natural physic-y animations. But when we add navbar to the world, we will need to rethink how scroll bounces off of it.
This issue has been discussed over email and I will try to summarize the ideas my Ellen, Mark and me below. All the work so far was done with physics.js. Great thanks to its creator Jasper for lending his expertise and suggesting ways to use his physics.js for momentum scrolling with bounce.
Scroller needs to freely move the contents of the page until the tail of the content reaches the edge of the scroll areas (not edge of the screen, as we need fixed top and bottom headers). When the tail of the scrolled content passes the edge it needs to bounce back to the edge and move a bit past it (and repeat the bounce with the smaller amplitude). We need a physical world model for such behavior. A constraint does not work here as it will prevent the movement in both directions. We need this to work for both vertical scrolls and for the horizontal scrolls, like the photo strip inside the page, like in IMDB app they let user scroll movie shots horizontally while still standing on a movie page.
Once implemented we will use it also for a mobile drawer (left/right side menu) transition, and probably for many more cases. So below are some imperfect ideas, may be you can shut them down and suggest something better.
So, when user flicks in the opposite direction, we will break the constraint (by removing it) at the same distance (threshold) at which we added it. But we should let dev set the second distance manually.
We would also need to check not just the distance, but also a direction. As users can flick in both directions but break it only in one.
we r thinking to add things like:
c.breakOnDistance(distance1, direction /* optional /, distance2 / optional / )
for to make it flexible, also:
c.breakon(function breakTest1(body) {}) / allows dev to add his own condition checks for pos, speed, acceleration, and later for color, scale, etc. etc. */
eg:
var range = Physics.aabb( x1, y1, x2, y2 );
c.breakOutside( range );
// breakOutside implements...
if ( ! this.range.contains( this.body.state.pos ) ){
// break the constraint
Today we only minify js files, using Google Closure compiler. We need to do that for css as well. Server-side code today uses yuicompressor for css in runtime. We need to move this to a build and use cssmin or csso. Creator of Csso claims it to be far more advanced.
Page transitions need a slightly different model from the scroller #3 transitions.
Many of today's mobiles have more than one processor, and this allows to efficiently do computations without disrupting the rendering. This should reduce the amount of yellow spikes showing in the devtools timeline.
Nice and smooth in Safari and Chrome
Firefox is on the right in the screenshot
http://tradle.io/app/Tradle/list/commerce/trading/Tradle?owner=_me&-ref=32341
currently sliding window for infinite scrolling is implemented on a side of the layout manager. It is like a snake (or a worm) that is growing towards its tail while its head is being continuously trimmed as tail grows. The tail could grow a bit faster, so snake is elongated, but eventually the trimmer cuts the head. At the end of the content, the tail is cut short, so snake is at its shortest. The same procedure repeats in reverse when scrolling back. This algorithm is complex and it feels like some physical paradigm could reflect it better than a handcoded algo. Ideas?
2D Games have been using parallax effect to create a depth of field feeling. Web sites recently started to use this technique. Some mobile apps do that too. See for example Pandora using content as a layer that is closer revealing menu in a background that is moving as well (note menu text changing its distance to the edge):
There seems to be a simple way to create parallax with css (and it works fast as actual transformations are performed by the GPU):
translateZ: -30px
-webkit-perspective: 500; -webkit-perspective-origin: 0 0;
container.style.webkitPerspectiveOrigin = scrollXdelta + "px " + scrollYdelta + "px";
So, how does one utilize physics engine to help with this, or do we need to do it outside of it?
For that we need to change option to advanced_optimization and compile js files together, not separately, like we do today. This is needed as this optimization level renames external functions and globals. That means we need to compile all the libraries we depend on together with Urbini code. Also, we need to define globals we use and all the code called from templates as externs.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.