point light animation in WPF

Question

5.00/5 (1 vote)

See more:

Hi,

I want to make a animation in which a point of light is travelling across a path in WPF.

I have tried finding how to do this; can you please help me regarding this.

I have simple path animation working, but not the point light travelling along it.

Thanks in advance.

Posted 19-Apr-11 23:22pm

Nabhaite

Updated 20-Apr-11 21:44pm

Dalek Dave

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 20-Apr-11 13:24pm

Funny idea (no matter what the purpose is), my 5.
--SA

Dalek Dave 21-Apr-11 3:44am

Edited for Spelling and Readability.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2011-04-20T07:23:00

Solution 1

You need to create a semi-transparent object representing darker area and a fuzzy-edged "hole" in the center of it pictured as a highly-transparent area. Call it a "mask" object. It should be at least two times the size of your biggest canvas in both directions. Place this object on the canvas in a Z-order to be on top of all other objects. Animate the position of this mask object. Unused part of the mask object will be clipped off by the bound of your canvas, and the "hole" area will be perceived as a cast of a flashlight.

Play with the color and balance transparencies of the mask object to achieve realistic effect.

[EDIT]

For a simple mask object you can use just a bitmap (using, say, PNG with transparency). A vector mask object would be more convenient (scaling, etc.). You can draw it with Inkscape vector editor: http://en.wikipedia.org/wiki/Inkspace[^], highly recommended). The vector format is SVG (http://en.wikipedia.org/wiki/Scalable_Vector_Graphics[^]), use conversion to XAML using Inkscape (do not use features not supported by XAML such as fuzziness; a fuzzy transparency is different: it can be done through gradient in alpha channel).

—SA

Posted 20-Apr-11 7:23am

Sergey Alexandrovich Kryukov

Updated 20-Apr-11 21:57pm

v4

Comments

Nabhaite 21-Apr-11 1:53am

Thanks man. But I would really appreciate if you could please help me with code. what would be the code for doing above mentioned stuff. Thanks again.

Sergey Alexandrovich Kryukov 21-Apr-11 2:45am

Before we discuss it, please tell me: did you vote 3 just because I did not post any code? It could be some hours of work...
--SA

Nabhaite 21-Apr-11 3:00am

No. I just accidently put it. I am sorry for that and I even gave 5 the very next moment. I didn't mean to hurt you.

Nabhaite 21-Apr-11 2:58am

No. I just accidently put it. I am sorry for that and I even gave 5 the very next moment.
I didn't mean to hurt you.

Nabhaite 21-Apr-11 2:59am

I am new to codeproject, this is my first quesstion and now I should have replied instead of adding next comment...oops.

Sergey Alexandrovich Kryukov 21-Apr-11 3:18am

No problem at all, thanks for the vote.

Here is the problem: I know my idea would work, the implementation really will need time. I cannot afford it right now (we are all volunteers working for free and busy with our own problems, so big works are very unusual and only if an expert is extremely interested). Highly demanding people are simply ignored.

What works with CodeProject is collaboration, when the most interested party does most time-consuming work. In such cases experts can help. I often write real code, but for few minutes each usual case, with rare exclusion.

Do you want this effect over some canvas with some objects or over the hole Window. I'm starting the think this would be possible too. One simple solution would be using just a bitmap for a mask object, not a vector (PNG with transparency)...

--SA

Sergey Alexandrovich Kryukov 21-Apr-11 3:23am

See my update above (after [EDIT]).
--SA

Nabhaite 21-Apr-11 3:31am

I have an image and I drew its path using inkscape software and saved it as .XAML so it gives me the cordinates of my desired path. On this path a small rectangle is moving throughout the path(we can set the time taken by rectangle to cover path and adjust size, color etc for rectangle). I want point light sort of thing rather than the rectangle I currently have. I know this is some heavy work....But Thanks a lot really for your help SAK!

Sergey Alexandrovich Kryukov 21-Apr-11 3:48am

You're welcome.
Can you formally accept this Answer (a green button :-)? as I think it is correct.
Feel free to come back for extra help when and if you face a problem.
--SA

Nabhaite 25-Apr-11 2:44am

Hi SAK, can u please provide me with the code or provide me with simple steps on how to do it. I didn't get it actully. Thanks man

Sergey Alexandrovich Kryukov 25-Apr-11 3:16am

I'm not sure. I needs time which I don't have right now. Can you start by yourself and proceed until you face a serious problem and pass what you have?
I don't know what can cause a big problem right now...
--SA

Nabhaite 25-Apr-11 3:35am

yes I can start by myself but can u please just tell me steps like what I have to do.
I read your links on wikipedia regarding inkscape and SVG. I am a beginner in coding.
I really appreciate your help and concern.

Sergey Alexandrovich Kryukov 25-Apr-11 3:50am

These techniques are not for a beginner, but you can try. You should start with application without the point light. First you need to create a canvas and the scene you want. Test animation with some usual object (like a Rectangle). There are a lot of animation samples. This part should be a prerequisite for everything extra, because it wasn't a part of your question.

Then find a way to put XAML in resource dictionary. Put your image there. Read on using resource dictionary and objects from them. Add you mask image from resource dictionary to the canvas.

You still did not ask if canvas is good enough for you. Perhaps you need only purely graphical object is canvas, but may be you also need controls.

You did not say anything about functionality you need and the purpose of all that.
--SA

Nabhaite 25-Apr-11 5:48am

I have the project in which I added a path(this path, I got after I extracted it from a image through inkscape) and on this path a rectangle is moving. It is on a canvas. I want a light moving instead of that rectangle. Its a effect which I need on a text(words) on my page in WPF.

Nabhaite 25-Apr-11 5:50am

And I have resource file in which I am putting all the cordinates of that path which are generated by Inkscape. the data is read from resource file.

Sergey Alexandrovich Kryukov 25-Apr-11 10:08am

OK, it looks like your doing it right, just need to proceed...
--SA

Nabhaite 26-Apr-11 1:52am

I have code for rectangle animation working with me, can u pleaas tell me what to do for point light instead of that rectangle animation. My rectangle animation is working fine, just need to know how to get point light. I am using following code for point light but its not working <viewport3d> <modelvisual3d><modelvisual3d.content><PointLight Position="4.5 4.5 4" />  <viewport3d.camera><PerspectiveCamera Position="4.5 4.5 30" LookDirection="0 0 -1" UpDirection="0 1 0" FieldOfView="22.5" />

Sergey Alexandrovich Kryukov 26-Apr-11 11:07am

If it based on 2D imaging if 3D?
--SA

Nabhaite 27-Apr-11 1:40am

It is a 2D image. It is a text image actully, it is a word written in a fancy font with a yellow background. And I am generating its path from inkscape and using in resource file. (On the characters in that word I want my point light moving)

Sergey Alexandrovich Kryukov 27-Apr-11 14:54pm

All right, from this point it should not be a problem. Did you try animating any property of any object? It is not a big problem; and the animation of the spotlight is not different. What is the problem? 3D calculations based on camera positions, etc.? This is pure geometry you need to know, nothing specific to WPF.
--SA

Nabhaite 28-Apr-11 2:30am

Can u please tell me the code for it,,,my animation and camera code is not working at all. I used the code from this link
<---http://msdn.microsoft.com/en-us/library/cc500322.aspx--->
But its not working, neither it is givivng any error. I put it in my xaml page, but no light effect comes. Please help bro!

Sergey Alexandrovich Kryukov 28-Apr-11 2:39am

Can you understand this is a good amount of work; and it's your work?
--SA

Nabhaite 28-Apr-11 2:50am

yes u r right, and I m trying. Anyway thanks for ur time.

Dalek Dave 21-Apr-11 3:44am

Very Good Answer indeed!

Sergey Alexandrovich Kryukov 21-Apr-11 3:47am

Thank you, Dalek.
--SA