Building Space Invader Game using Greensock js

While I was studying animation effects, I stumbled upon Greensock js. This is a powerful javascript library specialized for building animation effects using timeline. Even the basic offerings of the library is impressive, it has all the easing effects, event handling, and provides full control over the DOM objects.  

To dive deep into it, I built a space invader game. You can find the source code from my github greensock-samples repository.

In addition to timeline, I had fun creating gif files to build menacingly walking space invaders, express explosion, and play low-res game sound effects. All the while, playing the game that I created. 



Font Awesome for Rapid Prototyping

During rapid prototyping, you really don't want to stop to make a commonly used icons. You also don't really want to put in placeholder icons because it often distracts reviewers from the core concept of the design.

People are lazy readers. They extrapolate most of the details from one visual cue that they can hang onto. When they are forced to read, their interpretation is clouded by the interpretation of the imagery.

Using appropriate icons improves visual comprehension and avoids distraction. So, here comes font awesome. I guess you can call this next-gen Winding. :) It has about 460 icons (I tried to manually count so I may be off by a dozen.).

It is a font. That means you can use it in any graphics tool, for example, Adobe Photoshop, Illustrator, Edge Animate, Axure, and Sketch.

For example, you want to use it on Adobe Illustrator:

 select the icon by dragging the area around the icon.

select the icon by dragging the area around the icon.

  1. Download it and install the font on your system from the Font Awesome website.
  2. Go to the font awesome cheatsheet and copy and paste the symbol to the Adobe Illustrator.
  3. Specify the font as "fontawesome".
  4. Since it is a font, now you can now treat it like a text.

Rapid Prototyping using Balsamiq and InVision

I use Balsamiq Mockup as a thinking tool.

As the online course "Design Thinking for Innovative Problem Solving" by Jeanne Liedtka is wrapping up, I am now asked to create a mockup of the project I was working on, so that I can perform a learning launch.

For the course, I created long scrollable feed with two pages mocked up in Balsamiq. 

Then export the Balsamiq in images and uploaded to InVision project.

I set the project as an iPhone App and it automatically adds the iPhone App frame around the mockup.

 

 

In InVision, you can send the link to your mockup for review. You can even view the mockup on the phone as well. It has basic screen transition animation such as wipe left/right.

When you are in the early stage of a project and want to create a multiple mockups for review, InVision looks like a suitable solution for it.

Expression of Falling: Forth down at Half Time

In nature, it is very rare to see an object moving in a constant speed because every motion is impacted by gravity, air resistance, and friction.

This is why UI transition in a constant speed appears weightless.

"Forth down at a half time" is a rule in expressing the animation of a falling object.

In many prototyping tools such as Adobe Edge Animate and Axure, the canned animation effects support this already, with the terminology of "ease in" and "ease out".

Tinkering with D3: Javascript library for data visualization

I love self-explanatory graphs. The one that you just look and intuitively understand what it is about. This desire is deeply rooted from my years in PhD, where I had to produce many graphs of experiment results and at the same time  I had to understand many graphs other graduate students have produced. The best tool I knew for such scientific publications was LaTex.

Anyone who's interested in data visualization on web, come to meet d3.js

It is equipped with all the possible functions to help in making self-explanatory graphs. There are literally hundreds of examples that will help you build beautiful and insightful graphs on the site.

Here is my example: 80/20 Rule in enterprise level CAD software.

80/20 rule in application usage data



Design Thinking for Innovative Problem Solving

Design thinking is a process to find a solution for a complex problem that is involved with people from different points of view. It is distinguished from the act of designing where the problem to solve is already known. Design thinking starts with an understanding of current systems or environment, empathize with the people in the environment, in the process of defining the problem to be addressed. The approach involves the hypothesizing the problem, prototyping and testing from early on to get to the solution that works and delight people.

The tipping point of this process is when we can come to question in the format of...

"How might we...?"

This is a powerful statement that illicit many different solutions from people's mind.

The design thinking process is by nature collaborative process where we catalyze the opinions about current state, align on the problems to solve, ideate and synthesize the solutions that eventually need to be tested.