Inspired by the login page and a wanting to tinker with canvas and particles I set out to recreate the wispy particle effect. You can see the progress I made at the following page:
mobileme-particles

I’m happy with how it turned out but there are a few things that could be improved. For one, the movement in the original is less rigid with more twists and turns. Is a flocking algorithm being used? Also, the mouse interaction with the particles in the original is livelier and has a nice bounce back effect when the mouse moves away from the particles.

If you’d like to look at or use the code you can grab it on GitHub.

Learning About Particle Systems

There are quite a few places on the web to learn about simple particle systems. If you want to go a little further and add forces, I found the following two posts useful:

• Andrew Hoyer | Particle System
• Creating a Particle System in Processing: Applying Forces

Gas Tank Direction Icon

I recently learned that the gas pump icon near your car’s fuel gauge has an arrow indicating which side the gas tank is on.

Target – “I Want Candy” Aisle Label

I’m not sure if this is meant to tap our unconscious or to provide a script to small kids on exactly what to say to pester their parents.

Krups – Coffee Machine UI

Which menu option is currently selected, ‘Yes’ or ‘No’? I’m not sure either. I sometimes get the same feeling when an OSX dialog pops up.

Irving Gas Station – Bottle Ratings

Notice the use of one, two, and three bottles over the fuel grades. They are subtly implying that ‘clean supreme’ is three times as good as ‘clean regular’. Three times is more impressive than the 7% better octane rating ‘clean supreme’ has over ‘clean regular’.

The Economist – Misleading Graph

I found this bar chart in an old issue of The Economist. A quick scan of this graph would give you an impression that foreclosures are skyrocketing. Look at the date ranges on the x-axis to see the absurdity.

I initially set out to capture the speed, break, and movement of the pitches in a single diagram for each pitch, showing the trajectory from the catcher’s perspective. As I got further along in the process, some pitches become harder to identify, because I had trouble distinguishing movement and break (splitter and forkball were particularly difficult to render). Movement being the general direction the ball is moving and break being a sudden shift in direction. This led me to add small profile views that help make the difference in break more apparent. It can still be quite subtle.

From the previous post, here is the final work including all twelve pitch diagrams:

I‘m a baseball fan. I’ve watched my share of televised games and attended a few handful. After all this, I was still in the dark about the difference between pitches. I knew a curveball broke downwards, but what exactly was a circle changeup?

The diagrams below are the results of skimming through baseball books and doing online research. This is not a complete guide. I’ve picked twelve of the more common pitches:

• Fastballs: Four-seam, Two-seam, Cutter, Splitter, and Forkball
• Breaking Balls: Curveball, Slider, Slurve, and Screwball
• Changeups: Changeup, Palmball, Circle Changeup

Learning to Identify Pitches

The list of pitches might seem like a lot to keep track of, but remember that each pitcher utilizes only a selection of these pitches. For example, Pedro Martinez throws a curveball, circle-changeup, an occasional slider, and a fastball. Do a little research on the pitcher before the game.

Things to watch for that will help you identify a pitch:

• Speed
• Movement – the general direction the ball is moving
• Break – a sudden shift in direction

There are a few other things that can help you identify a pitch: ball rotation, point of release, and grip. For a casual fan though, it might be a bit much and I don’t illustrate or discuss any of the latter three items.

Reading the Diagrams

Take note of the speed, movement, and break of the ball. Don’t worry about where the baseball is shown in the the strike zone. You can throw a fastball in the middle of the strike-zone like the one illustrated, or you can throw one high and away from the batter. It’s still a fastball. Location doesn’t determine the pitch.

I’ve collected all twelve of the pitch diagrams below, minus the text notes, into a single PDF:

Four-seam Fastball

85-100 mph

• Fastest, straightest pitch. Little to no movement.

Two-seam Fastball

80-90 mph

• Also known as a Sinker.
• Moves downward, and depending on the release, will sometimes run in on a right handed hitter (RHH).

Cutter

85-95 mph

• Breaks away from a right handed hitter (RHH) as it reaches the plate.
• Mix of a slider and a fastball. Faster than a slider but with more movement than a fastball.

Splitter

80-90 mph

• Breaks down suddenly before reaching plate.

Forkball

75-85 mph

• Like a splitter, but with a less dramatic, more gradual downward movement.

Curveball

70-80 mph

• Commonly called a 12-6 curveball. The 12-6 refers to the top to bottom movement (picture a clock with hands at 12 and 6).

Slider

80-90 mph

• Breaks down and away from a RHH.
• Between a fastball and a curve.

Slurve

70-80 mph

• 11-5 movement. Similar to a curve but with more lateral movement.

Screwball

65-75 mph

1-7 movement. Opposite of the slurve.

Changeup

70-85 mph

• Slower than a fastball, but thrown with the same arm motion.

Palmball

65-75 mph

• Ball is gripped tightly in palm.
• Just like a changeup, this pitch is slower than a fastball, but thrown with the same arm motion.

Circle Changeup

70-80 mph

• A changeup with 1-7 moment like the screwball.

Answering requests, I have setup a Cafe Press store which offers the nine coffee cup illustration printed on all sorts of things. I have never purchased anything from Cafe Press, so fingers crossed the quality is decent. I bought myself a mug.

If you’re simply looking to print up a copy to fold up in your wallet, I’ve created a PDF file which contains all nine images.

Source File

If you’d like to extend or localize the illustrations you can grab the Adobe Illustrator source file. You can also open up this file in Adobe Photoshop, without the vector data, as a bitmap..

License Information

I’m offering the illustrations under the Creative Commons Attribution-NonCommercial License. What this allows for is the use and modification of the work for noncommercial purposes. I chose a non-commercial license because I do not want people to sell the image. If you want to use the image for educational purposes in a commercial space such as a website or cafe, you have my permission to do so. As for attribution, I ask that you leave my name and website address in the fine print.

I‘m new to the world of fancy coffee drinks. With the vast number of ordering options and new words with accented characters to pronounce the coffee shop ordering experience can be intimidating. I’ve created a few small illustrations to help myself and others wrap their head around some of the small differences.

About Espresso

Espresso is prepared by forcing pressurized steam through finely ground dark-roast coffee beans. Think of it is strong, concentrated coffee. You can add extra ‘shots’ of espresso to make your drink stronger.

Espresso
[ess-press-oh]

Espresso Macchiato
[ess-press-oh mock-e-ah-toe]

Espresso con Panna
[ess-press-oh kon pawn-nah]

Caffé Latte
[caf-ay lah-tey]

Flat White

Cafe Breve
[caf-ay brev-ay]

Cappuccino
[kapp-oo-chee-noh]

Caffé Mocha
[caf-ay moh-kuh]

Americano
[uh-mer-i-kan-oh]

About the Diagrams

I gathered most of my information from Wikipedia and tidbits from other online sources. Know that drinks might be prepared a bit differently coffee shop to coffee shop, and especially country to country.