Shine Draw

Kaleidoscope is an attractive toy for me when I was young. You can use any image you like and it will produce many amazing effects via mirror reflection.

You won’t be able to figure out the original image if you don’t download the source now~

Comparison

Flash implementation: 40 minutes  
Silverlight implementation: 1 hour 30 minutes (Implemented First)
What’s the difference?

• Triangle Mask: mask [AS3] vs PathGeometry [C#]

Source codes

•   Kaleidoscope [Flash 9, AS3] (146.2 KiB, 1,604 hits)
•   Kaleidoscope [Silverlight 2, C#] (175.1 KiB, 1,419 hits)

Silverlight

Triangle Mask: mask [AS3] vs PathGeometry [C#]

The Kaleidoscope is created by masking an image with a triangle and duplicating the masked images.

// AS3
// Create a triangle mask
var mask : Shape = new Shape();
mask.graphics.beginFill(0x000000);
mask.graphics.moveTo(0, 0);

// add the triangle points
mask.graphics.lineTo(100, 100);
mask.graphics.lineTo(0, 100);
mask.graphics.lineTo(0, 0);
mask.graphics.endFill();

// mask the current object
this.mask = mask;

// remember to add the mask to the stage
addChild(mask);

In my previous article Water Effect, we have discussed how to clip the object easily using Ellipse or Rectangle. However, if you want to clip the object using irregular shape, some more work has to be done. Below is a demonstration.

// C#
// Create a path geometry
PathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.IsClosed = true;
pathFigure.StartPoint = new Point(0, 0);

// add the triangle points
PolyLineSegment polyLineSegment = new PolyLineSegment();
polyLineSegment.Points.Add(new Point(100, 100));
polyLineSegment.Points.Add(new Point(0, 100));
polyLineSegment.Points.Add(new Point(0, 0));

pathFigure.Segments.Add(polyLineSegment);
pathGeometry.Figures.Add(pathFigure);

// clip the current object
this.Clip = pathGeometry;

Shares and Enjoy~

Did you like this post?

Subscribe here: