// // SeismicLineView.swift // // A full-screen Metal view that renders a data series as a glowing // "seismic fault line" cutting through a liquid-chrome color field. // // - The FIELD: three sequential value-noise samples, each domain-warped // by the previous one, drive a gamma-shaped chrome curve through a // four-color weighted ramp (shadow -> weighted mix -> lifted // highlight), plus a tint layer and a specular glint on the crests. // - The LINE: a Catmull-Rom spline through seven normalized control // points (your data), each bobbing on its own slow sine. The line // refracts the field with chromatic aberration sheared across the // local normal, wears a bright core with a traveling shimmer, and // fans a spectral wash into the field around it. // // Performance notes (learned the hot way): // - Call setRendering(false) whenever the view is off-screen. MTKViews // keep drawing at full rate even at alpha 0 — a paged feed of these // will cook a phone unless only the visible one runs. // - contentScaleFactor is 1.5 by default, not native 3x. The content is // soft gradients; the upscale is invisible and quarters the fragment // load. Raise it if you put hard edges in the shader. // // MIT License — do what you like, attribution appreciated. // import MetalKit import UIKit public final class SeismicLineView: UIView, MTKViewDelegate { public struct Configuration { /// Seven control points, 0...1 (0 = top of the view). They are /// the line's shape; resample your data to seven before passing. public var points: [Double] /// Four ramp colors. Index 0 doubles as the shadow base. public var colors: [UIColor] /// Per-color weights (any positive scale) — the field mix. public var weights: [Double] public init(points: [Double], colors: [UIColor], weights: [Double]) { self.points = points self.colors = colors self.weights = weights } } private let configuration: Configuration private let metalView: MTKView private var pipeline: MTLRenderPipelineState? private var commandQueue: MTLCommandQueue? private let startTime = CACurrentMediaTime() public init(configuration: Configuration) { self.configuration = configuration metalView = MTKView(frame: .zero, device: MTLCreateSystemDefaultDevice()) super.init(frame: .zero) metalView.delegate = self metalView.preferredFramesPerSecond = 30 metalView.isOpaque = true metalView.framebufferOnly = true metalView.contentScaleFactor = 1.5 metalView.frame = bounds metalView.autoresizingMask = [.flexibleWidth, .flexibleHeight] addSubview(metalView) buildPipeline() } @available(*, unavailable) required init?(coder: NSCoder) { fatalError() } /// Pause/resume the render loop. Pause every instance that isn't /// on screen — this is the difference between ambience and a hand /// warmer. public func setRendering(_ on: Bool) { metalView.isPaused = !on } private static let shaderSource = """ #include using namespace metal; struct VertexOut { float4 position [[position]]; float2 uv; }; vertex VertexOut seismicVertex(uint vid [[vertex_id]]) { float2 positions[3] = { float2(-1, -1), float2(3, -1), float2(-1, 3) }; VertexOut out; out.position = float4(positions[vid], 0, 1); out.uv = positions[vid] * 0.5 + 0.5; return out; } struct Uniforms { float time; float2 resolution; float4 colors[4]; float4 weights; float4 pointY[7]; // .x = normalized line y per control point }; float hashv(float2 p) { return fract(sin(dot(p, float2(127.1, 311.7))) * 43758.5453); } float vnoise(float2 p) { float2 i = floor(p); float2 f = fract(p); float2 s = f * f * (3.0 - 2.0 * f); return mix( mix(hashv(i), hashv(i + float2(1, 0)), s.x), mix(hashv(i + float2(0, 1)), hashv(i + float2(1, 1)), s.x), s.y ); } float fbm(float2 p) { float v = 0.0; float a = 0.5; for (int i = 0; i < 3; i++) { v += a * vnoise(p); p *= 2.03; a *= 0.5; } return v; } // LIQUID CHROME field: three sequential value-noise samples, each // domain-warping the next; the third drives a gamma-shaped chrome // curve through the weighted color ramp, with a highlight cut, a // runner-up tint layer, and a cool specular glint. float3 field(float2 p, float t, constant Uniforms &u) { float speed = 0.34; float warp = 1.7; float ts = t * speed; float2 q = p * 2.4; float n1 = vnoise(q + float2(ts, ts * 0.6)); float n2 = vnoise(q + n1 * warp + float2(-ts * 0.4, ts * 0.3)); float n3 = vnoise(q * 1.5 + n2 * warp + float2(ts * 0.2, -ts * 0.5)); float chrome = pow(clamp(n3, 0.0, 1.0), 1.35); float wsum = 0.0; float3 silver = float3(0.0); int top = 0; int second = 1; for (int i = 0; i < 4; i++) { float w = max(u.weights[i], 0.02); silver += u.colors[i].rgb * w; wsum += w; if (u.weights[i] > u.weights[top]) { top = i; } } silver /= max(wsum, 0.0001); for (int i = 0; i < 4; i++) { if (i != top && u.weights[i] > u.weights[second]) { second = i; } } if (second == top) { second = (top + 1) % 4; } float3 shadow = u.colors[0].rgb * 0.30; float3 highlight = mix(silver, float3(0.85, 0.92, 1.0), 0.45); float3 tint = u.colors[second].rgb; float3 col = mix(shadow, silver, chrome); col = mix(col, highlight, smoothstep(0.80, 0.98, chrome)); col += tint * smoothstep(0.3, 0.6, n1) * 0.30; float spec = pow(max(chrome, 0.0), 7.0); col += float3(0.6, 0.6, 0.8) * spec * 0.22; return col; } float controlPoint(int i, float t, constant Uniforms &u) { i = clamp(i, 0, 6); return u.pointY[i].x + 0.010 * sin(t * 0.8 + float(i) * 1.9); } // CATMULL-ROM through the seven points (each bobbing on its own // sine). Per-segment smoothstep has zero-slope shoulders at every // knot and terraces the line into kinks; shared central-difference // tangents keep one continuous flow. float lineY(float x, float t, constant Uniforms &u) { float fx = clamp(x, 0.0, 1.0) * 6.0; int i = clamp(int(floor(fx)), 0, 5); float f = fract(fx); float p0 = controlPoint(i - 1, t, u); float p1 = controlPoint(i, t, u); float p2 = controlPoint(i + 1, t, u); float p3 = controlPoint(i + 2, t, u); float m1 = 0.5 * (p2 - p0); float m2 = 0.5 * (p3 - p1); float f2 = f * f; float f3 = f2 * f; return (2.0 * f3 - 3.0 * f2 + 1.0) * p1 + (f3 - 2.0 * f2 + f) * m1 + (-2.0 * f3 + 3.0 * f2) * p2 + (f3 - f2) * m2; } fragment float4 seismicFragment( VertexOut in [[stage_in]], constant Uniforms &u [[buffer(0)]] ) { float aspect = u.resolution.x / max(u.resolution.y, 1.0); float2 uv = float2(in.uv.x, 1.0 - in.uv.y); float2 p = float2(uv.x * aspect, uv.y); float t = u.time; float yC = lineY(uv.x, t, u); float d = uv.y - yC; // Local normal from the slope — the aberration shears ACROSS // the line, not just vertically. float slope = (lineY(uv.x + 0.01, t, u) - lineY(uv.x - 0.01, t, u)) / 0.02; float2 n = normalize(float2(-slope, 1.0)); // Wide dispersion zone, FEATHERED by noise so its edge dissolves // into the field instead of reading as a band. float feather = fbm(float2(uv.x * 2.6, d * 4.0) + t * 0.05); float prox = exp(-(d * d) / (2.0 * 0.26 * 0.26)) * (0.55 + 0.45 * feather); float2 shift = n * prox * 0.048; // Prism taps: r and b sample the field displaced in opposite // directions along the normal. float3 col; col.r = field(p + shift * 2.3, t, u).r; col.g = field(p + shift * 0.3, t, u).g; col.b = field(p - shift * 2.0, t, u).b; // Spectral wash: an iridescent cosine palette whose hue drifts // along the line, riding LINEAR proximity so it spews far. float3 rainbow = 0.5 + 0.5 * cos( 6.2831 * (d * 3.2 + t * 0.12) + float3(0.0, 2.094, 4.188) + uv.x * 2.6 ); col += rainbow * prox * 0.32; // The light: a thin filament core with a whisper shimmer (deep // modulation beads the line into separate blobs — keep it >= 90%), // plus a soft glow. float core = exp(-(d * d) / (2.0 * 0.008 * 0.008)); float glow = exp(-(d * d) / (2.0 * 0.028 * 0.028)); float shimmer = 0.94 + 0.06 * sin(uv.x * 21.0 - t * 2.2); col += float3(1.0) * core * 0.75 * shimmer; col += float3(0.9, 0.95, 1.0) * glow * 0.22; // The lower plate sits a breath darker — the line DIVIDES. col *= 1.0 - 0.10 * smoothstep(0.0, 0.3, d); return float4(col, 1.0); } """ private func buildPipeline() { guard let device = metalView.device else { return } commandQueue = device.makeCommandQueue() do { let library = try device.makeLibrary(source: Self.shaderSource, options: nil) let descriptor = MTLRenderPipelineDescriptor() descriptor.vertexFunction = library.makeFunction(name: "seismicVertex") descriptor.fragmentFunction = library.makeFunction(name: "seismicFragment") descriptor.colorAttachments[0].pixelFormat = metalView.colorPixelFormat pipeline = try device.makeRenderPipelineState(descriptor: descriptor) } catch { NSLog("SeismicLineView shader compile failed: \(error)") } } public func mtkView(_ view: MTKView, drawableSizeWillChange size: CGSize) {} public func draw(in view: MTKView) { guard let pipeline = pipeline, let commandQueue = commandQueue, let descriptor = view.currentRenderPassDescriptor, let drawable = view.currentDrawable, let commandBuffer = commandQueue.makeCommandBuffer(), let encoder = commandBuffer.makeRenderCommandEncoder(descriptor: descriptor) else { return } struct Uniforms { var time: Float var resolution: SIMD2 var colors: (SIMD4, SIMD4, SIMD4, SIMD4) var weights: SIMD4 var pointY: (SIMD4, SIMD4, SIMD4, SIMD4, SIMD4, SIMD4, SIMD4) } func component(_ color: UIColor) -> SIMD4 { var r: CGFloat = 0, g: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0 color.resolvedColor(with: traitCollection).getRed(&r, green: &g, blue: &b, alpha: &a) return SIMD4(Float(r), Float(g), Float(b), Float(a)) } func point(_ index: Int) -> SIMD4 { let value = index < configuration.points.count ? configuration.points[index] : 0.5 return SIMD4(Float(min(max(value, -0.05), 1.18)), 0, 0, 0) } func color(_ index: Int) -> SIMD4 { component(index < configuration.colors.count ? configuration.colors[index] : .systemBlue) } func weight(_ index: Int) -> Float { index < configuration.weights.count ? Float(configuration.weights[index]) : 0 } var uniforms = Uniforms( time: Float(CACurrentMediaTime() - startTime), resolution: SIMD2(Float(view.drawableSize.width), Float(view.drawableSize.height)), colors: (color(0), color(1), color(2), color(3)), weights: SIMD4(weight(0), weight(1), weight(2), weight(3)), pointY: (point(0), point(1), point(2), point(3), point(4), point(5), point(6)) ) encoder.setRenderPipelineState(pipeline) encoder.setFragmentBytes(&uniforms, length: MemoryLayout.stride, index: 0) encoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3) encoder.endEncoding() commandBuffer.present(drawable) commandBuffer.commit() } }