Swiftpack.co -  Package - heestand-xyz/PixelKit
Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
heestand-xyz/PixelKit
Live Graphics Framework
.package(url: "https://github.com/heestand-xyz/PixelKit.git", from: "1.2.3")

PixelKit

Live Graphics Framework for iOS, macOS and tvOS
runs on RenderKit - powered by Metal

New development on lite branch.

Examples: Camera Effects - Green Screen
Info: Coordinate Space - Blend Operators - Effect Convenience Funcs - High Bit Mode - Apps

CameraPIX DepthCameraPIX ImagePIX VideoPIX ScreenCapturePIX StreamInPIX
ColorPIX CirclePIX RectanglePIX PolygonPIX ArcPIX LinePIX GradientPIX StackPIX NoisePIX TextPIX MetalPIX
LevelsPIX BlurPIX EdgePIX ThresholdPIX QuantizePIX TransformPIX KaleidoscopePIX TwirlPIX FeedbackPIX DelayPIX
ChannelMixPIX ChromaKeyPIX CornerPinPIX ColorShiftPIX CropPIX FlipFlopPIX RangePIX SharpenPIX SlopePIX SepiaPIX
BlendPIX CrossPIX LookupPIX DisplacePIX RemapPIX ReorderPIX ResolutionPIX ConvertPIX ReducePIX ClampPIX FreezePIX FlarePIX
BlendsPIX LumaLevelsPIX LumaBlurPIX LumaTransformPIX TimeMachinePIX ArrayPIX AirPlayPIX RecordPIX StreamOutPIX

See the PixelKit PIX List in Notion for PIXs in development.


Install

Swift Package

.package(url: "https://github.com/heestand-xyz/PixelKit.git", from: "1.2.0")

Import

import PixelKit

To access LiveColor and Resolution import the dependencies of PixelKit:

import LiveValues
import RenderKit

Setup

SwiftUI

struct ContentView: View {
    var body: some View {
        BlurPIXUI {
            CirclePIXUI()
        }
            .radius(0.25)
            .edgesIgnoringSafeArea(.all)
    }
}

UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let circlePix = CirclePIX(at: .fullscreen)

        let blurPix = BlurPIX()
        blurPix.input = circlePix
        blurPix.radius = 0.25

        let finalPix: PIX = blurPix
        finalPix.view.frame = view.bounds
        view.addSubview(finalPix.view)
        
    }
    
}

Rendered Image

.renderedImage [UIImage or NSImage]
.renderedTexture [MTLTexture]

Example: Camera Effects

SwiftUI

struct ContentView: View {
    var content: PIXUI {
        ColorShiftPIXUI {
            LevelsPIXUI {
                ResolutionPIXUI {
                    CameraPIXUI()
                }
            }
                .gamma(0.5)
                .brightness(LiveFloat(1.5))
        }
            .saturation(LiveFloat(0.5))
    }
    var body: some View {
        BlendsPIXUI {
            BlurPIXUI {
                RawPIXUI(pix: content.pix)
            }
                .radius(0.25)
            BlendsPIXUI {
                CirclePIXUI()
                    .bgColor(.clear)
                    .radius(0.25)
                RawPIXUI(pix: content.pix)
            }
                .blendMode(.multiply)
        }
            .blendMode(.over)
    }
}
let camera = CameraPIX()

let levels = LevelsPIX()
levels.input = camera
levels.brightness = 1.5
levels.gamma = 0.5

let colorShift = ColorShiftPIX()
colorShift.input = levels
colorShift.saturation = 0.5

let blur = BlurPIX()
blur.input = colorShift
blur.radius = 0.25

let res: Resolution = .custom(w: 1500, h: 1000)
let circle = CirclePIX(at: res)
circle.radius = 0.45
circle.bgColor = .clear

let finalPix: PIX = blur & (camera * circle)
finalPix.view.frame = view.bounds
view.addSubview(finalPix.view)

This can also be done with Effect Convenience Funcs:

let pix = CameraPIX()._brightness(1.5)._gamma(0.5)._saturation(0.5)._blur(0.25)

Remeber to add NSCameraUsageDescription to your info.plist

Example: Green Screen

import LiveValues import RenderKit import PixelKit

let cityImage = ImagePIX()
cityImage.image = UIImage(named: "city")

let supermanVideo = VideoPIX()
supermanVideo.load(fileNamed: "superman", withExtension: "mov")

let supermanKeyed = ChromaKeyPIX()
supermanKeyed.input = supermanVideo
supermanKeyed.keyColor = .green

let blendPix = BlendPIX()
blendPix.blendingMode = .over
blendPix.inputA = cityImage
blendPix.inputB = supermanKeyed

let finalPix: PIX = blendPix
finalPix.view.frame = view.bounds
view.addSubview(finalPix.view)

This can also be done with Blend Operators and Effect Convenience Funcs:

let pix = cityImage & supermanVideo._chromaKey(.green)

SwiftUI

