eleev · August 19, 2024 21:58 · eleev · Aug 16, 2024 · ivanopcode · Aug 16, 2024
diff --git a/AnimatedVoronoiFlowGradient.swift b/AnimatedVoronoiFlowGradient.swift
 //
 // VoronoiFlowGradient and the related sources
 // Copyright (c) 2024 Astemir Eleev
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
 // in the Software without restriction, including without limitation the rights
 // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 // copies of the Software, and to permit persons to whom the Software is
 // furnished to do so, subject to the following conditions:
 //
 // The above copyright notice and this permission notice shall be included in all
 // copies or substantial portions of the Software.
 //
 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 //

 #include <metal_stdlib>
 using namespace metal;

 namespace VoronoiFlowGradient {

    /**
     * Generates a pseudo-random float2 based on the input float2 coordinates.
     *
     * @param uv Input coordinate as a float2.
     * @return A pseudo-random float2 value.
     */
    float2 random(float2 uv) {
        // Calculate dot products with specific constants to scramble the input coordinates
        uv *= float2(dot(uv, float2(127.1, 311.7)), dot(uv, float2(227.1, 531.7)));
        
        // Return a pseudo-random float2 using trigonometric transformations and fractal operations
        return 1. - fract(tan(cos(uv) * 173.7) * 371915.3) * fract(tan(cos(uv) * 173.7) * 371915.3);
    }
    
    /**
     * Computes a point in the Voronoi diagram adjusted by time.
     *
     * @param id The cell identifier as a float2.
     * @param t The time variable to animate the points.
     * @return A float2 representing the point's position.
     */
    float2 point(float2 id, float t) {
        // Generate a point in the Voronoi cell using randomization and trigonometric functions
        return sin(t * (random(id + .5) - .5) + random(id - 20.1) * 8.0) * .5;
    }
    
    /**
     * Main function to generate a Voronoi flow gradient.
     *
     * This function is stitchable and designed to create a visually continuous Voronoi pattern.
     *
     * @param position The position coordinate as float2.
     * @param bounds The bounds of the input space as float4 (minX, minY, maxX, maxY).
     * @param time The current time used for animating the gradient.
     * @param size The scaling factor for the Voronoi cells.
     * @param offset The offset to apply over time, as float2.
     * @param col1 The first color to blend in the gradient as float4 (R, G, B, A).
     * @param col2 The second color to blend in the gradient as float4 (R, G, B, A).
     * @param angle1 The first angle parameter for color blending.
     * @param angle2 The second angle parameter for color blending.
     * @return A half4 (RGBA) value representing the color at the given position.
     */
    [[ stitchable ]] half4 main(
        float2 position,
        float4 bounds,
        float time,
        float size,
        float2 offset,
        float4 col1,
        float4 col2,
        float angle1,
        float angle2
    ) {
        // Normalize position based on bounds and adjust for center
        float2 uv = (position - .5 * bounds.zw) / bounds.z;
        uv.y = 1. - uv.y;  // Flip Y coordinate to align with conventional top-down rendering
        uv -= 0.2;         // Offset to position the pattern
        uv *= 0.6;         // Scale down the pattern

        // Apply animated offset and scale
        float2 off = time / offset;
        uv += off;
        uv *= size;
        
        // Get the fractional and integer parts of the UV coordinate
        float2 gv = fract(uv) - .5;
        float2 id = floor(uv);
        
        float mindist = 1e9;  // Initialize minimum distance as large value
        float2 vorv;
        
        // Loop over surrounding cells to find the closest point in the Voronoi diagram
        for(float i = -2.; i <= 2.; i++) {
            for(float j = -2.; j <= 2.; j++) {
                float2 offv = float2(i, j);
                float dist = length(gv + point(id + offv, time * 2.) - offv);
                if (dist < mindist) {
                    mindist = dist;
                    vorv = (id + point(id + offv, time * 2.) + offv) / size - off;
                }
            }
        }

        // Blend between two colors based on calculated Voronoi point
        half4 col = mix(
            half4(col1.x, col1.y, col1.z, col1.a),
            half4(col2.x, col2.y, col2.z, col1.a),
            clamp(vorv.x * angle1 + vorv.y, angle2, 1.) * .5 + .5
        );
        
        return col;
    }
 }

 // MARK: SwiftUI API
 /*
 NOTE: You only need the following snippet, if you embed the shader and the modifier view into a package.
 */

 import SwiftUI

 /// The Gradienta Metal shader library.
 @available(iOS 17, macOS 14, macCatalyst 17, tvOS 17, visionOS 1, *)
 @dynamicMemberLookup
 public enum FrameworkShadersLibrary {
    /// Returns a new shader function representing the stitchable MSL
    /// function called `name` in the Inferno shader library.
    ///
    /// Typically this subscript is used implicitly via the dynamic
    /// member syntax, for example:
    ///
    /// ```let fn = Framework.myFunction```
    ///
    /// which creates a reference to the MSL function called
    /// `myFunction()`.
    public static subscript(dynamicMember name: String) -> ShaderFunction {
        ShaderLibrary.bundle(.gradienta)[dynamicMember: name + "::main"]
    }
 }

 extension Bundle {
    public static var gradienta: Bundle = .module
 }

 public struct VoronoiFlowGradient: ShapeStyle, View, Sendable {
    private var time: TimeInterval
    private var size: CGFloat
    private var offset: CGPoint
    private var color1: Color
    private var color2: Color
    private var angle1: CGFloat
    private var angle2: CGFloat
    
    public init(
        time: TimeInterval,
        size: CGFloat = 10,
        offset: CGPoint = CGPoint(x: -150, y: 300),
        color1: Color = Color(red: 153 / 255, green: 41 / 255, blue: 196 / 255),
        color2: Color = Color(red: 21 / 255, green: 241 / 255, blue: 211 / 255),
        angle1: CGFloat = 2.1,
        angle2: CGFloat = -1.3
    ) {
        self.time = time
        self.size = size
        self.offset = offset
        self.color1 = color1
        self.color2 = color2
        self.angle1 = angle1
        self.angle2 = angle2
    }
    
    public func resolve(in environment: EnvironmentValues) -> some ShapeStyle {
        FrameworkShadersLibrary.VoronoiFlowGradient(
            .boundingRect,
            .float(time),
            .float(size),
            .float2(offset.x, offset.y),
            .float4(
                color1.components.red,
                color1.components.green,
                color1.components.blue,
                color2.components.alpha
            ),
            .float4(
                color2.components.red,
                color2.components.green,
                color2.components.blue,
                color2.components.alpha
            ),
            .float(angle1),
            .float(angle2)
        )
    }
 }


 /*
 Utiilty Extension 
 */

 extension Color {
    var components: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {

        #if canImport(UIKit)
        typealias NativeColor = UIColor
        #elseif canImport(AppKit)
        typealias NativeColor = NSColor
        #endif

        var r: CGFloat = 0
        var g: CGFloat = 0
        var b: CGFloat = 0
        var a: CGFloat = 0

        guard NativeColor(self).getRed(&r, green: &g, blue: &b, alpha: &a) else {
            return (0, 0, 0, 0)
        }
        return (r, g, b, a)
    }
 }

 /*
 Usage:
 */

 struct ContentView: View {
    private var start = Date()
    
    var body: some View {
        TimelineView(.animation) { context in
            GeometryReader { proxy in
                let time = context.date.timeIntervalSince1970 - start.timeIntervalSince1970
                VoronoiFlowGradient(
                    time: time * 0.5,
                    size: 15,
                    offset: CGPoint(x: 15, y: 15),
                    color1: .orange,
                    color2: .red,
                    angle1: 3.7,
                    angle2: -5.5
                )
            }
        }
        .ignoresSafeArea()
    }
 }

 #Preview {
    ContentView()
 }
	//
	// VoronoiFlowGradient and the related sources
	// Copyright (c) 2024 Astemir Eleev
	//
	// Permission is hereby granted, free of charge, to any person obtaining a copy
	// of this software and associated documentation files (the "Software"), to deal
	// in the Software without restriction, including without limitation the rights
	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	// copies of the Software, and to permit persons to whom the Software is
	// furnished to do so, subject to the following conditions:
	//
	// The above copyright notice and this permission notice shall be included in all
	// copies or substantial portions of the Software.
	//
	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	// SOFTWARE.
	//

	#include <metal_stdlib>
	using namespace metal;

	namespace VoronoiFlowGradient {

	/**
	* Generates a pseudo-random float2 based on the input float2 coordinates.
	*
	* @param uv Input coordinate as a float2.
	* @return A pseudo-random float2 value.
	*/
	float2 random(float2 uv) {
	// Calculate dot products with specific constants to scramble the input coordinates
	uv *= float2(dot(uv, float2(127.1, 311.7)), dot(uv, float2(227.1, 531.7)));

	// Return a pseudo-random float2 using trigonometric transformations and fractal operations
	return 1. - fract(tan(cos(uv) * 173.7) * 371915.3) * fract(tan(cos(uv) * 173.7) * 371915.3);
	}

	/**
	* Computes a point in the Voronoi diagram adjusted by time.
	*
	* @param id The cell identifier as a float2.
	* @param t The time variable to animate the points.
	* @return A float2 representing the point's position.
	*/
	float2 point(float2 id, float t) {
	// Generate a point in the Voronoi cell using randomization and trigonometric functions
	return sin(t * (random(id + .5) - .5) + random(id - 20.1) * 8.0) * .5;
	}

	/**
	* Main function to generate a Voronoi flow gradient.
	*
	* This function is stitchable and designed to create a visually continuous Voronoi pattern.
	*
	* @param position The position coordinate as float2.
	* @param bounds The bounds of the input space as float4 (minX, minY, maxX, maxY).
	* @param time The current time used for animating the gradient.
	* @param size The scaling factor for the Voronoi cells.
	* @param offset The offset to apply over time, as float2.
	* @param col1 The first color to blend in the gradient as float4 (R, G, B, A).
	* @param col2 The second color to blend in the gradient as float4 (R, G, B, A).
	* @param angle1 The first angle parameter for color blending.
	* @param angle2 The second angle parameter for color blending.
	* @return A half4 (RGBA) value representing the color at the given position.
	*/
	[[ stitchable ]] half4 main(
	float2 position,
	float4 bounds,
	float time,
	float size,
	float2 offset,
	float4 col1,
	float4 col2,
	float angle1,
	float angle2
	) {
	// Normalize position based on bounds and adjust for center
	float2 uv = (position - .5 * bounds.zw) / bounds.z;
	uv.y = 1. - uv.y; // Flip Y coordinate to align with conventional top-down rendering
	uv -= 0.2; // Offset to position the pattern
	uv *= 0.6; // Scale down the pattern

	// Apply animated offset and scale
	float2 off = time / offset;
	uv += off;
	uv *= size;

	// Get the fractional and integer parts of the UV coordinate
	float2 gv = fract(uv) - .5;
	float2 id = floor(uv);

	float mindist = 1e9; // Initialize minimum distance as large value
	float2 vorv;

	// Loop over surrounding cells to find the closest point in the Voronoi diagram
	for(float i = -2.; i <= 2.; i++) {
	for(float j = -2.; j <= 2.; j++) {
	float2 offv = float2(i, j);
	float dist = length(gv + point(id + offv, time * 2.) - offv);
	if (dist < mindist) {
	mindist = dist;
	vorv = (id + point(id + offv, time * 2.) + offv) / size - off;
	}
	}
	}

	// Blend between two colors based on calculated Voronoi point
	half4 col = mix(
	half4(col1.x, col1.y, col1.z, col1.a),
	half4(col2.x, col2.y, col2.z, col1.a),
	clamp(vorv.x * angle1 + vorv.y, angle2, 1.) * .5 + .5
	);

	return col;
	}
	}

	// MARK: SwiftUI API
	/*
	NOTE: You only need the following snippet, if you embed the shader and the modifier view into a package.
	*/

	import SwiftUI

	/// The Gradienta Metal shader library.
	@available(iOS 17, macOS 14, macCatalyst 17, tvOS 17, visionOS 1, *)
	@dynamicMemberLookup
	public enum FrameworkShadersLibrary {
	/// Returns a new shader function representing the stitchable MSL
	/// function called `name` in the Inferno shader library.
	///
	/// Typically this subscript is used implicitly via the dynamic
	/// member syntax, for example:
	///
	/// ```let fn = Framework.myFunction```
	///
	/// which creates a reference to the MSL function called
	/// `myFunction()`.
	public static subscript(dynamicMember name: String) -> ShaderFunction {
	ShaderLibrary.bundle(.gradienta)[dynamicMember: name + "::main"]
	}
	}

	extension Bundle {
	public static var gradienta: Bundle = .module
	}

	public struct VoronoiFlowGradient: ShapeStyle, View, Sendable {
	private var time: TimeInterval
	private var size: CGFloat
	private var offset: CGPoint
	private var color1: Color
	private var color2: Color
	private var angle1: CGFloat
	private var angle2: CGFloat

	public init(
	time: TimeInterval,
	size: CGFloat = 10,
	offset: CGPoint = CGPoint(x: -150, y: 300),
	color1: Color = Color(red: 153 / 255, green: 41 / 255, blue: 196 / 255),
	color2: Color = Color(red: 21 / 255, green: 241 / 255, blue: 211 / 255),
	angle1: CGFloat = 2.1,
	angle2: CGFloat = -1.3
	) {
	self.time = time
	self.size = size
	self.offset = offset
	self.color1 = color1
	self.color2 = color2
	self.angle1 = angle1
	self.angle2 = angle2
	}

	public func resolve(in environment: EnvironmentValues) -> some ShapeStyle {
	FrameworkShadersLibrary.VoronoiFlowGradient(
	.boundingRect,
	.float(time),
	.float(size),
	.float2(offset.x, offset.y),
	.float4(
	color1.components.red,
	color1.components.green,
	color1.components.blue,
	color2.components.alpha
	),
	.float4(
	color2.components.red,
	color2.components.green,
	color2.components.blue,
	color2.components.alpha
	),
	.float(angle1),
	.float(angle2)
	)
	}
	}


	/*
	Utiilty Extension
	*/

	extension Color {
	var components: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {

	#if canImport(UIKit)
	typealias NativeColor = UIColor
	#elseif canImport(AppKit)
	typealias NativeColor = NSColor
	#endif

	var r: CGFloat = 0
	var g: CGFloat = 0
	var b: CGFloat = 0
	var a: CGFloat = 0

	guard NativeColor(self).getRed(&r, green: &g, blue: &b, alpha: &a) else {
	return (0, 0, 0, 0)
	}
	return (r, g, b, a)
	}
	}

	/*
	Usage:
	*/

	struct ContentView: View {
	private var start = Date()

	var body: some View {
	TimelineView(.animation) { context in
	GeometryReader { proxy in
	let time = context.date.timeIntervalSince1970 - start.timeIntervalSince1970
	VoronoiFlowGradient(
	time: time * 0.5,
	size: 15,
	offset: CGPoint(x: 15, y: 15),
	color1: .orange,
	color2: .red,
	angle1: 3.7,
	angle2: -5.5
	)
	}
	}
	.ignoresSafeArea()
	}
	}

	#Preview {
	ContentView()
	}