Comments (6)
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.
Thanks for the explanation, Francois.
It still looks great, btw!
from popcorn.
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.
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.
The film strip is then a flat overlay that matches the perspective of the path, giving the impression of a reel of film.
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.
Thank for the additional background, Francois. I now have to hack on this!
from popcorn.
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)
- Tap/Click on poster to select HOT 1
- Trailer preview popup close symbol rendered wrong HOT 4
- Demos should be available as a 1 click full download
- Viewport is not well adjusted for phones and zoom is prevented HOT 2
- Movie's detail not updated when using the scroll wheel HOT 2
- Samples should probably have a link to their respective repository
- Publish dist to montagejs.github.io/popcorn
- Trailer player issues
- Fix deprecated use 'values' instead warnings
- Keyboard navigation would be nice HOT 3
- push service worker
- Release change to https://github.com/montagejs/popcorn HOT 2
- Flow should start by showing middle index to avoid empty "frames" HOT 1
- Movies that are not rentable should not have a "rent" button
- Should remember which movie was "selected" when returning to a collection HOT 1
- Change name/logo to Popcorn HOT 2
- Add a "Made with Montage" link HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from popcorn.