Create account

DEV Community

Jesus Guerra

Posted on May 7, 2022 • Updated on May 12, 2022

Place iOS - r/place canvas clone

#appwritehack #swift

Overview of My Submission

Place iOS is r/place canvas clone made with Appwrite and pure SwiftUI.
I decide create this project for Appwrite Hackathon to test me in SwiftUI and use majority appwrite Apis. 😃
I'm a super fan of pixel art and this project fit perfect whit it. 🟩🟨🟪

The rules are simple: You can place a pixel every 30 seconds and the canvas will be updated using realtime.

Manage accounts, database, storage, sessions, realtime, functions and more were super simple with appwrite. 😎

My approach for create the canvas in SwiftUI

class CanvasViewModel: ObservableObject {

    @Published var documents: [Doc] = [Doc]()

    // MARK: - Properties
    let canvasWidth: Int = 256
    let canvasHeight: Int = 256

    /// Pixel per pixels 👀
    /// if canvasPixelFactor is high every pixels looks better (no antialiasing) but the performance in older devices will be compromised... Int(UIScreen.main.scale) + (3-12) works good
    let canvasPixelFactor: Int = Int(UIScreen.main.scale) + 3

    /// Computed canvas size
    var canvasWidthComputed: CGFloat {
        return CGFloat(canvasWidth * canvasPixelFactor)
    }

    var canvasHeightComputed: CGFloat {
        return CGFloat(canvasWidth * canvasPixelFactor)
    }
    .
    .
    .
}

Fetch pixels from storage and database, then create image

private func createImage(completionHandler: @escaping (UIImage?, String?) -> Void){

        guard !documents.isEmpty else { fatalError() }

        guard canvasWidth > 0 && canvasHeight > 0 else { fatalError() }


        DispatchQueue.global(qos: .utility).async {
            let width = self.canvasWidth * self.canvasPixelFactor
            let height = self.canvasHeight * self.canvasPixelFactor
            let rgbColorSpace =     CGColorSpaceCreateDeviceRGB()
            let bitmapInfo =        CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue) // premultipliedLast or .none
            let bitsPerComponent =  8
            let bitsPerPixel =      32

            var pixels = [Pixel]()

            if self.pixelsArray.isEmpty {

                for _ in 0..<width {
                    for _ in 0..<height {
                        pixels.append(Pixel(r: 255, g: 255, b: 255, a: 255))
                    }
                }

                // Colorize
                for doc in self.documents {
                    let x = doc.x + 1
                    let y = doc.y + 1

                    let startXPx = x > 0 ? Int((x-1) * self.canvasPixelFactor) : 1
                    let endXPx = Int(x * self.canvasPixelFactor)

                    let startYPx = y > 0 ? Int((y-1) * self.canvasPixelFactor) : 1
                    let endYPx = Int(y * self.canvasPixelFactor)

                    for i in startXPx..<endXPx{
                        for j in startYPx..<endYPx{
                            let offset: Int = (Int(self.canvasWidthComputed) * j) + i
                            pixels[offset] = Pixel(hexString: doc.hex)
                        }
                    }
                }

                .
                .
                .
                .
    }

Bot

Also taking advantage of appwrite SDK's, i made a Bot in python for create pixel art in the canvas.🤖

The bot converts Sprites (or any image) in a valid image for draw in the canvas, the bot uses secret enviroment variable such we provided previously in colorPixel function, thus, will skip the delay. 😎

Dependencies

Appwrite Apple SDK: For manage, accounts, sessions, database, storage, functions, realtime... ⚡

Drops: For create notifications.
Popovers: For create pop menus.
SwiftyBeaver: For logging.

Submission Category:

Mobile Moguls

Link to Code

chuiizeet / place-ios

A r/place canvas clone made with Appwrite and SwiftUI for Appwrite Hackathon

Place iOS

Place iOS is r/place clone made with Appwrite and SwiftUI.
I decide create this project for Appwrite Hackathon to test me in SwiftUI and use majority appwrite Api'.

View on GitHub