You had me at "Hello World!" : Image

Nice background image

nikola — Thu, 13 Aug 2009 11:23:00 GMT

My latest creation last night... space view of a planet on a starry background

The image is 1920x1440

Hope you like it :) Feel free to use it as your desktop background, if you like :)

Silverlight: Super-fast Dymanic Image Generation Code (Revisited)

nikola — Thu, 05 Mar 2009 04:33:00 GMT

I decided to give a third spin of Joe Stegman's dynamic image generation code. This time, it's many times faster (about 10x) than the original implementation and the png is generated in-place (no recoding necessary).

I used some hacky optimizations :) For example, replacing the big CRC loop with a constant (0), definitely improves speed a lot! :)

There are no more intermediate memory streams or buffers: whenever SetPixel() is called, the value is written directly into PNG. Also all the header and size information is created just once. That also helped performance quite a bit.

With the new code my raindrops sample runs 20% faster (90% of the time used in calculating the drops): www.nokola.com/raindrops

Download the source code containing the new PngEncoder class here: www.nokola.com/sources/water.zip

Here's how to use the new image generator class:

PngEncoder surface = new PngEncoder(640, 480); // image dimension

surface.SetPixelSlow(40, 30, 200, 135, 32, 255); // set pixel at (40,30) with color RGBA=(200,135,32,255)

// draw a white horizontal line fast

int rowStart = surface.GetRowStart(30);

for (int i = 0; i < 10; i++) {

// SetPixelAtRowStart() is good for blitting/copying existing images onto this one

surface.SetPixelAtRowStart(i + 40, rowStart, 255, 255, 255, 255);

}

// display the image

BitmapImage img = new BitmapImage();

img.SetSource(surface.GetImageStream());

imgWater.Source = img; // this is just a normal Silverlight Image

And, here's the GetImageStream() function for comparison with the previous implementation:

public Stream GetImageStream()

{

MemoryStream ms = new MemoryStream();

ms.Write(_buffer, 0, _buffer.Length);

ms.Seek(0, SeekOrigin.Begin);

return ms;

}

Compare this to the previous function, that had numerous for()-s, encoding logic, etc :)

hoho! I'm very happy for doing this!

Edit: here's the source code for the SetPixelXX functions - to prove they are actually not slow :)

public void SetPixelSlow(int col, int row, byte red, byte green, byte blue, byte alpha)

{

int start = _rowLength * row + col * 4 + 1;

int blockNum = start / _blockSize;

start += ((blockNum + 1) * 5);

start += _dataStart;

_buffer[start] = red;

_buffer[start + 1] = green;

_buffer[start + 2] = blue;

_buffer[start + 3] = alpha;

}

public void SetPixelAtRowStart(int col, int rowStart, byte red, byte green, byte blue, byte alpha)

{

int start = rowStart + (col << 2);

_buffer[start] = red;

_buffer[start + 1] = green;

_buffer[start + 2] = blue;

_buffer[start + 3] = alpha;

}

public int GetRowStart(int row)

{

int start = _rowLength * row + 1;

int blockNum = start / _blockSize;

start += ((blockNum + 1) * 5);

start += _dataStart;

return start;

}

Optimized Joe Stegman's Dynamic Image Generation (Twice the Speed)

nikola — Fri, 04 Jul 2008 20:19:00 GMT

I needed a good and relatively fast dynamic image generation code for Silverlight (for the next sample, you’ll see).

Joe Stegman has an excellent post including source code for generating images in Silverlight: http://blogs.msdn.com/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx

Joe’s code is simple and easy to understand, but can be optimized for speed quite a bit.

After doing some profiling (looking in Task Manager) and optimizations, I managed to speed up the code more than twice. To find out the slowest functions, I just ran and image generation in a loop and looked at the CPU usage in Task Manager when disabling each of the functions.

These are the things I updated:

· All the image data is not copied anymore in the WriteChunk() function

· One big array was initialized on every frame in Encode()

· Changed SetPixel() to remove some checks in Release mode

· The Adler32 algorithm was amazingly slow (it’s doing two prime number divisions for each pixel)…after looking at Wikipedia I found a trick that makes the adler use 5550 times less divisions J

The optimized source is here: http://blogs.msdn.com/nikola/attachment/8690157.ashx

Further optimizations