struct ContentView: View {
    var body: some View {
        BlendsPIXUI {
            ImagePIXUI(image: UIImage(named: "city")!)
            ChromaKeyPIXUI {
                VideoPIXUI(fileNamed: "superman", withExtension: "mov")
            }
                .keyColor(.green)
        }
            .blendMode(.over)
    }
}

This is a representation of the Pixel Nodes Green Screen project.

Example: Depth Camera

import LiveValues import RenderKit import PixelKit

let cameraPix = CameraPIX()
cameraPix.camera = .front

let depthCameraPix = DepthCameraPIX.setup(with: cameraPix)

let levelsPix = LevelsPIX()
levelsPix.input = depthCameraPix
levelsPix.inverted = true

let lumaBlurPix = cameraPix._lumaBlur(with: levelsPix, radius: 0.1)

let finalPix: PIX = lumaBlurPix
finalPix.view.frame = view.bounds
view.addSubview(finalPix.view)

The DepthCameraPIX was added in PixelKit v0.8.4 and requires an iPhone X or newer.

Note to use the setup(with:filter:) method of DepthCameraPIX.
It will take care of orientation, color and enable depth on the CameraPIX.

To gain access to depth values ouside of the 0.0 and 1.0 bounds,
enable 16 bit mode like this: PixelKit.main.render.bits = ._16

Example: Multi Camera

let cameraPix = CameraPIX()
cameraPix.camera = .back

let multiCameraPix = MultiCameraPIX.setup(with: cameraPix, camera: .front)

let movedMultiCameraPix = multiCameraPix._scale(by: 0.25)._move(x: 0.375 * (9 / 16), y: 0.375)

let finalPix: PIX = camearPix & movedMultiCameraPix
finalPix.view.frame = view.bounds
view.addSubview(finalPix.view)

Note MultiCameraPIX requires iOS 13.

Coordinate Space

PixelKit coordinate space is normailzed to the vertical axis (1.0 in height) with the origin (0.0, 0.0) in the center.
Note that compared to native UIKit views the vertical axis is flipped and origin is moved, this is more convinent when working with graphics is PixelKit. A full rotation is defined by 1.0

Center: CGPoint(x: 0, y: 0)
Bottom Left: CGPoint(x: -0.5 * aspectRatio, y: -0.5)
Top Right: CGPoint(x: 0.5 * aspectRatio, y: 0.5)

Tip: Resolution has an .aspect property:
let aspectRatio: LiveFloat = Resolution._1080p.aspect

Blend Operators

A quick and convenient way to blend PIXs
These are the supported BlendingMode operators:

& !& + - * ** !** % ~ °
.over .under .add .subtract .multiply .power .gamma .difference .average cosine
<> >< ++ -- <-> >-< +-+
.minimum .maximum .addWithAlpha .subtractWithAlpha inside outside exclusiveOr
let blendPix = (CameraPIX() !** NoisePIX(at: .fullHD(.portrait))) * CirclePIX(at: .fullHD(.portrait))

Note when using Live values, one line if else statments are written with <?> & <=>:

let a: LiveFloat = 1.0
let b: LiveFloat = 2.0
let isOdd: LiveBool = .seconds % 2.0 < 1.0
let ab: LiveFloat = isOdd <?> a <=> b

The default global blend operator fill mode is .aspectFit, change it like this:
PIX.blendOperators.globalPlacement = .aspectFill

Live Values

Live values can be a constant (let) and still have changin values. Live values are ease to animate with the .live or .seconds static properites.

The Live Values:

  • CGFloat --> LiveFloat
  • Int --> LiveInt
  • Bool --> LiveBool
  • CGPoint --> LivePoint
  • CGSize --> LiveSize
  • CGRect --> LiveRect

Static properites:

  • LiveFloat.live
  • LiveFloat.seconds
  • LiveFloat.secondsSince1970
  • LiveFloat.touch / LiveFloat.mouseLeft
  • LiveFloat.touchX / LiveFloat.mouseX
  • LiveFloat.touchY / LiveFloat.mouseY
  • LivePoint.touchXY / LiveFloat.mouseXY
  • LiveFloat.gyroX
  • LiveFloat.gyroY
  • LiveFloat.gyroZ
  • LiveFloat.accelerationX/Y/X
  • LiveFloat.magneticFieldX/Y/X
  • LiveFloat.deviceAttitudeX/Y/X
  • LiveFloat.deviceGravityX/Y/X
  • LiveFloat.deviceHeading

finalPix.pixView.liveTouch(active: true)

Functions:

  • liveFloat.delay(seconds: 1.0)
  • liveFloat.filter(seconds: 1.0)
  • liveFloat.filter(frames: 60)

Static functions:

  • LiveFloat.noise(range: -1.0...1.0, for: 1.0)
  • LiveFloat.wave(range: -1.0...1.0, for: 1.0)

