Particles in VertexKit & PixelKit

We’ll be creating this noise particle cloud. This tutorial applies to iOS & macOS. VertexKit is an extension of PixelKit. Get started with PixelKit in this tutorial.

Add the VertexKit extension framework as a pod:

pod 'VertexKit'

Now you can import the frameworks:

import LiveValues
import RenderKit
import PixelKit
import VertexKit

In the view controller, add black background:

// macOS
view.wantsLayer = true
view.layer!.backgroundColor = .black
// iOS
view.backgroundColor = .black

We will need high precision colors so up the bits to 16:

PixelKit.main.render.bits = ._16

Each particle (vertex) will be represented by a pixel.

Define the particle count resolution:

let pres: PIX.Res = .square(Int(sqrt(1_000_000)))

One million particles in a thousand by thousand grid.

First we create the source particle pixels with a noise pix:

let noise = NoisePIX(res: pres)
noise.colored = true
noise.octaves = 5
noise.zPosition = .live * 0.1

The live parameter is a live counting value of frames / fps.

Prepare the res for the final render:

// macOS
let res: Resolution = .cgSize(view.bounds.size) * 2
// iOS
let res: Resolution = .fullscreen

Now let’s create the particle system:

let particles = ParticlesUV3DPIX(res: res)
particles.vtxPixIn = noise - 0.5
particles.color = LiveColor(lum: 1.0, a: 0.1)

Finally we add the final pix and add it to the view:

let final: PIX = particles
final.view.frame = view.bounds
final.view.checker = false

Run the app and you should see the particle system!

If you want a resizable window on macOS make the final pix and particle pix global, then add this:

override func viewWillLayout() {
    final.view.frame = view.bounds
    particles.resolution = .cgSize(view.bounds.size) * 2

That’s it!

Lämna en kommentar

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