iStrategyBlabs

ISL Logo, We Need to Talk About Your Flare

logo-feature

We have a tall stack of technologies in use at ISL. There are GNU/Linux systems running in Amazon’s cloud plus a few languages coordinating with frameworks, platforms, and CMSs. Those communicate with database engines, web servers, memory caching systems, and more. Essentially, all that stuff works together to package a digital experience as HTML, CSS, and Javascript for consumption by you and your browser. Mmmm.

Recently, I took some time to experiment with CSS animations and thought it’d be fun to apply my findings to the ISL logo, which, thanks to the incredible design team here, already provides a fun geometry and color set to work with. Take a look at what I came up with:

Building Letters from the Inside Out

I have circles in mind for this experiment. Maybe it’s a desire to balance out the logo’s sharp corners, or maybe it’s just carryover excitement from the last time I used them to find popular Instagram users. Circles are awesome. Their influence will be obvious when we start rotating the logo later on, but they’re present along the way helping to make sense of angles and edge lengths.

We can break the logo down to basic shapes and use HTML and CSS to create those shapes in the browser. By starting with the ‘S’ we’re less constrained by the other components, and after it’s complete we can build out from there.

The shaded rectangles represent areas we can easily create by defining a background color, height, and width to HTML divs. We’ll make the curved segments of the ‘S’ by extending the shaded areas into the highlighted portions and rounding one of the corners with the CSS property border-radius.

figure_0

figure_1

The ‘I’ is much simpler to complete. It just needs one tall shaded rectangle and a pseudo-element that we absolutely position with zero height and width, and colored borders that overflow its dimensionless self. Ya.

figure_2

figure_3

Our final letter, ‘L’, is more or less the same as the ‘I’, only we tack on an additional rectangle to complete the base. The base may be a bit stubby, but I like how the dimensions are working out so onward!

figure_4

figure_5

Cutting the Background

Now that the letters are complete, it’s time to tackle the background. We draw a dashed enclosing rectangle around the letters and measure one and a half units of margin to the background’s perimeter. That looks about right.

figure_6

figure_7

Next we highlight on the rectangle two corners that we’ll cut away from. These highlighted regions are conveniently positioned to make use of some of the known dimensions while we calculate how to trim so that we maintain the 1.5 units of spacing.

figure_8

figure_9

That’s that. Add some pink to pop, and we’ve got our logo.

figure_10

figure_11

The real fun begins here. Let’s consider what it would look like if we pivoted our logo around its bottom right corner.

figure_12

figure_13

That’s 20.625 degrees of rotation, ample range for a little animation with room left over…

Continuing the breakdown, we move on to color. We have the CMYK color model which provides four colors to start with, but we have so many degrees to play with so let’s add more. For each of the four colors, we tint towards white five times to yield the spectrum here.

colors

Now for each of these colors, let’s create the logo’s hexagonal background filled with that color. Conceptually, we stack them all and have a deck of twenty-four logos to work with.

Let’s make each one rotate such that we get the forward tilting effect shown earlier, and let’s also have each successive background rotate just a bit further than the last one to create something of a flare. The first one will rotate 20.625 degrees, the next will rotate 1.875 degrees more, the next an additional 1.875 degrees, and so on. These rotations will be the peaks for their respective logos. Once a peak is reached, we’ll rewind the logo back to its starting point returning the cards to their original stacking.

If we froze each logo at the peak of its animation, we’d get the following figures. The first shows only the black tints, and the second shows the full set of colors.

figure_14

figure_15

That looks cool, but I’m not aiming to have them all move in unison. It should feel livelier if each logo, while related to the movement of its neighbors, has its own more independent motion.

The Result

With a touch of javascript, we trigger each logo’s animation and coordinate the trigger frequency with the animation durations so that the next logo is emerging past the previous one just as the previous one is peaking.

Here’s the result.

This was a CSS exercise. There are certainly improvements to be made and other technologies to consider. If you want to mess around with it, check out the codepen. Have fun!

Finding Instagram’s Most Wanted

isl-ig-feature

At iSL, we’re excited about the Olympics - go world! – and we’re dreaming up new ways of engaging our global audience. As part of the process, we thought it’d be cool to find Instagram users with the most pull in this year’s Olympic host city, London, so we built a little web app.

Here’s How It All Goes Down

