Live Geometry with Silverlight 2

Live Geometry with Silverlight 2

Rate This
  • Comments 24

I'm happy to announce a project I started on CodePlex: http://codeplex.com/DynamicGeometry

Live preview at: http://geometry.osenkov.com

Dynamic geometry

In a nutshell, it's an interactive designer for ruler-and-compass constructions - it lets you plot points, connect them with lines, construct circles, intersection points, parallel lines - everything that you usually do with "plain" geometry. But then the magic part comes in - you can drag the points and the entire construction is recalculated immediately - this is why they call it dynamic geometry. The way it works is the program doesn't store the coordinates of figures - instead, it stores the algorithm of their construction. Every time you move any of the points, the entire construction is being reconstructed on-the-fly given the new coordinates of the point using the algorithm stored in memory - that's why I like calling it "CAD with lazy evaluation".

The actual program available online

The application is deployed live at http://geometry.osenkov.com - you'll need Silverlight 2 Beta 2 to view this site. At first, the UI might seem not very intuitive for you - it takes a while to figure out how to use the toolbar and construct tools - but I hope an interested reader can tackle this challenge. The trick is to know the rules how the toolbox buttons work. Plotting points is easy - just select the point tool and click anywhere. Dragging points is easy too - select the arrow (cursor) tool and drag the points. Now, to construct a segment between two points, you select the segment tool, click (and release) the first point, and then click (and release) the second point. See, you specify that this segment depends on two points - every time you drag one of the points using the Drag tool, the segment will update itself accordingly.

The source code is available online too!

I used Visual Studio 2008, C# 3.0 and Silverlight 2 Beta 2. I have to say, those are awesome technologies and a pleasure to use (at least for me).

I split the code into several projects. DynamicGeometry is a class library that provides a framework for defining figures and their interaction. My goal was to allow for extensibility - so that you can just plug in a new kind of a figure, and automatically consume all the centralized goodies - serialization, painting, dependency tracking, transaction system, interaction, etc. Now, the code for almost every figure fits in one screen of text - so I rarely have to scroll when editing these files. SilverlightDG is the Silverlight 2 front-end - UI. DG is the WPF front-end. I try to maintain two projects - WPF and Silverlight - to build from the same sources. So far so good :)

Implementation details

The project is still in its early Mickey Mouse stages and only some very basic functionality is there - however, there is already something that is worth noting:

  • an extensible type hierarchy to model geometric figures - all starts with IFigure and FigureBase
  • a State and Strategy pattern implementations to enable interactive mouse input from the user - different toolbox buttons provide different strategies to handle mouse input
  • a pretty decent transaction system, which enables nested transactions, Rollback, delayed execution, record/playback and, of course, unlimited Undo/Redo
  • a dependency tracking mechanism that allows to express dependencies between figures (i.e. a midpoint depends on two existing points) - I employ Topological Sorting to sort the figure DAG by the dependencies - we first want to recalculate the basic figures, and then their dependents
  • a toolbar that took me many painful hours to design - I highly respect UI designers and think that getting the UI right is more difficult than to implement the rest of the actual functionality. I hope I didn't do too bad, although I'm definitely not a great UI designer.

Silverlight 2 Beta 2

Most probably by this time you already know what Silverlight is all about - if not, www.silverlight.net is a great place to start. I personally believe that Silverlight is our liberation from the old web story and am very optimistic about this technology. While Silverlight 1.0 only allowed JavaScript programmability, Silverlight 2 gives you full experience of .NET and managed languages - C#, VB, IronPython, IronRuby and others (did I forget something?). I think that Silverlight's advantage over Adobe technologies is this rich programming model - the fact that you can use .NET and C# 3.0 for the web client just makes me so excited about this.

Targeting both Silverlight and WPF from same source

If you look closer at my source code, you will notice that I have two projects - the WPF one and the Silverlight one - including the same .cs files. Because WPF and Silverlight use different CLR and runtimes, the project format is incompatible - i.e. I can't include a Silverlight class library in a WPF application. Workaround is relatively easy - just create two separate .csproj files in the same folder, that reference the same sources - and you're fine.

CodePlex