Effect Convenience Funcs

  • pix._reRes(to: ._1080p * 0.5) -> ResolutionPIX
  • pix._reRes(by: 0.5) -> ResolutionPIX
  • pix._brightness(0.5) -> LevelsPIX
  • pix._darkness(0.5) -> LevelsPIX
  • pix._contrast(0.5) -> LevelsPIX
  • pix._gamma(0.5) -> LevelsPIX
  • pix._invert() -> LevelsPIX
  • pix._opacity(0.5) -> LevelsPIX
  • pix._blur(0.5) -> BlurPIX
  • pix._edge() -> EdgePIX
  • pix._threshold(at: 0.5) -> ThresholdPIX
  • pix._quantize(by: 0.5) -> QuantizePIX
  • pix._position(at: CGPoint(x: 0.5, y: 0.5)) -> TransformPIX
  • pix._rotatate(to: .pi) -> TransformPIX
  • pix._scale(by: 0.5) -> TransformPIX
  • pix._kaleidoscope() -> KaleidoscopePIX
  • pix._twirl(0.5) -> TwirlPIX
  • pix._swap(.red, .blue) -> ChannelMixPIX
  • pix._key(.green) -> ChromaKeyPIX
  • pix._hue(0.5) -> ColorShiftPIX
  • pix._saturation(0.5) -> ColorShiftPIX
  • pix._crop(CGRect(x: 0.25, y 0.25, width: 0.5, height: 0.5)) -> CropPIX
  • pix._flipX() -> FlipFlopPIX
  • pix._flipY() -> FlipFlopPIX
  • pix._flopLeft() -> FlipFlopPIX
  • pix._flopRight() -> FlipFlopPIX
  • pix._range(inLow: 0.0, inHigh: 0.5, outLow: 0.5, outHigh: 1.0) -> RangePIX
  • pix._range(inLow: .clear, inHigh: .gray, outLow: .gray, outHigh: .white) -> RangePIX
  • pix._sharpen() -> SharpenPIX
  • pix._slope() - > SlopePIX
  • pixA._lookup(with: pixB, axis: .x) -> LookupPIX
  • pixA._lumaBlur(with: pixB, radius: 0.5) -> LumaBlurPIX
  • pixA._lumaLevels(with: pixB, brightness: 2.0) -> LumaLevelsPIX
  • pixA._vignetting(with: pixB, inset: 0.25, gamma: 0.5) -> LumaLevelsPIX
  • pixA._displace(with: pixB, distance: 0.5) -> DisplacePIX
  • pixA._remap(with: pixB) -> RemapPIX

Keep in mind that these funcs will create new PIXs.
Be careful of overloading GPU memory, some funcs create several PIXs.

MIDI

Here's an example of live midi values in range 0.0 to 1.0.

let circle = CirclePIX(at: ._1024)
circle.radius = .midi("13")
circle.color = .midi("17")

You can find the addresses by enabeling logging like this:

MIDI.main.log = true

High Bit Mode

Some effects like DisplacePIX and SlopePIX can benefit from a higher bit depth.
The default is 8 bits. Change it like this: PixelKit.main.render.bits = ._16

Enable high bit mode before you create any PIXs.

Note resources do not support higher bits yet.
There is currently there is some gamma offset with resources.

MetalPIXs

let metalPix = MetalPIX(at: ._1080p, code:
    """
    pix = float4(u, v, 0.0, 1.0);
    """
)
let metalEffectPix = MetalEffectPIX(code:
    """
    float gamma = 0.25;
    pix = pow(input, 1.0 / gamma);
    """
)
metalEffectPix.input = CameraPIX()
let metalMergerEffectPix = MetalMergerEffectPIX(code:
    """
    pix = pow(inputA, 1.0 / inputB);
    """
)
metalMergerEffectPix.inputA = CameraPIX()
metalMergerEffectPix.inputB = ImagePIX("img_name")
let metalMultiEffectPix = MetalMultiEffectPIX(code:
    """
    float4 inPixA = inTexs.sample(s, uv, 0);
    float4 inPixB = inTexs.sample(s, uv, 1);
    float4 inPixC = inTexs.sample(s, uv, 2);
    pix = inPixA + inPixB + inPixC;
    """
)
metalMultiEffectPix.inputs = [ImagePIX("img_a"), ImagePIX("img_b"), ImagePIX("img_c")]

Uniforms:

var lumUniform = MetalUniform(name: "lum")
let metalPix = MetalPIX(at: ._1080p, code:
    """
    pix = float4(in.lum, in.lum, in.lum, 1.0);
    """,
    uniforms: [lumUniform]
)
lumUniform.value = 0.5

Notes:

  • To gain camera access, on macOS, check Camera in the App Sandbox in your Xcode project settings under Capabilities.

inspired by TouchDesigner created by Anton Heestand XYZ

GitHub

link
Stars: 653
Last commit: 3 days ago

Release Notes

Version 0.6.1
1 year ago

This version includes several fixes and the new Luma Levels PIX

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco