DEV Community

Prophet
Prophet

Posted on

Let’s Build a Fart Button App for Apple Vision Pro

One of Us

In our community, it is a rite of passage to build the cult classic fart button app.

Will you record your own farts? Invent a way to generate all kinds of different farts? Surprise us with something different? That’s up to you. You can built any app you like, as long as it’s the fart button.

This guide will walk you through creating a simple Fart Button app for Apple Vision Pro using SwiftUI and RealityKit. The app will display a floating button in visionOS, and when pressed, it will play a fart sound.

Prerequisites

Before you begin, ensure you have:
1. A Mac running macOS Sonoma or later
2. Xcode 15 or later installed
3. The visionOS SDK (comes with Xcode)
4. Basic knowledge of Swift

Step 1: Create a New visionOS Project

1.  Open Xcode.
2.  Click Create a new project.
3.  Select visionOS App and click Next.
4.  Name your app Fart Button, set Interface to SwiftUI, and set the Language to Swift.
5.  Choose a location to save the project and click Create.
Enter fullscreen mode Exit fullscreen mode

Step 2: Add a Fart Sound to Your Project

You need a fart sound file for the app:
1. Record one of your farts with a phone or voice recorder. You could also download a fart sound effect (MP3 or WAV). Ensure you have the rights to use it.
2. Drag the sound file into Xcode’s Assets folder.
3. Rename it to fart.mp3 (or fart.wav if using WAV).

Step 3: Create the Fart Button UI

Open ContentView.swift and replace its contents with the following code:

import SwiftUI
import AVFoundation

struct ContentView: View {
    @State private var audioPlayer: AVAudioPlayer?

    var body: some View {
        VStack {
            Button(action: playFartSound) {
                Text("💨 Fart")
                    .font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .clipShape(Circle())
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.clear)
    }

    func playFartSound() {
        guard let soundURL = Bundle.main.url(forResource: "fart", withExtension: "mp3") else {
            print("Fart sound not found")
            return
        }
        do {
            audioPlayer = try AVAudioPlayer(contentsOf: soundURL)
            audioPlayer?.play()
        } catch {
            print("Error playing sound: \(error.localizedDescription)")
        }
    }
}

#Preview {
    ContentView()
}
Enter fullscreen mode Exit fullscreen mode

Explanation:
• The button displays a fart emoji and text.
• When pressed, it calls playFartSound(), which plays the sound from the app bundle.

Step 4: Deploy the App to the Vision Pro Simulator

1.  Select an Apple Vision Pro device in the simulator dropdown.
2.  Press Cmd + R to run the app.
3.  The app should display a floating fart button.
4.  Click it and enjoy the sound!
Enter fullscreen mode Exit fullscreen mode

Step 5: Make the Button Float in Space

For a more immersive 3D experience, modify FartButtonView.swift and replace ContentView with the following code:

import SwiftUI
import RealityKit
import AVFoundation

struct FartButtonView: View {
    @State private var audioPlayer: AVAudioPlayer?

    var body: some View {
        RealityView { content in
            let buttonEntity = ModelEntity(mesh: .generateSphere(radius: 0.1))
            buttonEntity.generateCollisionShapes(recursive: true)
            content.add(buttonEntity)

            let gestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(playFartSound))
            buttonEntity.addGestureRecognizer(gestureRecognizer)
        }
    }

    @objc func playFartSound() {
        guard let soundURL = Bundle.main.url(forResource: "fart", withExtension: "mp3") else { return }
        do {
            audioPlayer = try AVAudioPlayer(contentsOf: soundURL)
            audioPlayer?.play()
        } catch {
            print("Error playing sound: \(error.localizedDescription)")
        }
    }
}

#Preview {
    FartButtonView()
}
Enter fullscreen mode Exit fullscreen mode

Explanation:
• Uses RealityView to create a floating 3D sphere as the fart button.
• Detects tap gestures to trigger the sound.

Step 6: Run It in visionOS Simulator

1.  Select Apple Vision Pro in Xcode’s device list.
2.  Press Cmd + R to launch the app.
3.  Tap the floating button to trigger a hilarious fart sound.
Enter fullscreen mode Exit fullscreen mode

Bonus: Make the Fart Button Follow Your Gaze

Modify the button’s placement in RealityKit:

buttonEntity.position = SIMD3(0, 0, -0.5) // Place it in front of the user
Enter fullscreen mode Exit fullscreen mode

This keeps the fart button floating half a meter in front of your face!

Final Thoughts

You just built a Fart Button App for Apple Vision Pro! You now know how to:
✅ Create a visionOS app
✅ Play audio files in Swift
✅ Use RealityKit for 3D interactions

Now, go forth and unleash fart-powered entertainment on the Vision Pro!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

If this article connected with you, consider tapping ❤️ or leaving a brief comment to share your thoughts!

Okay