Custom Interface

When you work as an interaction designer, especially if you have some clients in the automotive industry, chances are that you will make some circular meter interfaces. I´ve made a couple by now, and I had an idea of how to make a tool to make this process easier. With some simple trigonometry ideas i started sketching in AS3. I am planning to make this into an Illustrator script to speed up the workflow, but for now I have the mockup made in flash. In the project I also made a custom slider class.  Change the properties of the meter with the sliders below ! Ripley signing off.

Constructing a Bézier Curve

If you are a designer you probably work with bézier curves almost every day. I know I am. If you´ve read my blog before you know that I like to understand how stuff works. The bézier curve is no exception : ). I´ve been interested of how a bézier curve is constructed and when I had a few days off at christmas I started a little flash project to learn a little something about bezier curves. First some trivia from wikipedia to start things off: Bézier curves were widely publicized in 1962 by the French engineer Pierre Bézier, who used them to design automobile bodies. The curves were first developed in 1959 by Paul de Casteljau using de Casteljau’s algorithm, a numerically stable method to evaluate Bézier curves.

My first step to create a bézier curve was to understand and write a flash program using de Casteljau’s algorithm.

De Casteljau’s algorithm

• Consider a Bézier curve with control points P_0,…,P_n. Connecting the consecutive points we create the control polygon of the curve.

• Subdivide now each line segment of this polygon with the ratio: (1-t) and connect the points you get. This way you arrive at the new polygon having one less segment.

• Repeat the process till you arrive at the single point – this is the point of the curve corresponding to the parameter.

So the trick was to write a recursive function that would generate a single point (x and y coord). using this point I draw the yellow circles below. The light grey lines are the first control polygon and the darker ones are the hulls of each itteration.

Parametric equation

Another way to construct a bézier curve is to use a more direct approach, a parametric equation. To construct a cubic bézier curve we use the equation below:

bézier curves are not only used to describe “physical” shape but also in the time domain to describe how properties change over time. They can also be used to describe position in 2 or 3 D space.