By the way, CodePlex is a quite awesome site for open-source projects - it provides version control (I love TFS and think it's excellent), item tracking, forums, wiki, downloads, stats - all for free and without annoying ads. Codeplex is one of the products that still make me proud to be working at Microsoft.

DG 1.0 - the inspiration

The project that I'm describing in this post is actually based on an earlier one that I've implemented 7-8 years earlier - here's a blog post about my original dynamic geometry project: http://kirillosenkov.blogspot.com/2007/12/dg-10-free-dynamic-geometry-software.html

I'd like to reach parity with the first version - however this is going to be tricky, because it has a lot of different goodies - from analytical expressions to ability to create hyperlinks and compose complex documents. Interestingly enough, I implemented DG 1.0 using VB6 - and though I think VB6 was an awesome environment at that time (I think it's Edit-and-Continue is still better than the one we have in Visual Studio 2008), I feel so much better and more comfortable using C# 3.0 - it just lets me express stuff about my program that I want to express in the way that I want.

I hope some of you have found this interesting. I'd be happy to hear any feedback or advice on this.

Thanks!

  • PingBack from http://www.arjansworld.com/2008/06/19/linkblog-for-june-19-2008/

  • Kirill!

    Good work with new technologies!

    Keep on writing a good code! :)

  • Hoping to replace visio on the web.

  • Very good job! I would have killed to have this for geometry in the school (not to mention playing with 3d geometries in highschool).

    I dont know if you are planning on adding more funcionalities but beeing able to fix angles/segments and to messure angles/segments would be great.

    Thinking on the OCPL this could be a really good app for the kids, specially for those who like geometry :D.

    Ohh, beeing able to changes the lines colors would help with complex drawings.

    I might do some modifications myself.

    Best regards,

    Ignacio

  • Thanks :)

    I just started, so a lot of features are coming, and measuring distances/angles is a high-priority. Also, changing colors and styles is planned too :)

  • Just read in your original post "250 interactive drawings." This is crying for a XmlReader/Writer transform (i.e. writer.WriteNode(reader)), just like one of the MSDN mag authors did with geneology data a while back. Great work!!!

  • Jonathan - that sounds interesting - can you give some more details? I don't quite follow yet... Geneology data?

  • nice..but need draw polygon..

    ^-^

  • Kirill,

    This is just marvellous. I look forward very much to updates. Have you seen swordfish charts. Another nice Silverlight development. I am in the process of using Silverlight to develop learning objects.

    BTW, it would be nice to be able to label points in order to describe the geometry. Also it would be nice to be able to superimpose a coordinate system with axes and gridlines so that coordinates become more meaningful to the user.

    Greg Farquhar

  • very nice ><

    just want ask do u have any idea "How to zoom in or out polyone"

    thx

  • Great blog, good thinking well put.

    Way cool Kirill.

    Not just what dg is but HOW you did it, SL2B2 XAML...

    F# love that you did not forget something; looking for more there.

    Once I have a geometry, how can I map a picture/static image to it, or a video/moving image to it?

    Better yet how can I map images to a dynamic geometry?

    (Hey with 2,4,8,42, ...1024 CPU's and GPGPU's  why not?)

    Peace, Love and Hapiness

  • Hey all,

    thanks for your comments and feature requests. They're all in my queue - coordinate axes and grid are coming soon (pending my home PC returning from the repair shop with a new motherboard), then zoom and pan, then probably editing figure appearance (colors, line widths, etc). Later I'll think about fixing angles/segments given numeric values and/or custom formulas. Linear algebra is not far away too ;) Then probably more transformations (rotation, reflection, translation, etc) and defining your own custom figures. Finally I have some plans about plotting graphs.

    About images and videos - great idea, I'll need to think more about it. Basically, given three points, you could frame an image/video/drawing into a parallelogramm. Just add the visual to the Canvas, and apply a carefully calculated transform to it. I hope I have some time in August to play with it.

    Regards,

    Kirill

  • Hi,

    The CLR of Silverlight (AGCLR) and .NET framework have different names but they are not different.

    The CLR of Silverlight and .NET framework (and thus WPF) are SAME.

    The reason why we cannot reuse the libraries between both is not for CLRs being different, but because the SL framework assemblies have a different public key than the .NET framework assemblies.

  • Thanks Rahul, I didn't know that.

  • It is more often than you would suspect that people have to deal with some sort of dependencies in an

Page 1 of 2 (24 items) 12
Leave a Comment
  • Please add 7 and 2 and type the answer here:
  • Post