First we need to decide on a search target, e.g. a city. Next we look for photos taken in our target area, and finally we process the media to discover those people deemed interesting by society. Google Maps provides incredible groundwork for our first requirement. We use Instagram as our photo source and follower rank. Then we match usernames with Klout. Putting it all together we should end up with a live monitoring system configurable via Google Maps.

The Challenges

It would be awesome if Instagram had the streaming support that Twitter does thus simplifying the build of a truly live system. Instagram does offer a realtime solution via its subscription service, but it involves significant back and forth so managing rate limits becomes an extra problem to solve. For now we settle on basic media scans.

As you may already know, our super-computer-mobile-gizmo-phones are sending our geographic positions embedded in every photo we upload to Instagram. That geo info is then made available via an API. Both subscriptions and the standard REST endpoints allow us to filter results based on this geographic data.

Here’s where things get tricky. Geographic queries to Instagram are limited to a 5000m radius, and we may very well want to search a larger area than this. London, for example, is 1,577 km². To get around the limitation, we’ll perform multiple searches with the maximum allowable radius, repositioning each time until we cover our target area.

Using Math to Solve our Problems

The problem we’re faced with amounts to filling a big circle with little ones. It’s obvious we can’t fill the larger circle with fixed-sized smaller ones without overlapping. See?

On the subject of circle packing though, there’s some super math out there. With this, our problem requires overlapping circles. This was our solution:

Let’s think about squares for a minute and come back to circles. We can imagine a square that encloses the large circle. It’s easy to then break that square into smaller ones that, combined, cover the entirety of the larger square and by association, the enclosed circle.

Now if we stop to think that inside every circle lives a square, we have a solution to our overlapping problem.

Accounting for a 3D World

Life is good in 2-D. Don’t believe me? Read Flatland, and do your best to ignore its unfortunate classification of women – it does have other redeeming qualities.

Things get tricky when dealing with life on Earth. As you probably noticed, stuff around here exists in three dimensions. Translation: we need to map our convenient 2-D system to the real world.

If you’ve ever traveled by plane, you’ve benefited from the math that helps us all move from a to b when |a – b| is pretty big. Straight lines don’t happen; instead our flight path is curved with the Earth’s surface. Thankfully, lives aren’t at stake here so I opted to use a relatively simple method for computing coordinates.

I’m going to combine this with some of the math used to generate earlier figures to get our circle center generating function, in Python:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
def generate_circle_centers(lat, lng, radius):
    # One side of a unit of the grid measures the distance of the
    # side of the largest square that will fit in an Instagram
    # search circle.
    unit = (2 * INSTGRM_MAX_RAD) / math.sqrt(2)
    # Find bounds of the grid. Bounds exceed desired radius by less
    # than one unit.
    x_max = y_max = int(math.ceil(radius / unit))
    # Generate centers for the grid without considering latitude
    # or longitude yet.
    ideal_centers = [[(unit*(i+.5),unit*(j+.5))
      for i in range(-x_max,x_max+1)
      if i+.5<x_max and j+.5<y_max] for j in range(-y_max,y_max+1)]
    # Map the centers to lat lng values, in degrees.
    lng_change = lambda x, lat1, lat2: math.degrees(
      x/(EARTH_RADIUS*math.cos(math.radians(
        (lat1 + lat2)/2
      ))))
    lat_change = lambda y: math.degrees(y/EARTH_RADIUS)
    centers = []
    for row in ideal_centers:
        for ic in row:
            y, x = ic
            # Skip circles that fall entirely outside of target.
            if math.sqrt(x**2 + y**2) > radius + INSTGRM_MAX_RAD:
                continue
            centers.append((lat_change(y)+lat,lng_change(x, lat,
                lat+lat_change(y))+lng))
    return centers

The Final Product

Now we plug this into a web framework, bring in a library or two, extend the previously mentioned awesomeness from Google, tie it all together with a dash of CSS, and voilà!

We’re scanning London for popular Instagram users. The yellow fill represents scans that successfully found people. We can also move and resize our target to look all over. Here we are back home.

So it looks like the smaller circular regions are being scanned. It should appropriately skip areas where people aren’t. Chicago sits at the southern tip of Lake Michigan, and I’m guessing there isn’t anyone uploading photos to Instagram from their boat. Let’s see what happens.

Nice.

Reaching Out on Twitter

Now that Instagram users we may find interesting are scrolling past, let’s see about getting in touch. We found a high correlation between matching Twitter usernames and Instagram usernames for popular Instagram users so we query Twitter to see if the prospective account exists. If we get a match, a link to the user’s Twitter feed is included. Now @ those you like!