Sunday, February 24, 2013

Tweener Demo

This is the second Android app I ever made, and I'm quite happy with it. Its focus is a custom view/control I made, named TweenerControl. As the name (hopefully) implies, it allows you to create tweening/easing curves that can later be used for a variety of things, including view animations. The TweenerControl creates a Tweener object, which implements the android.view.animation.Interpolator interface.

The motivation for the project was to be able to visually and interactively create tweening curves that could be used for a wide range of things. There are various interpolators offered by Android, but it's hard to visualize exactly what an AnticipateInterpolator really looks like, for example.

My tweener works by creating a series of cubic curves and connecting them into a single spline. At first I looked into using cubic Hermite splines, Bézier curves, and Kochanek-Bartels curves, but all of these were problematic because they provide two output values from one input value, and tweening functions need to produce one output value from one input value. Overall, I'm happy with the results the cubic curves give.

For the curious, the cubic curves were generated as follows: a cubic function f(x) is generated from two end points and the slope at the end points. That is, given two points, (x1, y1) and (x2, y2) that lie on the function f(x), and the slope at these points (m1 = f'(x1) and m2 = f'(x2)), the cubic function f(x) = ax3 + bx2 + cx + d is constructed satisfying these constraints. It's just a matter of a little linear algebra. A series of cubic curves are then pieced together into a single spline, representing the overall function that maps inputs in the range [0, 1] to a "tweened" output.

I'll work on getting the code repository online somewhere. Note that I will not be putting this on the Google Play Store, simply because it's a little demo and not something I think should clutter the Play Store.

In the Tweener Demo, there is a box along the top that moves back and forth along the top of the screen according to the curve. Different color schemes can be selected, and the color transitions according to the curve as well. There's a vertical line that moves across the curve as the box moves, showing you which part of the curve is causing the box to be at its specific location. Control points can be added by double-tapping the curve. A control point can be deleted by double-tapping the it. Here's some screenshots:


The initial screen.


The "Android" theme selected, with the curve moved around a bit.


The "Dark" theme selected, with the view zoomed in on a part of the curve.


The "Colorful" theme selected, with extra control points added.

Tuesday, February 5, 2013

Macs are PCs

I know. I know what people mean when they say "Mac" and "PC." But it's still wrong. "PC" is an abbreviation for "Personal Computer," which yes, really is as vague as it sounds. Your MacBook Pro is a personal computer, your iMac is a personal computer, your Dell Inspiron is a personal computer, your Chromebook is a personal computer, etc. They're all PCs. Please, for the love of all that is technically correct, stop pretending like Macs are something different and special from a PC.

If you're going to compare, say "Mac" and "Windows" or "Mac" and "Windows PC." "Mac" is a bit confusing, because it's the name of an operating system and also a product line of personal computers. If you're going to compare operating systems, say "Mac" and "Windows," seeing as they're both operating systems and now you're comparing software to software. Or better yet, say "OS X" and "Windows" because these days, the proper name is "OS X" and not "Mac OS X".

If you want to compare Macintosh (marketed as Mac) personal computers against Windows based personal computers, say "Mac" and (something like) "Windows PC." Without the "Windows," comparing Macs to PCs is like comparing apples to fruits... apples are fruits (think about it: if you were to say "Apples are way better than fruits," you'd sound like an idiot). Specifying "Windows" means now the comparison is specific and actually makes sense.

Saturday, February 2, 2013

Building SFML 2 with C++11 on OS X

It's not a very difficult thing to do, but clear, simple instructions can be useful. Thankfully, there's a good Getting Started guide with official documentation for building SFML (and you really should read it). If, after reading that, you want things spelled out even more... here you go.

Step 1: Prepare Xcode

Make sure you have Xcode downloaded and installed. Make sure you have your command line tools set up. You do this by doing Xcode -> Preferences -> Downloads and making sure you have Command Line Tools downloaded and installed.

Step 2: Prepare Cmake

I won't go into what Cmake is, but download and install the latest version. SFML needs it.

Step 3: Download SFML 2

Go to SFML's download page and download the SFML source code (either the SFML 2.0 source code or the latest snapshot of the Git repository).

Step 4: Open a Terminal

Hopefully you've got the Terminal sitting on your dock, but in case not it can be found under Applications -> Utilities -> Terminal.app.

Step 5: Get Ready to Build

Next, do the following in your terminal:

cd <sfml folder>
mkdir build
cd build

In the first line, replace <sfml folder> with the path to the folder where you downloaded and extracted the SFML source to. mkdir build just creates the directory build where we can do our dirty work, and cd build moves into that folder.

Step 6: Run Cmake

Now run the following (you can copy and paste):

cmake -G 'Unix Makefiles' \
      -DCMAKE_OSX_ARCHITECTURES='i386;x86_64' \
      -DCMAKE_CXX_COMPILER='/usr/bin/clang++' \
      -DCMAKE_C_COMPILER='/usr/bin/clang' \
      -DSFML_BUILD_FRAMEWORKS='ON' \
      -DSFML_INSTALL_XCODE4_TEMPLATES='ON' \
      -DCMAKE_CXX_FLAGS='-stdlib=libc++' \
      -DCMAKE_C_FLAGS='-stdlib=libc++' ../

This runs Cmake and tells it to do a few things. Particularly, it's saying (going down the options one by one):

  • Use Makefiles instead of Xcode
  • Build for x86 and x86_64 (i.e. 32-bit and 64-bit)
  • Use clang++ for compiling the C++ code
  • Use clang for compiling the C code
  • Build as frameworks (instead of just dynamic libraries)
  • Install the Xcode SFML templates (so you can easily create SFML projects)
  • Link to the libc++ standard library implementation (necessary for C++11)

This doesn't actually build SFML, but it sets everything up so we can run the next two commands...

Step 7: Build!

Now run:

make -j4

make is a fancy program that will actually do all the building of SFML for you. The -j4 option just says "Use 4 threads to do this." If you don't want to use multiple threads to build (which is sloooow), you can omit this option. If you want to use more threads, like 8, you can change it to -j8 (I personally use 8 threads).

Step 8: Install!

The last step:

sudo make install

This will prompt you for your password. Give it your password. It'll place all the SFML files in their final resting place on your system, and it needs some elevated privileges to write the files to the necessary folders. If you're curious where it's writing the files to, just look at the output. Anyway, now you're done!

Bonus Step: Making an Xcode Project

What good is building and installing SFML if you don't use it? We'll set up a simple project now. Open Xcode. Then create a new project. Then select the SFML App template:

In the next screen, give your project a name. Make sure to say you want to use C++11! The "C++ Compiler and Standard Library" option does not default to Clang and C++11. You have to set this yourself. Assuming you followed my instructions and made SFML a universal framework for 32-bit and 64-bit, the rest of the options can stay the same.

You should now be able to run the created project!