Happy Pride from Step Into Vision

Joseph Simpson

Did you know this website was run by a bisexual?

As I’m sure you know, bisexuals are well know for our subtlety. That’s why I made this very lowkey and subdued scene to celebrate.

An extremely tasteful display of pride

The code

I mocked this up quickly so the code is nothing fancy. It has a scene in Reality Composer Pro where I created the floor and stubbed in some particle emitters. I also pulled in the light beams from this lab and flipped them upside down.

The Biangles are made out simple triangles and added as attachments.

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: CGPoint(x: rect.midX, y: rect.maxY)) // tip at bottom
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY)) // left corner at top
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY)) // right corner at top
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY)) // close the path

        return path
    }
}
Attachment(id: "triMagenta", {
    Triangle()
        .foregroundStyle(.biMagenta)
        .opacity(0.8)
        .frame(width: triangleSize, height: triangleSize)
})

Attachment(id: "triBlue", {
    Triangle()
        .foregroundStyle(.biRoyalBlue)
        .opacity(0.8)
        .frame(width: triangleSize, height: triangleSize)
})

let triangles = Entity()
content.add(triangles)
triangles.position = [-3, 3, -4]
if let triMagenta = attachments.entity(for: "triMagenta") {
    triangles.addChild(triMagenta)
    triMagenta.setPosition([-0.25, 0.25, -0.1], relativeTo: triangles)
}
if let triBlue = attachments.entity(for: "triBlue") {
    triangles.addChild(triBlue)
    triBlue.setPosition([0.25, 0, 0], relativeTo: triangles)
}

The double crescent moon was a bit harder. I tried to draw it in code, but my skills were lacking. Instead, I ended up using the moon.fill SF Symbol. I used rotation and offset to get as close to the shape as I could. I drew these shapes over a LinearGradient using the bi colors.

Attachment(id: "moons", {
    ZStack {
        LinearGradient(
            gradient: Gradient(colors: [.biMagenta, .biPurple, .biRoyalBlue]),
            startPoint: .top,
            endPoint: .bottom
        )
        .mask(
            ZStack {
                Image(systemName: "moon.fill")
                    .rotationEffect(Angle(degrees: 224))
                    .offset(x: -340, y: -200)

                Image(systemName: "moon.fill")
                    .rotationEffect(Angle(degrees: 34))
                    .offset(x: 340, y: 200)
            }
                .frame(width: moonSize, height: moonSize)
                .font(.system(size: 944, weight: .light))
        )
    }
    .frame(width: moonSize, height: moonSize)
})

The text also uses the LinearGradient.

Attachment(id: "bisexuals", {
    Text("Bisexuals have always existed.")
        .font(.system(size: 366, weight: .heavy))
        .multilineTextAlignment(.center)
        .foregroundStyle(
            LinearGradient(
                gradient: Gradient(colors: [.biMagenta, .biPurple, .biRoyalBlue]),
                startPoint: .top,
                endPoint: .bottom
            )
        )
        .frame(width: 2000, height: 2000)
})

The particle emitters use the bi colors and the heart.fill SF Symbol. Read more about Using SF Symbols in Particle Emitters.

You can download the project from the Example Projects repo.

Happy Pride!

Joseph Simpson

Follow Step Into Vision

Questions or feedback?