Freedom Quilt Demo

Flying Goose

Star

ShooflyMonkey Wrench
Log Cabin
Hourglass
Drunkard's Path
Corssroads
Bear's Paw

Start to do the Freedom Quilt project

Task: Start to do the Freedom Quilt project
Date: 0729-0810

1. User Interface of FQ

1.1 Interface for Moving a Shape
Move (int direction, float distance)
User can specify the direction and distance of the movement.
For now, I use 1, 2, 3, 4 to stand for up, down, left, right. Some better way is needed.

Log Cabin Move (int direction)
Doing Log Cabin is a typical iterative process.
To construct a layer clockwise, the user needs to move the rectangle as below
1, Move down, and then move left
2, Move up and then move left
3, Move up and then move right
The distance of each movement is the same: m_cx / 2 - m_cy / 2, where m_cx and m_cy are the length and width of the rectangle.

To start a new layer, the user needs do something special:
1, Move the rectangle rightward m_cx/2+m_cy/2
2, Move it down m_cx/2 - m_cy/2
3, make it longer by 2*m_cy: m_cx = m_cx + 2*m_cy;
All these are done in the codelet Log Cabin New layer()

1.2 Interface for Reflection
The freedom quilt patterns involve much reflection. So I provide more support for reflection.

StartShapeListReflection(int x_reflection, int y_reflection, float x_coord, float y_coord)
EndShapeListReflection()
The above pair of codelets allow the user to reflect the list of shapes constructed between them.

ReflectionAboutPoint(int x_reflection, int y_reflection, float x_coord, float y_coord)
Reflect the current shape about the point specified by (x_coord, y_coord)

Reflection(int x_reflection, int y_reflection)
Reflect the current shape about the center of the shape

1.3 Add 2 codelets for changing the size of a shape along X or Y dimension
Set X Dimension Size( float percent)
Set Y Dimension Size( float percent)

1.4 Add 1 codelet for inverting the color of a shape, as the freedom quilt involves changing the color of the shape often
Invert Color()

1.5 Select Base Shape(int shape_type)
The base shapes in FQ are: Parallelogram, Quartcirc, Rectangle, Square, Triangle

2. About code reuse

Freedom Quilt (FQ), Mangbetu (MG) and Cornrow Curve (CC) are similar to a large extent. They are tools for manipulating images/shapes.
So I can reuse code when implementing the 3 tools.
MG and CC can use almost the same classes. Not yet. I need to modify the code of CC.
For FQ, I tried to reuse of code of MG. But later, I decided to write a new class for FQ: QuiltShape.java. The reason is that FQ's functionalities are different from MG and CC.
In MG and CC, the moving of the shape is driven by a vector.
In FQ, the moving of the shapes is decided by the Quilt patterns.
So the inside logic of QuiltShape is different from Shape. We need a new class.

3 Pending
3.1 Save and reload file is not working properly. I need to fix this.
3.2 I need to modify the code of CC to make it up to date.

Some Issues in the design of the Mangbetu project

Task: Some Issues in the design of the Mangbetu project
Date: 0715-07281.

1. In the flash version of MG, the vector of the base shape has an initial angle of 90 degrees. So if the user input a starting angle of 45, the vector becomes 135. In today's meeting, Bill said from a math teacher's view, it is better to Not have the initial angle.
So shall we keep or remove this initial angle?

2. In the flash version of MG and CC, when we set the rotation degree as 45, the 1st image itself doesn't rotate but its vector do rotate. For all other images except the 1st one, both the images themselves and their vectors rotate 45. Shall we also make the 1st image rotate to have a consistent behavior?

3. In the 1st picture below, the 1st vector is Not reduced by 50%. It is because the image is duplicated before calling 'Translate by percent'. In the 2nd picture, the 1st vector is reduced by 50%. It's because I modified the implementation and let 'Translate by percent' deliberately changes the previous vector. This way looks nice, but the meaning of duplicated is not clear: the duplicated image will be changed by a later method calling.
Which way shall we take: the way in the 1st picture or the 2nd one?4. The order of the codelets
The 3rd picture is for showing 'Rotate before Translate' and Do Not change duplicated image.
The 4th picture is for showing 'Rotate before Translate' and Do change duplicated image.
So in our programmable version, the order of the codelets matters.

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

Implement Plait as a PObject

