Getting started with PixelKit

PixelKit is a graphics framework for iOS and macOS that’s written in Swift & Metal. Tho you only need to know Swift to get started.

First create a new Xcode project (iOS Single View App).

Then we use CocoaPods to install PixelKit from the terminal.

sudo gem install cocoapods
cd ~/Documents/.../Project
pod init

This will create a ”Podfile”, in this file add the following:

pod 'PixelKit'

Then run this in the terminal:

pod init

Now you can import PixelKitand add the following code to your viewDidLoad to create a CirclePIX:

let circle = CirclePIX(res: .fullscreen)

let final: PIX = circle
final.view.frame = view.bounds
view.addSubview(final.view)

Then run the app and you should see a circle on your screen.


Now let’s blend in an image.

First add the image to your Assets.xcassets. Then load it like this with an ImagePIX:

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

Then blend the circle and image together with a BlendPIX:

let blend = BlendPIX()
blend.inPixA = circle
blend.inPixB = image
blend.blendingMode = .multiply

Finally point final to blend and run the app.


Now let’s blur the blend.

Start by making the background color of the circle clear:

circle.bgColor = .clear

Then create a BlurPIX and add in the image:

let blur = BlurPIX()
blur.inPix = image
blur.radius = 0.5

The blend the textures like this with a new BlendPIX:

let blendOver = BlendPIX()
blendOver.inPixA = blur
blendOver.inPixB = blend
blendOver.blendingMode = .over

Finally we can add a LevelsPIX to our texture:

let levels = LevelsPIX()
levels.inPix = blendOver
levels.brightness = 1.25
levels.gamma = 0.75

The final code should look like this:

let circle = CirclePIX(res: .fullscreen)
circle.bgColor = .clear

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

let blend = BlendPIX()
blend.inPixA = circle
blend.inPixB = image
blend.blendingMode = .multiply

let blur = BlurPIX()
blur.inPix = image
blur.radius = 0.5

let blendOver = BlendPIX()
blendOver.inPixA = blur
blendOver.inPixB = blend
blendOver.blendingMode = .over

let levels = LevelsPIX()
levels.inPix = blendOver
levels.brightness = 1.25
levels.gamma = 0.75

let final: PIX = levels
final.view.frame = view.bounds
view.addSubview(final.view)

You can also achieve the same result with this more minimalistic way:

((image._blur(0.5) & (circle * image)) * 1.25) !** 0.75

You can find more effects in the Effect Docs.

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *