Drawing Lines in WPF-Forms with crayon-shader? - c#

we have a project at university where we have to create fractals that are controllable by the user (with kinect). We are still in an early phase where we evaluate some ideas (though we already got some working prototypes). Our idea right now is to use a blackboard-image as background and draw the fractals on top of it. To make this look more natural we'd like to use some crayon effects on the lines we draw.
Our internet-research produced two main ideas to achieve this:
Paint an image of a photoshop-like brush for every moueposition of a line.
Use shaders on drawline-functions.
The first does work for an early test, but looks awful. I guess the latter would be the best approach, but the information in the internet seems to be lacking regarding this topic. At least I didn't find anything that really helped a lot. The Questions is:
Has anyone links or general tips on how to achieve this effect, or is it not possible in C#/WPF. Might there be an even better way? And how can I apply a created shader to drawline-method/brushes?
Thanks in advance and kind regards
Michael


EDIT
Nice tip from #Bradley Uffner ! (unfortunately he deleted his answer)
There is a tutorial here on how to achieve such effect :
http://alastaira.wordpress.com/2013/11/01/hand-drawn-shaders-and-creating-tonal-art-maps/
Another thing I've found recently which might interests you :
http://blogs.msdn.com/b/hemipteran/archive/2014/03/26/generating-noise-for-applications.aspx
I've didn't read well the title of your question, Windows Forms do not support shaders at all.
Be more specific about the meaning of a crayon shader
Regarding using shaders in WPF, you cannot apply them at a line-level but on a Control level instead.
This the class representing a shader in WPF:
http://msdn.microsoft.com/en-us/library/system.windows.media.effects.effect(v=vs.110).aspx
What I suggest
use an Image and set its Source property to use a WriteableBitmap
use the excellent WriteableBitmapEx library to easily draw on it, basically it's the WriteableBitmap in WPF but with many extension methods for drawing lines, circles, rectangles etc ...
then apply your shader to the Effect property of Image
For developing your shader
Use Shazzam, it allows you to develop an HLSL shader for WPF in a cool interface, preview it instantly and it will generate the Effect class ready to paste on your project.
There might be a couple of interesting shader for you in DOSBox SVN-Daum
Here's an example of the cartoon shader :
Obviously there will be quite some work as copy-pasting the shader to Shazzam won't work right away but you'll know what are the maths behind achieving the effect.
Mark the answer as accepted if you are satisfied with it :D if not edit your question and add more details.

Related

How to change the color of an Image

I am a decent winforms programmer and I have done a little programming in XNA, I am trying to learn WPF.
I have a bunch of greyscale images that I want to add color to dynamically. to do this in XNA is easy simply indicate the color you want to use in the SpriteBatch.Draw method
SpriteBatch.Draw(Image,0,0,Color.blue)
Or something like that. That would draw my greyscale image with a blue hue to it. The purpose of this is to change the look of an Item, without having to draw them all manually.
I can't seem to find a good option in WPF

Ok, well I hope your are a decent ... programmer. This kind of image processing in WPF is not for the feint hearted. You certainly can't do it with the same ease that you displayed in your question example. Your best bet is to use someone else's code to do it for you. Please see the following articles for further help:
Image Processing Lab in C#
Image Processing is Done using WPF
If you're really hardcore, you can even plug High Level Shading Language (HLSL) pixel shader files into WPF to create all sorts of crazy visual effects. See Chapter 13 of the wonderful WPF Control
Development UNLEASHED book online for a great introduction to this subject.

How would one go about creating one’s own graphics effect in WPF?

I have an Image object in my application which the user can drag around. The object displays an image which is partly transparent, so the window background (which is itself a bitmap) can be seen through it.
I want to add a graphics effect to this object. Assume that I already have an algorithm for this effect — that’s not the issue. The issue is how to get this algorithm into WPF.
So I tried to look at how DropShadowEffect works, but the implementation displayed in Reflector is empty. I also tried to look at what methods from the abstract classes Effect and ShaderEffect I should override and there doesn’t seem to be anything related to actually rendering an effect.
So how do I create my own effect?

The best and fastest way is to use pixel shaders (supported starting with WPF 3.5 SP1 I think) . It will require some shader language (HLSL) knowledge, though :-)
Here is a tutorial: How Do I: Create Custom Pixel Shader Effects for WPF
a library on codeplex: Windows Presentation Foundation Pixel Shader Effects Library
an article with .NET 4 information (including Sliverlight support which has it too): SilverShader – Introduction to Silverlight and WPF Pixel Shaders

A very cool tool (and resource) is Shazzam it will help you to create the effects and it contains a nice tutorial.

WPF/C#: WPF Path Maker Tool/Sample?

I am just wondering if it's possible to create a WPF application that allows users to use a certain pen to plot directions to make a certain path and able to display the path data.
The idea is almost the same with this one: http://blogs.msdn.com/b/gavingear/archive/2007/02/15/intoducing-pathmaker-a-tool-for-creating-path-markup-for-wpf-e.aspx
I also found a good sample where I can draw lines and stuff inside the canvas: http://www.codeproject.com/KB/WPF/WPF_DrawTools.aspx
I'm just looking for a good head start. Any suggestions?

Jesema is another one that might be helpful for you:
http://marlongrech.wordpress.com/jasema/
If you want something where you can draw stuff inside a canvas, there's livegeometry
http://livegeometry.codeplex.com/
but that one has the path data abstracted away (that's more similar to your draw tools example).
Hope those help!

I know this question is quite old, but I found that Inkscape supports save to XAML.
See this article: http://www.software-architects.com/devblog/2008/01/13/Graphic-In-XAML-And-WPF

C#/.NET: Creating Dynamic Visuals in C#

NOTE: I am not exactly sure how to title or tag this question, so if you have any ideas, PLEASE help!
I'm currently envisioning a few possible projects that involve dynamically rendering something (whether it is a point, a line, text, or music notes on a staff, for hypothetical example), but, if I were to undertake these projects, I'm not really sure how to approach this design. What I'm curious about is sort of how programs like Word, or Geometer's Sketchpad, or Finale, create a blank "canvas" and render text, geometry, or music on it, respectively - how can this be done in C#, or in .NET, in general?
First of all, what is the best framework/platform to use: WinForms, WPF, something else? I'm open to many options, as I'm just trying to understand the different ways this can be done.
Next, how can I create such a "canvas" (if we go back to that metaphor) using the different frameworks you answered for part 1? And also, how can I render stuff onto it?
I hope my question isn't too confusing or n00bie. I just don't know how to approach such a prospect. Thanks!
UPDATE: I have now posted a follow-up question which is less broad. I have provided an hypothetical example of what I would like to accomplish. However, I will still accept an answer here, even though my question isn't fully answered.

WPF would probably suit your project well. I like the book Pro WPF in C# 2008: Windows Presentation Foundation with .NET 3.5, it covers most of the topics you're asking about.
You'll probably get better answers with a more focused question. The scope of your question is too large to be answered easily or concisely.

WPF makes it easier to refactor designs for such a project by easily moving shape drawing code between just drawing simple shapes and contents of controls. If you need the richness of custom controls, WPF allows a fairly smooth transition.
Most of the graphics can be defined in XAML which means you can export them from programs like Illustrator or anything that generates the standard SVG vector graphics, via an SVG-XAML converter.
I like WPF Unleashed and it has a nice discussion of 2D graphics and how to use the DrawingContext class for such a visual editor.

Do you know that there's an event called Paint? Everytime Windows OS needs to displays or repaint something on your form, this event is triggered. So, you create a Paint event handler, and everything is possible in that. For eg:
Word: you have a WordDocument data structure with the formatted tags and stuffs, you paint each character/ each word or each block of words one-by-one using a desired brush/paint and font. You might also wanna paint your background and stuff... If, for example the user change the font of 1 particular block, your WordDocument must change something to reflect that font change. And then you do an myForm.Invalidate() to repaint your form (and thus update your font). => Dynamically update your GUI.
Sketchpad: you need datastructures such as Line, Point, Triangle, etc. And then, each time OnPaint is triggered, you paint it dynamically. E.g: myGraphics.DrawLine(..), myGraphics.DrawCircle(..)
Similarly to Finale.
One thing you should do is to handle your data structure and drawing classes carefully, and instead of drawing everything in your OnPaint() method, you create several DrawMe(..) methods in your entity classes, and ask them to draw themselves. E.g: myCircle.DrawMe(..), myScore.DrawMe(..)
Hope that'll help,
Ben

There is no universal answer to your question - it is too generic.
Are you talking about dynamicly created controls, standard UI components (dropdowns, buttons)?
Is it vector graphics - like in drawings, or may be it is 2D image processing - or is it 3D?

Animation effect in .NET?

Can someone point me to a C# open source implementaion with a simple image animations.
e.g. I feed the input image to animator, and the animation code produces a few dozen of images which if displayed sequentially looks like animation.
I am not something extremely fancy - a simple DirectX filter like animations would do.

You would be look for a sprite then? Microsoft has tutorials on this including:
http://msevents.microsoft.com/cui/WebCastEventDetails.aspx?culture=en-US&EventID=1032273446&CountryCode=US
and general graphics in C# here:
http://www.microsoft.com/events/series/msdnvisualcsharp.aspx?tab=webcasts

Hmmm... I'm not sure if this is what you want, but I've have created a library called Transitions that lets you animate most properties of UI controls easily. You could use it to move the position of pictures, transition between pictures or grow and shrink pictures. But I'm not sure that this is exactly the effects you're after? Anyway, if it's any help, my library is here:
http://code.google.com/p/dot-net-transitions/

Categories