Wednesday, July 28, 2010

Start to do the Mangbetu project

Task: Start to do the Mangbetu project
Date: 0715-0728

The Mangbetu (MG) and Cornrow Curve (CC) have much in common. Their user interfaces of their flash versions look almost the same, except that Mangbetu supports 2 additional functionalities: Select Base Shape and Reflection per Iteration.

As a result, I can reuse the code of CC and just rename the classes for MG:
CC.Plait.java -> MG.Shape.java
CC.PlaitImage.java -> MG.ShapeImage.java
CC.CCUtil.java -> MG.MGUtil.java

I also had to support the additional functionalities of MG.

1. Select Base Shape
In MG, users can select from 6 base shapes with different properties.
So I add a property file MG.properties and MG will load the right properties when the user switch base shapes.
The properties of the base shapes are:
1.1 Image file
Changing image file is similar as that in CC: done by loading the corresponding resource file.

1.2 The shapes are not all square. So I add x_size and y_size parameters for specifying the size of the image in the x and y dimensions.

1.3 Default Color

1.4 Initial Vector Angle in Degree

1.5 Initial Image Angle in Degree

1.6 The anchor points of their vector are also different.
Shape Vector's Anchor
Diamond middle bottom
Side Face somewhere in left edge
Flange center
Triangle center Oval centerFace center

2. Reflection per Iteration
2.1Reflection the Image about X axis per Iteration is done by:
gl.glScalef( 1.0f, -1.0f, 1.0f);
Reflection the Image about Y axis per Iteration is done by:
gl.glScalef(-1.0f, 1.0f, 1.0f);Reflection the Image about X and Y axis per Iteration is done by:
gl.glScalef(-1.0f, -1.0f, 1.0f);

2.2The tricky part is that the computation of the image center from the vector's anchor, which is done according to the rule below. The red arrow is the vector that stands for the shift from the vector anchor to the image center. We call it shift vector.

2.3 To support rotation, we also need to rotate the shift vector accordingly.


3. Simple Demo
Parameter Setting:
Translate by percent: 50
Dilate by percent: 90
Reflection about Y axis

No comments:

Post a Comment