Archive

Archive for the ‘design’ Category

Silverlight Circle Twist

January 31st, 2010

Silverlight Circle Twist was inspired by the cool game AlphaBetiC on my iPod Touch and the old Bros demos Circle Twist I and Circle Twist II on the Commodore 64.

Try typing your own text by clicking on the circles and then use backspace to remove the current text!
Reload the page for some different color patterns from COLOURlovers

And ofcourse you can download the code and play with it yourself. Have fun!

Oh and did you already vote for my MIX10K entry DeeperZoom? Please…

.net, Silverlight, design

Silverlight Deeper Zoom a 10K animation demo

January 15th, 2010

Deeper ZoomToday I have submitted my entry for the MIX 10K Smart Coding Challenge. I think this competition is so cool and it is very challenging to build something nice in only 10K.
This year I have made an animation that is very much inspired by the demo scene.

Because the Commodore 64 still is my all time favourite computer I have added a funky SID tune ‘Unsophisticated’ by Thomas Manske (Peace). This tune is downloaded on the fly from the Stone Oakvalley’s Authentic SID Collection (SOASC=) where they have converted (almost) all SID tunes ever made to MP3.

To save up Kb’s the characters used in the animation are all in the Webdings font that is pretty much standard on Windows but I don’t know if it will also work on Mac OS. Please let me know if not!

Please enjoy and vote for my entry here

.net, Silverlight, commodore 64, design, music

Silverlight Wordle

October 5th, 2009

Do you know the fantastic Wordle by Jonathan Feinberg?
It inspired me to make Silverlight Wordle and I can tell you that it looks much easier than it is…

The result is a bit slow and there are still some collision detection bugs but it looks pretty cool, don’t you think!? Try refreshing the page for some random layouts, fonts, and colours!

The beautiful colour palettes come from the site COLOURlovers.
I have borrowed the collision detection from Andy Beaulieu and Laurence Moroney helped me out with his convert-text-to-path webservice.

Furthermore I have developed a very basic word count routine that strips HTML and returns the first X most occurring words from any WebClient stream. I am using an ASP.NET page as a webproxy to be able to process any URL without the need of a clientaccesspolicy.xml file in place.
If you click on a word it will perform a search on this word.

UPDATED July 20, 2010: This new version does not need to use the convert-text-to-path webservice anymore because I use the WriteableBitmap now to render a TextBlock to a Bitmap. So now you can use any font you like! I have also improved the collision detection.

You can download the source code here: SilverlightWordle.zip

.net, Silverlight, design

Silverlight MINI Clubman Physics

August 22nd, 2009

Andy Beaulieu did some great things with Silverlight 3, the Farseer Physics Engine and behaviors.

I have turned his Truck w/Camera demo into the MINI Clubman Physics demo so that everyone is now able to drive and stunt with my beautiful MINI Clubman!

This demo contains NO CODE (except for Andy Beaulieu’s DLL’s) and is fully designed in Expression Blend 3.

Click the image to play!

Or download the Expression Blend 3 Solution and customise it yourself.

Silverlight, design

Silverlight Stencils

August 10th, 2009

I am a big fan of Banksy and of street art in general AND I am a big fan of Silverlight. And if you mix the two you will get: Silverlight Stencils!

With Silverlight Stencils you can create your own stencil art walls and save them to JPG.

Here are some examples I have created:

Rat activist

Under attack

Under attack

Have fun with Silverlight Stencils and ofcourse I am very curious about your creations! Please leave your comments…

Silverlight, design

Carousel – a truly amazing video

June 7th, 2009

I Love Sticker – Silverlight 2.0 source code

May 19th, 2009

Did you like my I Love Stickers post?
I was inspired by a 20 year old sticker that I have found when we were moving to our new house. That sticker is ofcourse based on the famous I love NY logo that was designed in 1977 by Milton Glaser.

For my little Silverlight 2.0 project I have used these resources and tools:

  1. The original I Love NY logo
  2. WhatTheFont! to find out the exact font used in the original logo. Great online tool!
  3. American_Typewriter_Bold_BT.ttf
  4. Paint.NET to crop the heart of the logo
  5. The amazing Open Source vector graphics editor Inkscape to trace the heart and save it as XAML(!)
  6. Expression Blend 2
  7. Visual Studio 2008

You can download the source code here: ILoveSticker.zip

And you can view a live example here: I Love Silverlight

.net, Silverlight, design

I Love Stickers

May 17th, 2009


Get Microsoft Silverlight

Don’t you love this retro sticker design? I have one on my bag and I got it from my mum in the 70′s. And now I have made it in Silverlight 2!

You can personalize the text by clicking on it!

Or you can print a sheet of your own with your own text: I Love My Girlfriend or I Love My Car or I Love My Hobby

You can also put it on your own website and change the initparams:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="400px" height="400px">
   <param name="initparams" value="Name=Stickers,Scale=2" />
   <param name="source" value="http://www.johnbruin.net/silverlight/ILoveSticker/ILoveSticker.xap" />
   <param name="onerror" value="onSilverlightError" />
   <param name="minRuntimeVersion" value="2.0.31005.0" />
   <param name="autoUpgrade" value="true" />
   <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"><img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" /></a>
</object>


Have fun!

.net, Silverlight, design

Repper – pattern creator

May 14th, 2009
 

Cool huh!? Try it yourself

design

YooouuuTuuube

May 14th, 2009

Yooouuu reeeaaalllyyy haaaave to seeeeeee this! I loooooooove it!

Try these examples:

Moby – Bodyrock

Gorrilaz – Clint Eastwood

Humanoid – Stakker Humanoid

design, music