fignewtron was here

This morning I opened up my MIX 10k entry code and worked the pendulum class into a Behavior.  I can now drop the LateralPendulum Behavior on any Canvas.  The Behavior will animate the Canvas.Top and Canvas.Left properties of each Child element in the Canvas.  If more than one pendulum Behavior is attached to the Canvas, it adds up the X and Y calculations so that different types of pendulums can be simulated.  I have a test page for now.  The code needs some refactoring and that is more than I want to do on a Saturday morning.  So I'll have to post up the code and another post about it later. 

Here is the test page: Pendulum Behavior Test.  This shows an Ellipse set on a Canvas.  The Canvas has 4 LateralPendulum Behaviors attached which add up to represent a circular pendulum.  It seems to get close to 60 frames per second so I decided to make it look a little smoother by setting the MaxFrameRate to 30 and by tweaking the animation timer a little.

Here is a quick note about VS2010...there is a built in code snippet, propfull, that you can use to have the IDE create the backing variables for you.  In VS2008 I had to use my own code snippet that I called propf.  Now that is very cool that VS2010 has the snippet.  But a little bit creepy that it is so close to the one I used and it does exactly the same thing!!  Also, the nerd+art snippets for creating Dependency Properties in Silverlight/WPF seem to have some new cousins - propdp, and propa.

If you found this blog entry, then you probably found it through my MIX 2010 10k Challenge entry.  The link to my application in case you are actually reading my blog should be here soon is here.

In grade school, I got to go on several field trips to the Oregon Museum of Science and Industry (OMSI - www.omsi.edu) .   OMSI used to be located up by the Portland Zoo in those days.  The exhibits were a bit different too.  But I recall going there and seeing the pendulum drawing table.  It was this pen suspended from a pendulum and there was a drawing surface also in motion.  You could push it around and watch different interesting shapes appear from the motion of the pendulums.  This immediately came to mind when I decided to write something for the 10k challenge.

The name for this device is the harmonograph.  The short definition is that it is a device for creating geometric images using pendulums.  A pendulum is any kind of weight suspended by something like string so that it can swing freely.  Pendulums are thousands of years old and used throughout history.  Harmonographs were invented and gained popularity in about 1890.

There is a Silverlight article about animation techniques that uses a pendulum (www.silverlightshow.net/items/Custom-Animations-in-Silverlight.aspx).  I went to that example first.  The formula for that pendulum required solving a differential equation.  So, while the article is great for illustrating how to simulate a basic lateral pendulum in Silverlight, it still wasn’t quite enough about how to build a better harmonograph.

What I really wanted to do was break away from the profile view of a 2D pendulum and show animations for the paper and the pen.   The obvious physics engine for Silverlight is the Farseer Physics engine (www.codeplex.com/FarseerPhysics).  However, the source code for this project had to be limited to 10k.  Adding the assemblies for Farseer makes the whole project go way over 10k.  So, before trying it, that was also out the window.

My research led to a very simple mathematical solution.  Based on more internet research, I found a great little book, “Harmonograph: A Visual Guide to the Mathematics of Music” by Anthony Ashton (www.woodenbooks.com/browse/index.php).  Wikipedia also had the basic formulae and explanations I needed (en.wikipedia.org/wiki/Harmonograph).  The basic formula for a lateral pendulum with the assumption that air or other forces in addition to gravity will slow down the motion over time is:
x_t= A_tsin(f*t + p)*Exp(-d*t), where t=time, A=amplitude, f=frequency, p=phase, and d=damping factor.

It looks daunting but in practice, it’s pretty basic.  For each point in time, 0 to 100 for example, calculate the X point of the lateral pendulum based on the A, f, d, and p of the pendulum.  This is for a single pendulum.  To get an x,y position for a two pendulum system, you apply the same formula and solve for the Y point.  There are two pendulums for the pen and two for the paper.  So, there are four calculations for each value of time. 

One of the things I found in my research was a frequency given but not a length.  If I had more than a 10k limit you would see form fields to enter the length instead of the frequency.  Amplitude is simply the angle from the resting position of the pendulum.  Frequency is a measure of the time it takes the pendulum to swing once and is estimated using the formula:  2pi*Sqrt(Length/Gravity).  This is the simpler version of the formula because larger Amplitudes affect the frequency over time (hence the more accurate differential equation).  Gravity is assumed to be 9.807 m/s².  The simplest way to understand frequency is that it is the cycles per second the pendulums travels (1Hz = 1 cycle per second).   Damping is the affect of friction on the pendulum by air.  The larger the damping factor, the sooner the pendulum swings will slow down.

