4 thoughts on “Windows 10 Anniversary Update–Fun with Composition and Video”

1. Pingback: Windows 10 Anniversary Update–Fun with Composition and Video | Tech News

2. Cool! 🙂

3. How to add WIN2D effects like HueRotationEffect into SpriteVisual and into the MediaPlayer instance?

4. WIN2D Effects Added:
   using Microsoft.Graphics.Canvas.Effects;
   using System;
   using System.Collections.Generic;
   using System.Numerics;
   using Windows.ApplicationModel.Core;
   using Windows.Foundation;
   using Windows.Media.Playback;
   using Windows.Storage;
   using Windows.UI.Composition;
   using Windows.UI.Core;

   namespace MediaPlayBack
   {
   internal class MainView : IFrameworkView, IFrameworkViewSource
   {
   private CoreWindow window;
   private CoreApplicationView _view;
   private ContainerVisual containerVisual;

   //private SpriteVisual effectVisual;
   private MediaPlayer mediaPlayer;

   private MediaPlayerSurface _mediaSurface;
   private Compositor compositor;
   private CompositionSurfaceBrush mediaBrush;
   private CompositionEffectBrush _effectBrush;
   //private CompositionEffectFactory _effectFactory;

   //private CompositionTarget compositionTarget;
   private List spriteVisuals;

   public static void Main()
   {
   CoreApplication.Run(new MainView());
   }

   public MainView()
   {
   this.spriteVisuals = new List();
   }

   public IFrameworkView CreateView()
   {
   return (this);
   }

   public void Run()
   {
   this.window.Activate();
   this.window.Dispatcher.ProcessEvents(CoreProcessEventsOption.ProcessUntilQuit);
   }

   public void SetWindow(CoreWindow window)
   {
   this.window = window;
   this.compositor = new Compositor();
   var clip = this.compositor.CreateInsetClip();
   clip.LeftInset = 2.0f;
   clip.RightInset = 2.0f;
   clip.TopInset = 2.0f;
   clip.BottomInset = 2.0f;
   this.containerVisual = this.compositor.CreateContainerVisual();
   this.containerVisual.Clip = clip;
   this.containerVisual.Opacity = 0.6f;
   this.containerVisual.RotationAngleInDegrees = 0.0f;
   //this.containerVisual.Children.InsertAtTop(AddEffect());
   foreach (var child in this.containerVisual.Children)
   {
   child.RotationAngleInDegrees = 45.0f;
   break;
   }
   var target = this.compositor.CreateTargetForCurrentView();
   target.Root = this.containerVisual;
   this.AddEffect();
   this.spriteVisuals.Add(this.MakeSpriteVisual());
   this.SizeVisuals(
   new Size(window.Bounds.Width, window.Bounds.Height));

   this.window.SizeChanged += (s, e) =>
   {
   this.SizeVisuals(e.Size);
   };
   this.window.PointerReleased += (s, e) =>
   {
   this.IncreaseVisuals();
   };
   }

   private CompositionEffectBrush AddEffect()
   {
   // Create our HueRotation effect.
   var hueRotationEffect = new HueRotationEffect
   {
   Name = “HueRotation”,
   Source = new CompositionEffectSourceParameter(“HueRotation”),
   Angle = 0.5f
   };
   // Create our Saturation effect, range 0->1
   var saturationEffect = new SaturationEffect
   {
   Name = “Saturation”,
   Source = new CompositionEffectSourceParameter(“Saturation”),
   Saturation = 0.0f
   };
   // Create our Exposure effect, range -2 -> 2, default value 0.
   var exposureEffect = new ExposureEffect
   {
   Name = “Exposure”,
   Source = new CompositionEffectSourceParameter(“Exposure”),
   Exposure = 0.0f
   };
   // Create our Exposure effect, range 0 -> 1, default value 0.5
   var sepiaEffect = new SepiaEffect
   {
   Name = “Sepia”,
   Source = new CompositionEffectSourceParameter(“Sepia”),
   Intensity = 0.5f
   };

   var arithmeticCompositeEffect = new ArithmeticCompositeEffect
   {
   Name = “ArithmeticComposite”,
   Source1 = new CompositionEffectSourceParameter(“ArithmeticComposite”),
   MultiplyAmount = 2,
   Source1Amount = 0,
   Source2Amount = 0,
   Offset = 0,

   Source2 = new Transform2DEffect
   {
   Name = “Transform2D”,
   Source = new CompositionEffectSourceParameter(“ArithmeticComposite”),
   TransformMatrix = Matrix3x2.CreateRotation(0.0f)
   }
   };

   //var effectFactory = compositor.CreateEffectFactory(
   // hueRotationEffect,
   // new string[] { “HueRotation.Angle” });

   //var effectFactory = compositor.CreateEffectFactory(
   // saturationEffect,
   // new string[] { “Saturation.Saturation” });

   //var effectFactory = compositor.CreateEffectFactory(
   // exposureEffect,
   // new string[] { “Exposure.Exposure” });

   var effectFactory = compositor.CreateEffectFactory(
   sepiaEffect,
   new string[] { “Sepia.Intensity” });

   //var effectFactory = compositor.CreateEffectFactory(
   // arithmeticCompositeEffect,
   // new string[] { “ArithmeticComposite.MultiplyAmount” });

   _effectBrush = effectFactory.CreateBrush();

   return _effectBrush;
   }

   private void IncreaseVisuals()
   {
   var root = Math.Sqrt(this.spriteVisuals.Count);
   var newCount = (int)Math.Pow(root + 1, 2.0);
   var delta = newCount – this.spriteVisuals.Count;

   for (int i = 0; i < delta; i++)
   {
   this.spriteVisuals.Add(this.MakeSpriteVisual());
   //this.containerVisual.Children.InsertAtTop(AddEffect());
   }
   this.SizeVisuals(
   new Size(
   this.window.Bounds.Width,
   this.window.Bounds.Height));
   }

   private void SizeVisuals(Size size)
   {
   this.containerVisual.Size = new Vector2(
   (float)size.Width, (float)size.Height);

   int rowSize = (int)Math.Sqrt(this.spriteVisuals.Count);
   float visualWidth = (float)size.Width / rowSize;
   float visualHeight = (float)size.Height / rowSize;
   var vectorSize = new Vector2(visualWidth, visualHeight);

   for (int i = 0; i < rowSize; i++)
   {
   for (int j = 0; j < rowSize; j++)
   {
   var visual = this.spriteVisuals[i * rowSize + j];
   visual.Size = vectorSize;
   visual.Offset = new Vector3(i * visualWidth, j * visualHeight, 0);
   }
   }
   }

   public async void Load(string entryPoint)
   {
   this.mediaPlayer = new MediaPlayer();
   this.mediaPlayer.IsLoopingEnabled = true;
   this.mediaPlayer.SystemMediaTransportControls.IsEnabled = true;

   var videoFile = await StorageFile.GetFileFromApplicationUriAsync(
   new Uri("ms-appx:///Assets/Duck.mp4"));

   this.mediaPlayer.SetFileSource(videoFile);

   //Create a surface from our MediaPlayer.
   _mediaSurface = this.mediaPlayer.GetSurface(compositor);
   var _surface = _mediaSurface.CompositionSurface;

   // Make a brush out of it and apply it to our effect.
   this.mediaBrush = this.compositor.CreateSurfaceBrush(_surface);
   this.mediaBrush.Stretch = CompositionStretch.UniformToFill;
   //_visual.Brush = _videoBrush;
   _effectBrush.SetSourceParameter("Sepia", mediaBrush);

   ////containerVisual.Children.InsertAtTop(effectVisual);
   ////ElementCompositionPreview.SetElementChildVisual((Windows.UI.Xaml.UIElement)this.containerVisual, this.effectVisual);
   ////var propertySet = compositor.CreatePropertySet();
   ////propertySet.InsertScalar("HueRotation.Angle", 0.0f);

   var easing = this.compositor.CreateLinearEasingFunction();

   var animation = this.compositor.CreateScalarKeyFrameAnimation();
   animation.InsertKeyFrame(0.0f, 0.0f);
   animation.InsertKeyFrame(1.0f, 2.0f * (float)Math.PI, easing);
   //animation.InsertKeyFrame(1.0f, 1.0f, easing);
   animation.Duration = TimeSpan.FromMilliseconds(8000);
   animation.IterationBehavior = AnimationIterationBehavior.Forever;
   _effectBrush.StartAnimation("Sepia.Intensity", animation);

   foreach (var spriteVisual in this.spriteVisuals)
   {
   spriteVisual.Brush = this.mediaBrush;
   }

   this.mediaPlayer.Play();
   }

   private SpriteVisual MakeSpriteVisual()
   {
   var spriteVisual = this.compositor.CreateSpriteVisual();
   spriteVisual.Brush = _effectBrush;

   this.containerVisual.Children.InsertAtTop(spriteVisual);

   return (spriteVisual);
   }

   public void Initialize(CoreApplicationView applicationView)
   {
   _view = applicationView;
   }

   public void Uninitialize()
   {
   window = null;
   _view = null;
   }
   }
   }

Comments are closed.