Rainbow Trail

1import SwiftUI
2
3struct RainbowTrailView: View {
4    @State private var trails: [TrailSegment] = []
5    @State private var currentPath: [CGPoint] = []
6    @State private var isDrawing = false
7    @State private var lastPoint: CGPoint = .zero
8    @State private var lastTime: Date = Date()
9    
10    var body: some View {
11        ZStack {
12            // Drawing Canvas (Full Screen)
13            ZStack {
14                // Trail segments
15                ForEach(trails.indices, id: \.self) { index in
16                    TrailSegmentView(segment: trails[index])
17                }
18                
19                // Current drawing path
20                if !currentPath.isEmpty {
21                    VariableWidthPath(points: currentPath)
22                        .fill(
23                            LinearGradient(
24                                colors: [.red, .orange, .yellow, .green, .blue, .purple],
25                                startPoint: .leading,
26                                endPoint: .trailing
27                            )
28                        )
29                }
30            }
31            .frame(maxWidth: .infinity, maxHeight: .infinity)
32            .contentShape(Rectangle()) // Make the entire area tappable
33            .gesture(
34                DragGesture(minimumDistance: 0)
35                    .onChanged { value in
36                        let currentTime = Date()
37                        let timeDelta = currentTime.timeIntervalSince(lastTime)
38                        
39                        if !isDrawing {
40                            isDrawing = true
41                            currentPath = [value.location]
42                            lastPoint = value.location
43                            lastTime = currentTime
44                        } else {
45                            // Calculate velocity
46                            let distance = sqrt(pow(value.location.x - lastPoint.x, 2) + pow(value.location.y - lastPoint.y, 2))
47                            let velocity = timeDelta > 0 ? distance / CGFloat(timeDelta) : 0
48                            
49                            // Add interpolated points based on velocity
50                            let minDistance: CGFloat = max(2, 20 - velocity * 0.5) // Faster = smaller distance = more circles
51                            let interpolatedPoints = interpolatePoints(from: lastPoint, to: value.location, minDistance: minDistance)
52                            
53                            currentPath.append(contentsOf: interpolatedPoints)
54                            lastPoint = value.location
55                            lastTime = currentTime
56                        }
57                    }
58                    .onEnded { _ in
59                        if !currentPath.isEmpty {
60                            // Create a new trail segment
61                            let newSegment = TrailSegment(
62                                path: currentPath,
63                                createdAt: Date(),
64                                opacity: 1.0
65                            )
66                            trails.append(newSegment)
67                            
68                            // Start fading animation
69                            withAnimation(.linear(duration: 3.0)) {
70                                if let index = trails.firstIndex(where: { $0.id == newSegment.id }) {
71                                    trails[index].opacity = 0.0
72                                }
73                            }
74                            
75                            // Remove the segment after animation completes
76                            DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
77                                trails.removeAll { $0.id == newSegment.id }
78                            }
79                        }
80                        
81                        currentPath = []
82                        isDrawing = false
83                    }
84            )
85            
86        }
87        .background(Color(.systemGroupedBackground))
88    }
89    
90    private func interpolatePoints(from start: CGPoint, to end: CGPoint, minDistance: CGFloat) -> [CGPoint] {
91        let distance = sqrt(pow(end.x - start.x, 2) + pow(end.y - start.y, 2))
92        
93        if distance < minDistance {
94            return []
95        }
96        
97        let numberOfPoints = Int(distance / minDistance)
98        var points: [CGPoint] = []
99        
100        for i in 1...numberOfPoints {
101            let ratio = CGFloat(i) / CGFloat(numberOfPoints)
102            let x = start.x + (end.x - start.x) * ratio
103            let y = start.y + (end.y - start.y) * ratio
104            points.append(CGPoint(x: x, y: y))
105        }
106        
107        return points
108    }
109}
110
111struct TrailSegment: Identifiable {
112    let id = UUID()
113    let path: [CGPoint]
114    let createdAt: Date
115    var opacity: Double
116}
117
118struct TrailSegmentView: View {
119    let segment: TrailSegment
120    
121    var body: some View {
122        VariableWidthPath(points: segment.path)
123            .fill(
124                LinearGradient(
125                    colors: [.red, .orange, .yellow, .green, .blue, .purple],
126                    startPoint: .leading,
127                    endPoint: .trailing
128                )
129            )
130            .opacity(segment.opacity)
131    }
132}
133
134struct VariableWidthPath: Shape {
135    let points: [CGPoint]
136    
137    func path(in rect: CGRect) -> Path {
138        var path = Path()
139        
140        guard points.count >= 2 else { return path }
141        
142        // Create variable width stroke by drawing multiple circles along the path
143        for i in 0..<points.count {
144            let point = points[i]
145            let progress = Double(i) / Double(points.count - 1)
146            
147            // Calculate width based on position (thinner at start and end)
148            let baseWidth: CGFloat = 30 // Much thicker base width
149            let widthVariation = sin(progress * .pi) * 0.6 + 0.4 // 0.4 to 1.0 multiplier
150            let width = baseWidth * widthVariation
151            
152            // Add circle at this point
153            let circleRect = CGRect(
154                x: point.x - width/2,
155                y: point.y - width/2,
156                width: width,
157                height: width
158            )
159            path.addEllipse(in: circleRect)
160        }
161        
162        return path
163    }
164}
165
166#Preview {
167    RainbowTrailView()
168}