A powerful and easy to use live mesh gradient renderer for iOS, living branch of archived EthanLipnik's MeshKit
This project wouldn't be possible without the awesome work from Moving Parts and their Swift Playground
MeshKit is an easy to use live mesh gradient renderer for iOS. In just a few lines of code, you can create a mesh gradient.
private let randomizer = MeshRandomizer(colorRandomizer: { _, _, _, _, _, _ in
return
})
private let colors: MeshColorGrid = MeshKit.generate(palette: Hue.purple, size: MeshSize(width: 4, height: 4))
public var grainAlpha: Float = MeshDefaults.grainAlpha
public var subdivisions: Float = Float(MeshDefaults.subdivisions)
public var colorSpace: CGColorSpace?
public var body: some View {
ZStack {
Mesh(colors: colors,
animatorConfiguration: .init(meshRandomizer: randomizer),
grainAlpha: grainAlpha,
subdivisions: Int(subdivisions),
colorSpace: colorSpace)
.edgesIgnoringSafeArea(.all)
VStack {
}
}
}The snippet above will generate the effect seen in the video demo.
MeshView is at the core of MeshKit, encapsulating an SCNView with enhanced capabilities to render mesh gradients efficiently. It's straightforward to use:
To create a mesh gradient, first initialize a MeshView and add it to your view hierarchy. Then, call the create method with an array of MeshNode.Color:
let meshView = MeshView()
view.addSubview(meshView)
meshView.create([
// Define your mesh points and colors here
])You can invoke this method multiple times to update the gradient dynamically.
Each mesh point is defined by the MeshNode.Color structure, comprising three components:
Specifies the grid position for the color, such as 0, 0 for a corner. This parameter is critical for the gradient's structure and no two colors should have the same point.
Represents the color's x and y coordinates for interpolation. Adjusting this will shift the color within the gradient. Avoid altering the location of edge points to maintain the gradient's shape.
The UIColor for the point. Note that alpha values are not utilized and will be disregarded. Choose colors that blend well for a smoother gradient.
MeshView supports customization of mesh width and height, though it's recommended to keep them equal for simplicity. The default dimensions are 3x3. If you choose to alter this, remember to provide a corresponding number of colors. For instance, a 2x2 mesh requires 4 colors, while a 4x4 mesh needs 16.
You can modify the mesh's subdivisions to change its "resolution." The default setting is 18. Increasing this value can enhance detail but may affect performance.
Special thanks to Moving Parts for their foundational work in gradient meshes.
And to EthanLipnik for creating the initial version.