Giter VIP home page Giter VIP logo

Comments (6)

francoisfrisch avatar francoisfrisch commented on July 21, 2024

Yes, you are right, this is a known issue. What we need to do is a reverse
projection from camera (the plane where the touch is happening) to 3d
space. We have some prototypes but nothing concrete yet.

At the moment we have a fixed ratio between amount of touch
horizontal travel to the translation along the 3d path.

On Saturday, March 16, 2013, ungerrtb wrote:

When running the Popcorn demo on my Galaxy Tab 10.1 with ICS and the
latest Chrome browser...

Selecting a movie that's currently unselected by dragging it requires way
more touch travel than what's expected. I expected that if I started a drag
in the center of an unselected movie and moved my finger to the center of
the demo's UI, that the movie would be selected. Instead it required
significantly more touch travel past the center.

At first, I thought this might be typical drag lag, but it seems like it's
a bug in the design/implementation of the demo.


Reply to this email directly or view it on GitHubhttps://github.com//issues/10
.

from popcorn.

cgrobb avatar cgrobb commented on July 21, 2024

Thanks for the explanation, Francois.

It still looks great, btw!

from popcorn.

cgrobb avatar cgrobb commented on July 21, 2024

Upon more thought, every similar web UI I've used also has this issue, so I'd consider this aspirational.

The performance and visual fit and finish of the demo is extraordinary!

I do have one additional question. How difficult would it be (for a dev) to adapt this demo to a more complex (ie, one that also moves in the z-axis direction) 3d filmstrip? For example, this filmstrip,

http://www.tauntonfilmsociety.co.uk/images/2007filmstrip_small.jpg

from popcorn.

francoisfrisch avatar francoisfrisch commented on July 21, 2024

It is the Flow component that is doing the heavy lifting here.

It is displacing the tiles in 3d space along a defined path. I have rotated the camera element in the Web Inspector to highlight the role of the flow in the scene.
Path
The film strip is then a flat overlay that matches the perspective of the path, giving the impression of a reel of film.
top

What I'm really pointing out here is that the path is 3-dimensional in this example. Any path that is possible to define as a bezier curve is possible to use with the Flow component.

In the example these are the sections that might be of interest.
3D Path
Camera Properties
The knots are being programmatically calculated here so that we could adjust the radius of the circle to suit the design, but it should be possible to export the values for the knots and handles from cad software.

from popcorn.

cgrobb avatar cgrobb commented on July 21, 2024

Thank for the additional background, Francois. I now have to hack on this!

from popcorn.

cgrobb avatar cgrobb commented on July 21, 2024

For posterity...

I was able to edit existing and create new knots for the flow component used in the Paparazzi demo. It worked as expected. Of course, without additional logic, none of the objects were rotated to follow the path, they always faced directly forward.

For the curvy filmstrip path I was imagining, the flow component isn't a fit. Making the bends realistic would require very small-width images.

I'll post some additional thoughts about the flow component in an GitHub issue for it.

from popcorn.

Related Issues (18)

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.