Task: Implement Plait as a PObject
Date: 0701-0714.
In the previous Cornrow project, the main class is Curve, which is used to create the braids as dynamic objects. Curve is not a PObject and the PMethods are all of and in the CCEngine.
We need to modify the old design to make CC programmable.

The change: A new class Plait is added into CC.
1. Basic things about Plait
1.1 Plait is the composite unit of a braid. It is implemented as a PObject. So users can create a new plait by clicking 'create' in the menu, and created plaits will appear in the object panel.
1.2 Selecting a plait can be done in 2 ways: 1, click the plait on the draw panel. It is implemented in Plait.HitTest. 2, click the plait from the object panel. It is in Kernel.
1.3 About draw braids consisting of multiple plaits
I added a class: PlaitImage.The difference between Plait and PlaitImage is: Plait is a programmable object, users can get plait images by the PMethods it supports. In contrast, plait image is only a image for drawing. It is not a PObject.

2. PMethods in Plait
Currently, Plait has the following PMethods:
Duplicate
NextStep: the method for braiding
StartBraiding
GoToStartingAngle
Reflect
DilateByPercent
SetSize
TranslateByPercent
Rotate
SetColorSetImage: currently only take a String in the format of a '/'-separated path name that identifies the resource.

3. Things to be disscussed
3.1 StartBraiding VS GoTo, StartingAngle, + Reflect
Firstly, I added GoTo, StartingAngle, and Reflect for letting the users set up the starting parameters of a braid. But, then there is a problem: Reflect should be called as the last method for setting up the starting parameters. Orelse, reflection can't be done correctly. In the piecture below, the left braid is the original one, the right braid is the one got from reflection about the Y axis. The reflection is not correct, since when the reflection takes place the starting angle is the default 0, not the 90 degree later input by the user.It is possible to change the code to fix this. But which of the 3 ways should we have: only StartBraiding, only GoTo, StartingAngle, + Reflect, or both?
3.2 StartBraiding and Duplicate
Currently, StartBraiding only changes the position and angle of a plait. Users need to call duplicate to have the 1st plait image. Should we have StartBraiding do the duplicate itself?

4. Bug
When the application runs for a while, the texture of the plaits disappear.

Applet, Bug and Issue

Date: July 1

1. I updated the applet at: http://www.cs.rpi.edu/~wangp5/CC/CCAppletLaunCS.html
But the applet has a bug and a pending issue.

2. Bug
If the braids are loaded from a saved file, then after resizing the window the texture of the braids is lost. I will try to fix it within the next week.

3. Pending Issue
Prof. Moorthy and I did pair programming this morning. We discussed the issue of identifying multiple objects, specifically braids. We saw that in Scratch, users can select sprite in the right bottom panel. Jason has added such a panel, and in SB objects are shown in that panel.
But in CC, braids are not shown in the panel. It seems good if users can select braids to apply methods on in the panel. I will try to implement this with help from Jason and Shrikant within the next 2 weeks.

In Scratch, users can select sprite in the right bottom panel.


In SB objects are shown in the right bottom panel.

Add reflection and some methods to Cornrow Curve

Task: Add reflection and some other methods to Cornrow Curve
Date: 0624-06301.

1. Add the functionality: Reflection about X-axis, Y-axis or both
The logic for adding reflection is in Curve.DrawBraid.
To support reflection, I added a variable image_angle.
Now we have 3 angles for one cornrow curve: image_angle, vector_angle and rotate.

• image angle is the starting angle of the Y image.
• vector angle is the starting angle of the vector of the Y image.
• rotate angle is how much the Y image rotates per iteration

2. Add Duplicate
Duplicate takes one parameter: the ID of the original braid. Then it creates a duplicated braid with the next braid ID, which is the size of the braid vector + 1.
The duplicated braid is in the same place with the original one, so to see it, we need to use "Move To" or "Reflect" to move it to somewhere else.


Demo of Reflect and Duplicate


3. Add the following methods:

• BasicNewBraid which only takes Iteration, X, Y, and Slope
  
• Starting Dilate
  
• TranslateByPercent
• Rotate
• Dilate

Demo of the new methods

Issue to discuss:
In these new methods, I use ID to identify the braid that the user wants to apply the methods on. One reason I use ID is that I saw in Scratch, they have sprite1, sprite2...
But will the concept of ID prevent kids from using Cornrow Curve?

TODO:

• Colored Braids