The Silverlight simulation I wrote for the MIX 2010 10k challenge is the first I’ve seen of a harmonograph.  Most of them found on the internet are written in JavaScript.  Another simulator out there worth mention is from Michael Croucher.  He wrote a simulator using the Wolfram Demonstrations Project (demonstrations.wolfram.com/SimulatingHarmonographs/). 

The big differentiator with this Silverlight version is that you have to wait for the drawing to finish and you can enjoy watching it reveal the final shape.

Here is the full version of this application with the setting editors and isolated pendulum displays.

This is what the 10k application looks like.

Being a Silverlight developer in the trenches, I think about this workflow issue that designers and developers have.  Almost every day at work.  A good interview with Mike Wolf from Cynergy explaining some best practices can be found here: Designer / developer misconceptions podcast.  I'm sure that the workflow he describes works well at Cynergy.  However, I'm not so convinced that designers can work in Blend successfully.  At least not on their own.  They need a lot of help from developers.  I work with several "designers" who do prefer tools that allow them maximum creativity.  The reason I just put the word "designers" in quotes is very simply that to be called a designer at some software companies, it would require the type of knowledge like designers at Cynergy have.  One perception that works against the typical designer is that Adobe software like PhotoShop, and hardware like Mac laptops are the best toolset for them.  If they are going to use Blend, they either need to run it in Parallels Desktop for Mac or have another separate Windows machine.  So the demands on designers with the new capabilities in Expression Blend are pretty high.  On the other hand, when technology changes and languages for software change, as a developer I'm constantly having to stay current with the tools and techniques.  Why don't designers think they have to keep up to date?

I listened to the podcast and wrote down what I interpreted (not a transcript).  It will probably come in useful when I'm working on improving the workflow at my current employer.

My Notes:
Mike Wolf - Principle Developer for Silverlight and WPF Practice at Cynergy
interviewer - Erik Mork of Spakling Client
Misconceptions of the Designer Developer Workflow

Designers think in different ways than developers.  Designers think in layers instead of controls and functionality.  At Cynergy designers work with developers by assisting designers using Blend with direction on control development.  Developers need to constantly think about performance.  Complications during the design of Silverlight applications need to be re-worked to create better performing solutions.  The single hand off doesn't work.  There has to be communication back and forth throughout the entire process.

The physical proximity of the designer to the developer is ideally in the same or near same time zone and can be made easier with use of instant messaging.

Fireworks is a popular design tool to use for exporting design into Blend.  Designers currently do not live in Blend.  They live in PhotoShop, Illustrator, Fireworks, or other tools like those.  It is an unrealistic expectation to have designers work entirely in Blend.  A migration step from the favored design tool to Expression Blend is the normal process.
A designer will go into Blend and make small changes, but will go back to their favorite tools to make larger changes.  The migration step using Blend can happen more than once.
Photoshop drop shadows turn into drop shadows into Blend.  Inner glow, on the other hand does not convert via an import to Blend.  Designers need to understand the limitations of Silverlight enough to know what to avoid but focus on not loosing creativity. There is no inner glow for html, but there are hacks for it.  The same kind of hacks made for html need to be made for Silverlight.  Knowing your toolset but demanding your experience in design comes first.

It is often thought that the designer is only working with one workflow.  The developer has to wait for design assets or changes, or vice versa.  There are actually ways to better structure sharing of resources.  Merged resources and merged dictionaries in Silverlight.  The Visual State Manager is also a powerful tool to be able to do states.  The designer can work with those states within Blend working hand in hand with the developer.

There has been a big switch in the evolution of rich technologies.  The old way was based on developers trying something to see if it would work first.  Once it was working, a designer would attempt to cover the developer's idea of the user experience.  Now it is driven by a front to back approach where the experience drives the development requirements.  Specific requirements can be made into wireframes, then comps, then the developer works with final comps.  Xaml is handed over by the designer based on the comps so the developer can begin working on implementation details.  The designer does more work up front to determine the actual user experience details before handing comps with those details to the developer in the form of comp documentation as well as Xaml in a Blend project.

