While I was working I needed to create a button bar that performs more like the Mac OS X Dock using the same magnifying effect. After many tries and many versions later I managed to get the desired effect in Flash, get access to the source code at: https://github.com/juank-pa/dock-menu-as. In this post I explain the math algorithm I used for this effect.
Digital diamond baseball mac os. A Backup Tool for Google Glass (for Mac OS X) Creates lifestreams like this: The secret is that the entire app is a shell script wrapped as an app. Tools used: Platypus – for wrapping the shell script up as an app. CocoaDialog – bash bindings for Cocoa. OS X’s Dock is a key part of the operating system that has helped define the Mac experience for over a decade, and as OS X has changed so too has Apple’s implementation of the Dock. Like many aspects of OS X, however, end users can customize the Dock to better suit their tastes and workflow. Flexiglassenables some of the missing features in OS X window management and offers an extremely convenient way to move, resize, maximize, and close windows on a Mac with a mouse, trackpad and keyboard. Move and Resize:Usually, when you want to move or resize a window on a Mac you are limited by its title bar or lower-right corner.
Idea #1
![Glas Glas](https://support.apple.com/library/content/dam/edam/applecare/images/en_US/macos/Big-Sur/macos-big-sur-sidecar-hero.jpg)
Mac Os Download
The first idea was to make icon under the cursor bigger and then start making the surrounding icons smaller and smaller using a linear progression. In the next image you can see how icons were shown using this algorithm.
This algorithm has two problems though:
- When and icon grows and shrinks it doesn’t have a smooth movement because of the linear progression.
- There is a side-effect in the algorithm that makes icons appear to be shaking. I’ve seen the same movement in a lot of bars of this type so I guess they are using this linear approach. Some others try to soften this movement with and smooth algorithm but the issue is still in there.
Idea #2
The next idea was that I needed another algorithm to soften the path of the icons the way you see in the picture.
![Glas mac os update Glas mac os update](https://9to5mac.com/wp-content/uploads/sites/6/2020/08/iMac-Nano-Texture-Glass-20.jpeg?quality=82&strip=all)
Implementation
Mac Os Mojave
If you look hard enough you will see that the wanted path look very similar to the cosine function but with differences, so I’ll start from here. The next picture shows 4 images explaining how to convert a cosine function into the desired one:
- The first image is the original cosine function shown between 0 and 360 degrees.
- I need to invert this curve so I multiply it by -1 (this is called “negate” a function).
- Now I want values between 0 and 1 instead of between -1 and 1. So the first thing to do is add 1 to the function. Now the values go from 0 (-1 + 1) to 2 (1 + 1).
- To convert the 0 to 2 range to the desired one I need to divide it by 2. That’s it the range is now between 0 and 1.
Now I have the function I need to apply to the icons size:
As you can see in the picture:
- I have a minimum (min) and a maximum (max) icon size for this magnifying effect.
- I subtract min from max and I get the difference (diff): diff = max – min
- Then to get the size of each icon I use:We add to the min size the difference (diff) multiplied by the cosine function we found before.
But where does theta come from? We should convert pixel coordinates to the theta value we are going to feed to the cosine function. We need to decide how many pixels we want the effect to span (effectWidth) and we need to apply this based on the current cursor x position (cursorX) and the icon x position at its minimum size (iconX).
Remembering to always cap theta between 0 and 2 PI.
We just feed this value as theta in the cosine function for each icon and voilà.