There can be more optimizations, for example the PngEncoder always works with the same image width/height, so it may avoid some calls to write to a memory stream and bulk several calls into one.

The second memory stream in Encode() can be removed.

Maybe the image can be stored png-encoded and just updated by SetPixel. This way the stream creation will be very fast. This will be good if for example only 10% of the pixels are changed each frame.

I hope someone else will pick up the source finish what we started J (or I’ll finish it later)

Note: this is a remake of a post that was accidentally deleted.

Building 1977 Computer Emulator in Silverlight

nikola — Wed, 21 May 2008 18:39:00 GMT

In This Sample

· How to build a 1977 PC emulator with Silverlight

· Dynamic image generation

· 25 Games

If you like this sample, please vote for it on the Silverlight.net Community Gallery

More Information

Last Sunday I decided to try and build an x86 (namely the 8086) emulator in Silverlight to play the Digger game.

This turned out to be a more time-consuming job than I expected.

Luckily, one of the first gaming platforms (Chip8/SChip) is relatively very easy to emulate.

Few hours later I had a working prototype already! This is a very good starter for people like me and definitely very exciting!.

Also there are a lot of classics for it – Tetrises, Pacmans, Racing, Pong, even Pipe Dream.

Chip architecture, screen and keyboard: David Winter's Chip8 Emulator Web Site

Source code for the above sample: Download ChipGr8 Source Code

Image Effects with Silverlight: Creating the Saturation Light Sample

nikola — Thu, 24 Apr 2008 02:27:00 GMT

This sample demonstrates the following:

1. Simulating any image effect with Silverlight

2. Using the mouse wheel in a Silverlight application

Download sample source code: http://www.nokola.com/sources/SaturationLight.zip

The main XAML consists of 2 images:

1. Saturated image

2. Desaturated image

To create the visual effect of a “light” I added an opacity mask to the saturated image and set it to this radial gradient brush:

<Image.OpacityMask>

</RadialGradientBrush>

</Image.OpacityMask>

The GradientOrigin and Center control where the “light” is situated on the image. When we move the mouse on the image we change the light position like this:

Point tempPoint = new Point(0, 0);

private void imageSat_MouseMove(object sender, MouseEventArgs e)

{

_isMouseInside = true;

Point p = e.GetPosition(imageSat);

tempPoint.X = p.X / imageSat.ActualWidth;

tempPoint.Y = p.Y / imageSat.ActualHeight;

brushLight.Center = tempPoint;

brushLight.GradientOrigin = tempPoint;

}

Mouse wheel control

Is achieved by talking back to the DOM from the Silverlight app:

public Page()

{

InitializeComponent();

HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheelTurned);

HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheelTurned);

HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheelTurned);

}

Note that there are several checks for IE, Opera, Mozilla and Safari because the underlying DOM implementation is not the same.

The below code is a slightly modified version of the code on Jeff Prosise’s blog: http://www.wintellect.com/cs/blogs/jprosise/archive/2008/03/18/mousewheel-zooms-in-silverlight-2-0.aspx.

Peter Blois also has a good post wheel and deep zoom, if you’re interested: http://blois.us/blog/2008/03/ive-heard-number-of-people-wondering.html

private void OnMouseWheelTurned(object sender, HtmlEventArgs args)

{

if (!_isMouseInside) {

return;

}

double delta = 0;

ScriptObject e = args.EventObject;

if (e.GetProperty("wheelDelta") != null) // IE and Opera

{

delta = ((double)e.GetProperty("wheelDelta"));

if (HtmlPage.Window.GetProperty("opera") != null)

delta = -delta;

}

else if (e.GetProperty("detail") != null) // Mozilla and Safari

{

delta = -((double)e.GetProperty("detail"));

}

delta = Math.Sign(delta);

MouseWheelTurned(delta);

if (delta != 0)

{

args.PreventDefault();

e.SetProperty("returnValue", false);

}

private void MouseWheelTurned(double delta)

{

brushLight.RadiusX += 0.46*0.06*delta;

brushLight.RadiusY += 0.64*0.06*delta;

}

I guess that by using the “Saturation light” method by combining 2 images, you can achieve any image effect you’d like. For example: making a person’s or animal’s eyes “light up” when you move over their picture, or making all kinds of dodge, burn, blurs, etc image effects.