the making of the cyberpunk neon themed Magic 8 Ball app

Click to download project open source on my Github repo :)

let there be neon, magic, and…cyberpunk 8 ball…

Before getting started, it’s always good to have a wireframe, this project isn’t that complicated, but still a good habit to have, the free online wireframe site I used is miro

From here, the real grind/thrill begins.

***First of all, full disclosure***

For all the demo videos, it wasn’t realistic to record the actual process while making it since I had to spend a lot of time exploring and figuring things out, so the demo might not match the final image since the generative AI spits out random images each time, so the demo videos were made afterward.

So instead of creating an image from scratch, which isn’t necessary for this project, I used Photoshop Beta’s new generative AI-powered feature that could automatically generate similar style of images either from a prompt or reference image you could upload, or both, even better. If you hid it by accident, go to “window“, all the way to the bottom, click “Contextual Task Bar“. Here’s the process of using this incredible tool to create the neon cyberpunk city view background image for my main screen:

And again, with this powerful tool, I could design the launch screen image to my taste pretty efficiently, process below:

For the appicon, you could actually choose the main body you desire, in my case, I first chose my ball, then you could go ahead and remove the background, then use “Generative fill“ with a prompt to fill in with whatever vibe you desire. I wanted a neon sci-fi look magic 8 ball with a cyan neon background featuring frame and line textures, so be it…

Here’s my final ball on physical device ^_^

Sadly I couldn’t generate the exact same image again when I went back to make the demo video, but I’m pretty satisfied with the 3D neon effect, it sure looks like a ball that could give me some pretty future-proof answers.

The answer ball is a real grind, not only do I need to create an empty ball to appear on screen before anyone even taps the ASK button, I had to remove the background that’s white ish from a white crystal looking ball (well that’s the aesthetic I wanted so it shall be figured out!)…then I wanted to add some neon smoke inside the magical ball, eventually add a pedestal (which I mispeled as “pata stool“ in the prompt box, but AI figured it out, I’m impressed lol) underneath the ball so it looks like it’s floating in the middle of a cyberpunk neon city street.

The most challenging part of this is yet to be revealed…it’s not coding, it’s not designing…it’s the back and forth value tweaking process of making the NEON glow text from scratch…but here’s how I did it:

After I let it cook for a bit, finally, there shall be coding…the steps have been laid out in the wireframe above, so let’s take a look at the process and the code below, thanks for indulging me here again to read and thanks for caring:)

import UIKit

class ViewController: UIViewController {
 
    @IBOutlet weak var ballAnswer: UIImageView!

    @IBAction func askButton(_ sender: UIButton) {
        
        let ballArray = [#imageLiteral(resourceName: "ballOne.png"),#imageLiteral(resourceName: "ballTwo.png"),#imageLiteral(resourceName: "ballThree.png"),#imageLiteral(resourceName: "ballFour.png"),#imageLiteral(resourceName: "ballFive.png")]
        
        ballAnswer.image = ballArray.randomElement()!

    }
}