A powerful and easy to use live mesh gradient renderer for iOS.

Related tags

Color MeshKit
Overview

MeshKit

A powerful and easy to use live mesh gradient renderer for iOS.

This project wouldn't be possible without the awesome work from Moving Parts and their Swift Playground

What is MeshKit?

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.

Usage

You can use the MeshView to render the view. This basically contains a SCNView with some extra magic.

To generate a mesh with the MeshView, you call the create method after initializing it.
let meshView = MeshView()
view.addSubview(meshView)

meshView.create([
                .init(point: (0, 0), location: (0, 0), color: UIColor(red: 0.149, green: 0.275, blue: 0.325, alpha: 1.000)),
                .init(point: (0, 1), location: (0, 1), color: UIColor(red: 0.157, green: 0.447, blue: 0.443, alpha: 1.000)),
                .init(point: (0, 2), location: (0, 2), color: UIColor(red: 0.165, green: 0.616, blue: 0.561, alpha: 1.000)),
                
                .init(point: (1, 0), location: (1, 0), color: UIColor(red: 0.541, green: 0.694, blue: 0.490, alpha: 1.000)),
                .init(point: (1, 1), location: (Float.random(in: 0.3...1.8), Float.random(in: 0.3...1.5)), color: UIColor(red: 0.541, green: 0.694, blue: 0.490, alpha: 1.000)),
                .init(point: (1, 2), location: (1, 2), color: UIColor(red: 0.914, green: 0.769, blue: 0.416, alpha: 1.000)),
                
                .init(point: (2, 0), location: (2, 0), color: UIColor(red: 0.957, green: 0.635, blue: 0.380, alpha: 1.000)),
                .init(point: (2, 1), location: (2, 1), color: UIColor(red: 0.933, green: 0.537, blue: 0.349, alpha: 1.000)),
                .init(point: (2, 2), location: (2, 2), color: UIColor(red: 0.906, green: 0.435, blue: 0.318, alpha: 1.000)),
            ])

This can be called as many times as you want if you ever want to change the gradient.

The MeshView.create method needs a MeshNode.Color array. These are simple ways to interface with the points on the mesh gradient.

The Color struct has 3 parts. point, location, and color.

point – Where the color should exist on the gradient. This is different from location as this is meant for where on the square it should exist. For example, 0, 0 is one of the corners. No interpolation is involved here.

No two colors should have the same point.

location – Two floats on the x and y axis that will move the color and interpolate it's neighboring colors. What this basically means is where you actually want the color to go on the gradient.

Don't change the location for the edges of the gradient or it will have a weird shape.

color – A UIColor for the point. Be sure to choose colors that will interpolate with each other well.

Alphas are not used and will be ignored.

You can also set the width and height when creating the mesh.

For simplicity, the width and height should be the same. By default both are set to 3. If you increase/decrease it, then you will need to supply the width/height squared. So if you set it to 2 then you will need to give it 4 colors. It would look like this

