Swipe Playground
Interactive Shader
This effect was inspired by an ad for the RuPaul's Drag Race mobile game (https://youtu.be/HrrfZW0fJbE?t=28). The effect looked neat and I had a pretty good idea as soon as I saw the ad how I wanted to approach getting the basic functionality set up. When I showed the result to my partner on my phone she immediately tried to interact with it and was a bit disappointed that it was just visual. I figured it would be fun to see if I could support her expectation and the result ended up being quite satisfying to play with.
Step 1 - Draw a grid of circles
Step 2 - Generate a semi random twinkle pattern from noise
Step 3 - Rotating gradient background
Step 4 - Generate a pulsing vignette mask
Step 5 - Combine base dots, twinkle, mask, and background
Step 6 - Creating hooks for animations to modify material properties
*The actual shader has a bunch of additional hooks not shown here for brevity. the set up is the same, just a few more properties for the smoothstepping of the circles and colour.
Since Unity doesn't allow for animations to access material properties directly I had to create a script with matching properties to animate, and reflect those changes to the material. I went with animations on this project since it was relatively quick to implement, but I don't love that it's setting the properties every frame regardless of whether anything's changed. I'd probably try to do this with tweens instead if I was going to incorporate this effect into a game.
Step 7 - Setup trail object that follows touch as well as a camera that only captures the trail and renders it to a render texture.
The render texture I created here will be the raw image that the material is applied to. The camera's background colour was set to black and the trail renderer is white with a gradual fade out and a circle sprite directly under the touch. The idea here was to create a runtime black and white map of where the touch has been that can be utilized in the material to light up corresponding dots.
Step 8 - Cleanly map the trail onto the circle grid without partial fills
Directly overlaying the trail render texture onto the dot grid resulted in circles near the edges being half on half off. By pixelating it with the same ratio as the grid I was able to get the marquee light array effect I was going for.
Since I was setting up properties to keep everything aligned, I figured I might as well make it resolution independent as well. Each time the resolution changes I clean up and reinitialize the render texture, and update the tiling and aspect ratio properties of the material.
