Glas Mac OS

No guarantees that 20+ year-old software will actually work, although all the of the disk images except for the 400K MFS disks have been successfully mounted using Mac OSX 10.6 and Mac OS 9.2.2. Open “System Preferences” from the  Apple menu, and click on “Accessibility” (note that prior.

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. Spotlight Is Everywhere. Spotlight is available in more parts of Mac OS X. When you open a Finder window, Spotlight is always there at the upper right corner of the window. Just type something into the search field and the results will appear instantly.

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.

Idea #1

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:

  1. When and icon grows and shrinks it doesn’t have a smooth movement because of the linear progression.
  2. 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

Mac os versions

The next idea was that I needed another algorithm to soften the path of the icons the way you see in the picture.

Implementation

Glas Mac Os Update

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:

  1. The first image is the original cosine function shown between 0 and 360 degrees.
  2. I need to invert this curve so I multiply it by -1 (this is called “negate” a function).
  3. 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).
  4. 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.

Glas Mac Os X

Now I have the function I need to apply to the icons size:


As you can see in the picture:

  1. I have a minimum (min) and a maximum (max) icon size for this magnifying effect.
  2. I subtract min from max and I get the difference (diff): diff = max – min
  3. 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).

Glas Master


Remembering to always cap theta between 0 and 2 PI.

Glas Master Blade

We just feed this value as theta in the cosine function for each icon and voilà.