meshView.create([
                .init(point: (0, 0), location: (0, 0), color: UIColor(red: 0.149, green: 0.275, blue: 0.325, alpha: 1.000)),
                .init(point: (0, 1), location: (0, 1), color: UIColor(red: 0.157, green: 0.447, blue: 0.443, alpha: 1.000)),
                
                .init(point: (1, 0), location: (1, 0), color: UIColor(red: 0.541, green: 0.694, blue: 0.490, alpha: 1.000)),
                .init(point: (1, 1), location: (Float.random(in: 0.3...1.8), Float.random(in: 0.3...1.5)), color: UIColor(red: 0.541, green: 0.694, blue: 0.490, alpha: 1.000)),
]

If you set it to 4 then you would need to give it 16 colors and so on.

As well as setting the width and height, you can also change the subdivisions.

This is the easiest setting to change. It changes the "resolution" of the wireframe. By default it is set to 18. Raising it will exponentially decrease performance.

Plans

  • More shape options
  • Easier methods to animate location changes
  • Color generating
  • Display P3 and other color profiles rendering/exporting
  • HDR support
  • More efficient rendering (Metal?)
  • macOS support
  • XCTests

Acknowledgments

You might also like...
Yet another extension to manipulate colors easily in Swift and SwiftUI
Yet another extension to manipulate colors easily in Swift and SwiftUI

DynamicColor provides powerful methods to manipulate colors in an easy way in Swift and SwiftUI. Requirements • Usage • Installation • Contribution •

PrettyColors is a Swift library for styling and coloring text in the Terminal.

PrettyColors is a Swift library for styling and coloring text in the Terminal. The library outputs ANSI escape codes and conforms to ECMA Standard 48.

A pure Swift library that allows you to easily convert SwiftUI Colors to Hex String and vice versa.
A pure Swift library that allows you to easily convert SwiftUI Colors to Hex String and vice versa.

iOS · macOS · watchOS · tvOS A pure Swift library that allows you to easily convert SwiftUI Colors to Hex String and vice versa. There is also support

SheetyColors is an action sheet styled color picker for iOS
SheetyColors is an action sheet styled color picker for iOS

📱 Based on UIAlertController: The SheetyColors API is based on UIKit's UIAlertController. Simply add buttons to it as you would for any other Action Sheet by defining UIAlertAction instances. Therefore, it nicely integrates with the look & feel of all other native system dialogs. However, you can also chose to use the color picker it self without an action sheet.

A tool to calculate the color ratio of UIImage in iOS.
A tool to calculate the color ratio of UIImage in iOS.

UIImageColorRatio A tool to calculate the color ratio of UIImage in iOS. How to use UIImageColorRatio Get the color ratio of UIImage. let image = ...

ImagePalette - Swift/iOS port of Android's Palette

ImagePalette - Swift/iOS port of Android's Palette

An unintrusive & light-weight iOS app-theming library with support for animated theme switching.
An unintrusive & light-weight iOS app-theming library with support for animated theme switching.

Gestalt Gestalt is an unintrusive and light-weight framework for application theming with support for animated theme switching. Usage Let's say you wa

An Adobe .ase (Adobe Swatch Exchange File), .aco (Photoshop swatch file) reader/writer package for Swift (macOS, iOS, tvOS, macCatalyst)

ColorPaletteCodable A palette reader/editor/writer package for iOS, macOS, watchOS and tvOS, supporting the following formats Adobe Swatch Exchange (.

iTunes 11 Style Color Art Detection for iOS
iTunes 11 Style Color Art Detection for iOS

iTunes 11 Style Color Art Detection for iOS. Original implementation from Fred Leitz Port of ColorArt code from OS X to iOS. Usage #include ColorArt/

Releases(0.1)
Owner
Ethan Lipnik
Ethan Lipnik
Conical (angular) gradient for iOS written in Swift

AEConicalGradient Conical (angular) gradient in Swift I hope that somebody will find this useful. And nice. Usage AEConicalGradient is a minion which

Marko Tadić 82 Dec 27, 2022
Color framework for Swift & Objective-C (Gradient colors, hexcode support, colors from images & more).

Swift 3 To use the Swift 3 version, add this to your Podfile (until 2.2 or higher is released): pod 'ChameleonFramework/Swift', :git => 'https://githu

Vicc Alexander 12.5k Dec 27, 2022
iOS app for Technex, IIT(BHU) Varanasi. This project is closed before completion. You can use this app for learning purpose. You can use this app as a templet of any event related app.

technex-ios iOS app for Technex, IIT(BHU) Varanasi. This project is closed before completion for some reasons. You can use this app for learning purpo

Jogendra 12 May 9, 2022
A Lightweight But Powerful Color Kit (Swift)

BCColor A lightweight but powerful color kit (Swift) Features Pick Colors From Image Generate Monochrome Image Support Hex Color Style Lighten / Darke

Xiaobo Zhang 418 Nov 25, 2022
Powerful animated gradientView in swift 🌈

FancyGradient is a UIView subclass which let's you animate gradients in your iOS app. It is purely written in Swift. Quickstart Static gradient let fa

Konstantinos Nikoloutsos 62 Jul 14, 2022
All wikipedia colors implemented as easy to use UIColor extension 🌈

UIColor-WikiColors All wikipedia colors implemented as an easy to use UIColor extension. Have you ever tried using UIColor.lightBlue just to be welcom

Szymon Maślanka 58 Jul 30, 2022
A pure Swift library for using ANSI codes. Basically makes command-line coloring and styling very easy!

Colors A pure Swift library for using ANSI codes. Basically makes command-line coloring and styling very easy! Note: Colors master requires Xcode 7.3

Chad Scira 27 Jun 3, 2021
ColorKit makes it easy to find the dominant colors of an image

ColorKit is your companion to work with colors on iOS. Features Installation Sample Project Contributing License Features Dominant Colors Col

Boris Emorine 569 Dec 29, 2022
Colour blindness simulation and testing for iOS

Color Deficiency Snapshot Tests This package makes it easier for you to understand the implications of your app's design on users with various types o

James Sherlock 69 Sep 29, 2022
A beautiful set of predefined colors and a set of color methods to make your iOS/OSX development life easier.

Installation Drag the included Colours.h and Colours.m files into your project. They are located in the top-level directory. You can see a demo of how

Ben Gordon 3.1k Dec 28, 2022