Yesterday, we released an update to a features guide about bing.com.  This was a really fun project that took some time and the efforts of several people to complete.  There is some attention being drawn to the new features in bing.  This morning, a search on Bing.com for "discover bing" returned the updated site as the 2nd result.  I saw the same ranking on Google too ;)  There was a surprising article from All Things Digital that even embedded three feature videos from the new site. 

The site is located here. Below is a screen shot of the site.  I have to say that I really enjoyed working with the designer on this project.  The look and feel that he created was exceptional and I think there was even more he was able to design that was just outside the realm of what we could capture in the final application.  Still, with great design, Silverlight 3 was the right tool to bring it to life.  Check out the animations when the site loads, on hover of the buttons, when you click on a feature button, and the slider animation that goes from one feature to the next.  We captured some very intuitive ways to get from point A to point B in this application.

I'm very excited to hear that there is a Silverlight control for Bing maps!  Here is the link to MSDN documentation. It was just announced at TechEd Europe yesterday!!!!  Here is more on that news.  It takes less than 15 minutes to get up to speed on using the maps control.  I've had some experience creating map control in ASP.Net using Google Maps.  The implementation is similar but even easier to use.  Google requires that you register using a gmail account and a valud URL.  They give you a key for a specific URL, which limits you to registering your development environment localhost:{port}.  Bing maps for Silverlight allows you to register to get up to 5 keys and does not limit you to your development URL.

If you are writing anything in Silverlight, you have to check this out! http://team.silverlight.net/announcement/announcing-the-bing-maps-silverlight-control/

Today turned out to be a nice lazy Saturday.  After looking on the TV for something mind numbing and finding that all too quickly, I decided to read some blogs with my RSS feed reader.  I've been using RSS Bandit (I'm a PC) but there have been a couple of bugs with it.  I could go into why I don't use a Firefox add-in or, IE8, or even an online service.  I used to use NewsGator but didn't re-up when they wanted my annual fee.  With the web based and browser based tools, I don't like the layout.  Since I'm a developer, I like something I can see the source code for too.  If I really want to change the layout or add a feature that makes sense to me, I can.

I did a little more searching on the Wikipedia Comparison List of Feed Aggregators and didn't find anything exciting.  I decided to search for anything new written in WPF.  As luck would have it, I ran across Paperboy, an RSS reader up on Codeplex.com/Paperboy.  It syncs with IE8 Feeds so I was back to using IE again as an underlying aggregator.  It turns out to be ok.  Paperboy is a desktop application which uses the WPF FlowDocument.  It uses an HTML to XAML conversion to be able to display content.  I'm probably going to see the FlowDocument evolve over time.  For now it provides a nice common layout for all the text.  So, the distraction of viewing a different font for each different blog is reduced.  I can also just open up the blog entry in a separate tab and see the original page in a standard web browser control.  So, to me, that is the best of both worlds.

Paperboy has far fewer features than RSS Bandit.  Also, the authors haven't done any work on the project it seems since August 2008.  But it is stable enough and simpler features don't get in the way of what I really want to do.  Keeping track of all the blogs I subscribe to just got a little better.

If the FlowDocument ever makes its way into Silverlight, I may have to port Paperboy into a nice little web application. 

This application was the first I've developed that uses the new Silverlight 3 Navigation feature.  It navigates through a wizard-like set of pages to demonstrate the capabilities of One App.  From the site, "Microsoft OneApp is a new software application that enables feature phones—commonly found in emerging markets—to access mobile apps like Facebook, Twitter, Windows Live Messenger, and other popular apps and games."  Click here to check out the demo, and go to http://www.microsoft.com/oneapp for more info.

(Bubble animations adapted from code in Foundation Silverlight 3 Animation by Jeff Paries)

This site was a real collaboration with the team of designers and idea gurus at Waggener Edstrom Studio D.  We all had fun with this one.  It is full of subtle "easter eggs".  I wanted to put a couple more in there but we ran out of time.  The one on the phone callout links back to a site we completed after this one, windowsphonesforstudents.com.  Head over to the link and click on the "8 Months Later" banner when you get tired of the first screen.  Turn the volume up too because Silverlight can do MP3 and Wav Audio!

This site was completed a few weeks ago.  I'm really happy with the challenges it provided and the techniques that came out of working through the challenges.  It is a very eye catching site with one major transition.  It goes from the intro full screen background to a resized background banner.  The background height and margins are changed with a somewhat integrated set of layout controls and storyboards.  I'd love to post the code but it is so specific to the project as to be of little reuse.  It simply proves that such a transition can be done.