Magic Wand for Paginated Content

Mouse Coordinates Revisited

A long, long time ago, I wrote a piece on the mouse coordinates system in Quartz Composer and how to translate it to a device screen in the Origami Phone patch. Soon after that, Facebook introduced a new Phone patch supporting landscape mode and my simple solution became obsolete. With the release of Origami 1.4 and the introduction of new devices, things got even more complicated. For example, the bitmaps representing Apple Watch and iPhone 6+ are not 1:1 in pixel size scale, creating some wacky edge cases you need to take into consideration.

I decided to tackle the problem again and here is the result: a patch that outputs correct mouse positions on all devices in both landscape and portrait modes as well as in full screen mode (there is a bug with the Phone patch though. The iPhone6+ screen is not displaying correctly in fullscreen mode.)

01_mc_blog_vts

Again, the patch requires the Viewer Window size to make all the required calculations. The way you set it up is by publishing Viewer Width and Viewer Height inputs and then connecting the Rendering Destination Dimensions patch from the outside of your main Layer Group.

Dragging. Again.

Some of you may have read my tutorial on building the snapping scroll patch. Achieving its functionality required us to figure out how to make objects draggable. In fact, making things draggable is often the first step in modeling custom interactions. That’s why I believe you’ll like our latest little patch, Dragger. It allows you to create draggable layers very quickly, but also easily build on it to achieve your own behavior.

Here’s how the basic setup looks:

02a_mc_blog_dragger

The Carrier input is where you plug your variable in. It could be anything, but the most common usage would obviously involve using the mouse position. In the example above, it’s actually the X Position of the mouse. Connect the Drag output from the Interaction 2 patch to the Dragger. Now, if you connect the Position output to your Layer X Position input you’ll be able to drag the layer along the X axis (you’ll need a separate Dragger patch for the Y Position if you want to drag the layer in 2 dimensions).

Dragger Example

As you probably noticed, the patch has another output called Distance. This outputs the current distance traveled by the mouse from the moment you started dragging. It will reset to 0 the moment you release the mouse button.

Now let’s take a look at the remaining inputs. Mirror will reverse the direction of your scroll:

Dragger Example Mirror

Scale is the ratio between the Carrier and Position values. The default value is 1 (a ratio of 1:1). Setting it to 0.5 will produce the following effect:

Dragger Example Scale

Now, in order to drag the object over the desired distance, you have to travel with the mouse twice as far. Reset does what it says: it resets the current Position back to the default value of 0. Although very useful, dragging is rarely, if ever, used as is. What’s really cool is what you can build upon its output.

Paginated Content

No matter how big the device screen is or will be in the future, it’s not big enough to fit all the cool features and content you plan on including in your app. At one point or another, you will need to divide your content into separate and ordered views and allow users to easily swipe through them.

There are some cool patches that let you set things up like that extremely quickly, but what they often lack is flexibility: they offer a limited number of pages and allow no control over individual transitions nor animation settings.

That’s why I decided to build my own Page Flipper and here’s how it works.

Let’s say we have 3 views/pages that we want to flip through horizontally. For the sake of this example, I will use just three colored rectangles and set their sizes to match the device size (iPhone5: 640×1136).

I set them up so that the second rectangle’s X Position equals the X Position of the first plus 640. I’ll bind the third rectangle’s X Position to the second one in the same way. So their respective X positions should be 0, 640, 1280, and whenever you change the position of the first one, it will also affect the others:

03_mc_blog_rectangles

Perfect.

Now let’s add the page flipper and connect the Distance from the Dragger patch and Drag from Interaction2 just like on the image below:

04b_mc_blog_pageflipper

Set the Pages input to 3 as we have 3 pages (rectangles). We’ll be scrolling horizontally so the Size should be set to 640 as it refers to the width of our page which is 640 (full width of the device). Leave the other inputs alone. Just connect the Position output to the X Position of our first rectangle and…

Voilà!

We have horizontal paginated scroll view! The patch will switch the page once you drag it beyond the threshold, but it also takes the velocity of the gesture into account.

As you can see it’s fairly easy to set up, but the real power of this solution lies in its flexibility.

Flexibility

Let’s create some text labels that will follow the pages, but with half the width. Again: create 3 Text Layers and position them next to each other. This time, make the distance between them half of what it was for the pages, that is 320. We also want them to travel half the distance, so before you connect the Position output to your text layers, divide it by 2 with the Math patch:

A tiny bit of math and it works like a charm!

Here’s another cool thing. You are not required to use the default easing. Add your own animation patch, set it however you want and plug in into the Page Flipper. Be sure to turn on the Bypass input:

05_mc_blog_bypass_animation

Now it will use your own settings to animate the pages:

Ok, this setting is ridiculous, but hey… that’s exactly what I set it up to do.

Let me show you even more of the coolness. There’s another little helper of a patch I called Page Transition. Add it to the equation to add custom animation for every page.

So, we’ll add 3 patches (one for each page). Feed each one with the Position output from our Page Flipper. The Size input is our same old 640 as this is our distance between pages. The Index (counting from 0) is just our page number. The patch will produce the transition from the Start Value (when the page is visible) up to the End Value (when it completely leaves the screen). It sounds complicated, but once you’ll see it in action you’ll immediately grasp what it does.

Let’s say we want the first page to scale in and out of view. It is our first page so we should set the index to 0. The scale should go from 1 (when it’s in) to 0 (when it’s out) so let’s set the values accordingly. We’ll do the same thing for the second page, only this time with alpha. Just connect the output value to Alpha on the layer. And for the third page… I don’t know, let’s make it twirl in and out of view, so Index 2, Start Value: 0 and End Value: 360, connect it to the Z Rotation of the Layer.

Let’s check what happens now. But before we do that, let’s unplug that nauseating bouncy animation – uncheck the Bypass input…

Oh, boy… Let’s leave it here. I hope it looks interesting and you’ll give it a shot. If so, have fun and please give us some feedback.

Oh, and here’s the link to download the patches.

Also: check out the console patch developed by our very own Daniel. It’s a must-have tool and I can’t imagine working without it!

Switching from Origami to Form. A Curmudgeon’s Diary.
Chaining animations is easy