// Copyright (C) Microsoft Corporation. All rights reserved. // On update: build, rename & replace SwipeShaderEffect.cso #define D2D_INPUT_COUNT 1 #define D2D_REQUIRES_SCENE_POSITION #include "d2d1effecthelpers.hlsli" // Uniform float2 resolution; // visual size float time; // needed for flick static const float maxAmplitude = 150; // maximum amplitude of the wave static const float b = 0.000005; // damping factor for the wave // Duration of the animation in seconds static const float duration = 0.35; // Gradient stops for curve static const float4 colorOne = float4(0.0, 0.47, 0.83, 0.8); // RGBA - DiscoveryAccentBlue static const float4 colorTwo = float4(0.71, 0.49, 0.97, 0.8); // RGBA - DiscoveryAccentPurple static const float4 colorThree = float4(0.96, 0.3, 0.44, 0.8); // RGBA - DiscoveryAccentPink // Color the screen slowly turns as the ripple completes static const float4 glimmerColor = float4(0.2196, 0.6353, 1, 0.1843); D2D_PS_ENTRY(main) { // Calculate distance of pixel from click position float2 fragCoord = D2DGetScenePosition().xy; // Time passed from 0 to 1 float t = min(1.0, time / duration); // Height of the wave // If we are still mid-drag, then t=0 and flickAmplitude=dragAmplitude float flickAmplitude = maxAmplitude * (1.0 - t); float centerX = resolution.y / 2.0; // center of screen in x float x = fragCoord.y - centerX; float yShift = resolution.x * 3 / 4.0; // as this dec curve shifts to the left float yCurve = -1 * flickAmplitude * exp(-b * x * x) + yShift; // If pixel is under the curve, color with gradient; else transparent if (fragCoord.x > yCurve) { // Compute gradient factor: 0 at curve, 1 at bottom of screen float position = fragCoord.y / resolution.y; // Normalized position from 0 to 1 if (position < 0.8f) { // Use colorOne for the first 80% of the screen return lerp(colorOne, colorTwo, position / 0.8f); } else { // Use colorTwo for the last 20% of the screen return lerp(colorTwo, colorThree, (position - 0.8f) / 0.2f); } } else { return float4(0, 0, 0, 0); // Transparent } }