Pinch Zoom mechanic


#1

It seems the ability to pinch-zoom is missing from Hopscotch so I thought I’d try to recreate the mechanic.

Of course Hopscotch only reads a single last touch spot, so this isn’t perfect. But it seems to be kinda close.

Here's an explanation of how it works

I apologize as there’s no picture of the code here. There’s too much code with formulas that don’t fit in a screenshot, so I’m just going with descriptions. But you can open the project and try to follow along with the descriptions.

The 1st Touch Circle

First off, When Pressed is monitored and a variable (Pressed State) is set to #Pressed or momentarily to #Released

  • Setting up a Watch for Pressed State is discussed more in another topic:
  • The variables with # are pseudo-constants and are discussed in the same topic here:

The first time you touch the screen, an anchor point is created by moving a Circle to that touch location. It’s named, unsurprisingly, 1st Touch.

Then, until you take a finger off the screen, the code continually watches where you touch the screen. A second finger placed on the screen moves the last touch location way from the 1st Touch circle. The distance away is calculated by Pythagorean Theorm (A^2 + B^2 = C^2, but that’s discussed in many other topics so I’m not going to repeat it here). If the distance is >50, then it is assumed that this is a touch with a 2nd finger (<50 and you may have just moved the 1st finger). First time there’s a 2nd touch, the distance apart is set as a Reference Distance. That reference distance will equate to a Scale of 1. When the 2nd touch location moves, a new Scale is calculated by dividing the new distance between 1st and 2nd touches by the Reference Distance

When either finger is taken off the screen, the code resets the Reference Distance to 0 and the Scale to 1. When there’s multiple touches and any of them are removed, the Hopscotch When Pressed rule quits firing until you take all fingers off the screen and touch it again. This is unfortunate as we then can’t keep pinching by leaving the thumb down and moving/resetting the pointer.

The Pinch Zoom Custom Rule

Next we create a custom rule and add it to any/all objects that we want to respond to the pinch zoom.

When Scale < > 1, there’s a pinch zoom in-process and objects resize themselves according to the scale. To do this we first set an object variable to record the Original Size, then the rule enters a recursion (loop) where it resizes to Original Size * Scale.

Of course when we zoom-in the objects have to be positioned further apart and closer for zooming-out. Then is done by a rule than fires when Pressed State = #Pressed (this gives us dual functionality of pan & zoom, as I’ll explain).

Same as the size, we set a object variable to record the Original Distance of the object to the 1st Touch anchor and the angle from the 1st Touch location to the object (calculating this angle is also discussed in other topics so I won’t repeat it here), then we enter a recursion (loop). In the recursion, we Set Position of the objects using the Cosine & Sine formulas.

X Position is: Radius * Cosine(Angle) + Xcenter
Y Position is: Radius * Sine(Angle) + Ycenter

X & Ycenter is the position of the 1st Touch anchor since that’s where everything moves relative to.

The radius is calculated as: Original Distance * Scale
And that radius calculation is where we get the panning functionality kinda for free. Before the 2nd touch, Pressed State = #Pressed and Scale is 1. When Scale is 1 the Original Distance doesn’t get changed and the objects just follow the 1st Touch anchor.

I know there’s a lot to follow here :sweat_smile:, but hopefully it isn’t too bad if you follow along using the linked project.

If you want a challenge, try it yourself without looking at what I did. Maybe your version will be better :smiley:

Let me know if you think it works well or not and suggest any improvements!


New E-Pad Ideas
#2

Dude that’s sick good job


#3

Nice work! :slight_smile:

Something about being able to do this is inexplicably satisfying


#4

How cool! It sad that it doesn´t work to well ona computer without a touch screen though. I will try this out on my iPad later!


#5

Great work! This is super cool! Keep it up.