MeshGradient Playground iOS 18

ContentView.swift

//
//  ContentView.swift
//  MeshGradientPlayground
//
//  Created by Bill Richards on 6/14/24.
//

import SwiftUI

struct ContentView: View {
    @State private var points: [SIMD2<Float>] = [
        [0.0, 0.0], [0.33, 0.0], [0.67, 0.0], [1.0, 0.0],
        [0.0, 0.33], [0.33, 0.33], [0.67, 0.33], [1.0, 0.33],
        [0.0, 0.67], [0.33, 0.67], [0.67, 0.67], [1.0, 0.67],
        [0.0, 1.0], [0.33, 1.0], [0.67, 1.0], [1.0, 1.0]
    ]
    @State var colors: [Color] = [
        .red, .purple, .indigo, .blue,
        .orange, .gray, .mint, .green,
        .yellow, .gray, .teal, .brown,
        .cyan, .indigo, .blue, .purple
    ]
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                MeshGradient(width: 4, height: 4, points: points, colors: colors, background: .black)
                ForEach(points.indices, id: \.self) { index in
                    ColorPicker("Point #\(index)", selection: $colors[index], supportsOpacity: true)
                        .labelsHidden()
                        .frame(width: 20, height: 20)
                        .clipShape(Circle())
                        .overlay(
                            Circle()
                                .stroke(Color.white, lineWidth: 2)
                        )
                        .shadow(radius: 1.0)
                        .position(x: CGFloat(points[index].x) * geometry.size.width,
                                  y: CGFloat(points[index].y) * geometry.size.height)
                        .gesture(
                            DragGesture().onChanged { value in
                                points[index].x = Float(value.location.x / geometry.size.width)
                                points[index].y = Float(value.location.y / geometry.size.height)
                            }
                        )
                }
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
        }
        .padding()
        //        .edgesIgnoringSafeArea(.all) // extend to edges but harder to control
        .background(Color.black.edgesIgnoringSafeArea(.all))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

#Preview {
    ContentView()
}