Using the Line element and some Random math I have created a paint splatter brush effect. Use the color palette at the top of the example to change color and then draw using the mouse.
To create this effect, I plot lines one after the other using the Line element. Starting from the mouse co-ordinates and then using Random math to plot each further point. The length and size of each splatter is also set each time using Random math.
To create a line using the Line component:
To create a new line we perform the following
Create a new Line and call it Line1…
Line Line1 = new Line();
Set the start co-ordinates of the line…
Line1.X1 = 0;
Line1.Y1 = 0;
Set the end co-ordinates of the line…
Line1.X2 = 10;
Line1.Y2 = 10;
Add the line to the page…
LayoutRoot.Children.Add(Line1);
You can see another post I made on building a Paint Application here.
To get a Random number we use the following code in C#:
First define the variable…
private Random NextDouble = new Random();
Then each time you want a new Random number perform the following…
NextDouble.NextDouble();
This value will be of a double figure between 0 and 1. To get a specific range of random numbers we need to multiply this value.
To get a Random number between 0 and 100…
NextDouble.NextDouble() * 100;
To get a Random number between 50 and 100…
(NextDouble.NextDouble() * 50) + 50;
Grab the Source
As always, you can grab the source files to this post here.
Tags: Brush Effect, C#, Colour palette, Designers, Developers, Drag, Effects, Mouse position, Paint, Paint Splatter, Random, Silverlight 3, tutorial, User Input
Two great tools in Silverlight are the Projection properties and the InkPresenter, so what happens if you put the two together? Well, maybe something like below. Use the mouse to draw within the Silverlight area.
In this example I have used the InkPresenter to capture the mouse and produce vector paths. I also have a basic interface to change the colour and path size. I then use that captured data to duplicate the vector path upon 16 faces each rotating around a common point using the Projection properties.
The Projection properties in this example have been created inside Expression Blend using a storyboard activated by behaviors.
The InkPresenter control is this example has been created inside Expression Blend, but we need to do a bit of work in the code behind file to record the data and convert it into a visual path. You can read more about this process in this MSDN article.
Grab the Source
As always, you can grab the source files to this post here.
Tags: 3D, Animation, C#, controls, Designers, Developers, Direction, Effects, Expression Blend, Fun, Mouse position, Paint, Projection, Rotation, Silverlight 3, tutorial, User Input
Today I want to show how easy it is to produce a basic 3D object in Silverlight, in the below example I have used 5 circles to produce a sphere animation. I treat each circle with a looping Projection Transform.
Each circle is treated with the exact same treatment but offset so that they form a sphere, to break out each circle press the ‘
Break Apart‘ button. To fit the circles together again, press the ‘
Place Together‘ button.
You can enhance the 3D effect further by pressing the ‘Spin‘ button, this simply plays a storyboard to spin each circle on an additional axis.
To create this effect I have used the Projection Transform Rotation properties and used Easing on the animations inside Expression Blend 3 to help the inertia look right.
Grab the Source
As usual you can download the source files for this example here.
Tags: 3D, Animation, Designers, Direction, Effects, Expression Blend, Projection, Rotation, Silverlight 3, Sphere, tutorial