水滴が付いたガラス越しに景色を見るWPF

水滴が付いたガラス越しに景色を見た写真がきれいだったので、WPFで作ってみた。

オリジナルの画像。

作り方

• 背景

BlurEffect Radius=”15″ ぐらいでぼかす。

• 水滴の作り方：

Ellipse に同じ画像を貼り付けて、180°回転させて、DropShadowEffectをつける。Ellipse は少し縦長にしてあげる。あとは、水滴をランダムに配置してあげる。水滴は重ならないので、重ならないように配置する。

意外とそれっぽく見える。とりあえず、実験用コードをメモっておく。重なり判定はしていません。

using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Effects;

        BitmapImage bi = new BitmapImage(new Uri(“pack://siteoforigin:,,,/20070812 026.jpg”));

        private void Doit()
        {
            for(int i = 0; i < 100; i++)
                CreateRaindrop();
        }

        private void CreateRaindrop()
        {
            Ellipse raindrop = new Ellipse();
            var effect = new DropShadowEffect();
            effect.Direction = 120;
            effect.Opacity = 0.5;
            raindrop.Effect = effect;
            raindrop.Width = 35;
            raindrop.Height = 40;
            raindrop.RenderTransform = GetTransform(GetRnd(0.5));
            raindrop.Fill = new ImageBrush(bi);
            raindrop.Margin = new Thickness(GetRnd(1200) – 650, GetRnd(800) – 400, 0, 0);

            this.MainGrid.Children.Add(raindrop);
        }

        static Random rnd = new Random();
 
        static double GetRnd(double range)
        {
            return (rnd.NextDouble() * range);
        }
       
        private TransformGroup GetTransform(double size)
        {
            var tg = new TransformGroup();
            var st = new ScaleTransform(size, size);
            var rot = new RotateTransform(180);

            tg.Children.Add(st);
            tg.Children.Add(rot);
 
            return tg;
        }
    }
}