Code cleanup.

Author: GetToSet

FanOfAscii.xcodeproj/project.pbxproj

@@ -10,7 +10,6 @@
 		<string>02-HowImagesComposed.playgroundpage</string>
 		<string>03-GrayscaleHistogramEqualization.playgroundpage</string>
 		<string>04-Asciification.playgroundpage</string>
-		<string>05-MoreToPlay.playgroundpage</string>
 	</array>
 </dict>
 </plist>

FanOfAscii/Chapters/01-FanOfAscii.playgroundchapter/Manifest.plist

@@ -28,7 +28,7 @@ Here is a **character map** built with font “Fira Code”, by arranging charac
 */
 //#-editable-code
 
-let characterMap = "MWNXK0Okxdolc:;,'...   "
+let characterMapStr = "MWNXK0Okxdolc:;,'...   "
 
 //#-end-editable-code
 /*:
@@ -49,20 +49,20 @@ smooth result.
 //#-editable-code
 
 // The aspect ratio of characters in the font “Fira Code”
-let ratio = 1.70667
+let characterAspectRatio = 0.5860
 
-func calculateCharacterRows(rawImage: RawImage, charactersPerRow: Int) -> Int {
-    let scaledHeight = Double(rawImage.format.height) * Double(charactersPerRow) / Double(rawImage.format.width)
-    return Int((scaledHeight / ratio).rounded())
-}
+var charactersPerRow = 80
+var rowCount: Int!
 
-let charactersPerRow = 80
-let characterRows = 0
+func calculateRowCount(imageFormat: ImageFormat, charactersPerRow: Int) -> Int {
+    let scaledHeight = Double(charactersPerRow) / imageFormat.aspectRatio
+    return Int((scaledHeight * characterAspectRatio).rounded())
+}
 
 func scaleImageForAsciification(rawImage: RawImage) -> RawImage? {
-    characterRows = calculateCharacterRows(rawImage: rawImage, charactersPerRow: charactersPerRow)
+    rowCount = calculateRowCount(imageFormat: rawImage.format, charactersPerRow: charactersPerRow)
     // Scale the image to match the dimension of resulting ASCII art.
-    return rawImage.scaled(width: charactersPerRow, height: characterRows)
+    return rawImage.scaled(width: charactersPerRow, height: rowCount)
 }
 
 //#-end-editable-code
@@ -72,41 +72,40 @@ func scaleImageForAsciification(rawImage: RawImage) -> RawImage? {
 ### 🔨Mapping Pixels with Characters
 
 * Experiment:
-    * In this experiment, we'll build another filter to turn an image into grayscaled version, with consideration.
-    * Try to read and complete the following code snippet. When you finish, run your code and tap the *Switch to
-    Grayscale* button below the image to see whether it works.
+    * Following code snippet generates an ASCII art by mapping pixels to characters according to their brightness level.
+    * Run this code and tap the *ASCIIfy* button to see experience the magic, Feel free to tune all these parameters.
 */
 //#-editable-code
 
 func applyAsciification(rawImage: RawImage) -> UIImage? {
-    let brightnessLevels = Double(characterMap.count)
+    let characterMap: [Character] = Array(characterMapStr)
+    let maxMappedBrightness = Double(characterMap.count - 1)
     var asciificationResult: String = ""
-    for y in 0..<characterRows {
+
+    for y in 0..<rowCount {
         for x in 0..<charactersPerRow {
             if var pixel = rawImage.pixelAt(x: x, y: y) {
-                let mappedBrightnessValue = pixel.brightness / 255.0 * (brightnessLevels - 1)
-                asciificationResult.append(Array(characterMap)[Int(mappedBrightnessValue.rounded())])
+                let mappedBrightnessValue = pixel.brightness / 255.0 * maxMappedBrightness
+                asciificationResult.append(characterMap[Int(mappedBrightnessValue.rounded())])
             }
         }
         asciificationResult += "\n"
     }
-    return RawImage.renderAsciifiedImage(
+
+    return AsciiArtRenderer.renderAsciifiedImage(
             asciificationResult,
-            font: FiraCode.bold.rawValue,
-            size: 14,
-            charactersInRow: charactersPerRow,
-            rows: characterRows,
-            characterRatio: ratio)
+            fontName: FontResourceProvider.FiraCode.bold.rawValue,
+            size: 14.0,
+            foreground: UIColor.black,
+            background: UIColor.white,
+            charactersPerRow: charactersPerRow,
+            rows: rowCount,
+            characterAspectRatio: characterAspectRatio)
 }
 
 //#-end-editable-code
-/*:
-* Note:
-    In this code snippet, we transform the image by multiplying it with a custom filter matrix. If you're not familiar
-    with limier algebra, the following figure will explain how this transform matrix works.
-*/
-////#-hidden-code
-FiraCode.registerFont()
+//#-hidden-code
+FontResourceProvider.FiraCode.register()
 
 let remoteView = remoteViewAsLiveViewProxy()
 let eventListener = EventListener(proxy: remoteView) { message in
@@ -131,4 +130,4 @@ let eventListener = EventListener(proxy: remoteView) { message in
         break
     }
 }
-////#-end-hidden-code
+//#-end-hidden-code

FanOfAscii/Chapters/01-FanOfAscii.playgroundchapter/Pages/04-Asciification.playgroundpage/main.swift

@@ -0,0 +1,48 @@
+//
+// Copyright © 2020 Bunny Wong
+// Created by Bunny Wong on 2020/2/20.
+//
+
+import UIKit
+
+public class AsciiArtRenderer {
+
+    public static func renderAsciifiedImage(_ string: String,
+                                            fontName: String,
+                                            size: CGFloat,
+                                            foreground: UIColor,
+                                            background: UIColor,
+                                            charactersPerRow: Int,
+                                            rows: Int,
+                                            characterAspectRatio: Double) -> UIImage {
+        let characterWidth = size * CGFloat(characterAspectRatio)
+        let characterHeight = size
+        let drawingRect = CGRect(
+                origin: CGPoint(x: 0, y: 0),
+                size: CGSize(width: characterWidth * CGFloat(charactersPerRow), height: characterHeight * CGFloat(rows)))
+
+        let renderer = UIGraphicsImageRenderer(size: drawingRect.size)
+        let img = renderer.image { ctx in
+            background.setFill()
+            ctx.fill(drawingRect)
+
+            let paragraphStyle = NSMutableParagraphStyle()
+            paragraphStyle.alignment = .left
+            paragraphStyle.lineSpacing = 0.0
+            paragraphStyle.maximumLineHeight = size
+            paragraphStyle.lineBreakMode = .byClipping
+            let attrs = [
+                NSAttributedString.Key.font: UIFont(name: fontName, size: size)!,
+                NSAttributedString.Key.foregroundColor: foreground,
+                NSAttributedString.Key.paragraphStyle: paragraphStyle
+            ]
+            string.draw(
+                    with: drawingRect,
+                    options: .usesLineFragmentOrigin,
+                    attributes: attrs,
+                    context: nil)
+        }
+        return img
+    }
+
+}

FanOfAscii/Chapters/01-FanOfAscii.playgroundchapter/Pages/05-MoreToPlay.playgroundpage/LiveView.swift

@@ -0,0 +1,49 @@
+//
+// Copyright © 2020 Bunny Wong
+// Created by Bunny Wong on 2020/2/20.
+//
+
+import Foundation
+import CoreText
+
+public protocol Font {
+
+    static var resourceName: String { get }
+    static var resourceExtension: String { get }
+
+    static func register()
+
+}
+
+public extension Font {
+
+    static func register() {
+        guard let fontURL = Bundle.main.url(forResource: resourceName, withExtension: resourceExtension) else {
+            return
+        }
+        CTFontManagerRegisterFontsForURL(fontURL as CFURL, CTFontManagerScope.process, nil)
+    }
+
+}
+
+public class FontResourceProvider {
+
+    public enum FiraCode: String, Font {
+
+        case light = "FiraCode-Light"
+        case retina = "FiraCode-Light_Retina"
+        case bold = "FiraCode-Light_Bold"
+        case medium = "FiraCode-Light_Medium"
+        case regular = "FiraCode-Light_Regular"
+
+        public static var resourceName: String {
+            return "FiraCode-VF"
+        }
+        public static var resourceExtension: String {
+            return "ttf"
+        }
+
+    }
+
+}
+

FanOfAscii/Chapters/01-FanOfAscii.playgroundchapter/Pages/05-MoreToPlay.playgroundpage/Manifest.plist

@@ -11,7 +11,6 @@ public enum LiveViewIdentifier: String {
     case howImagesComposed
     case grayscaleHistogramEqualization
     case asciification
-    case moreToPlay
 }
 
 public func instantiateLiveView(identifier: LiveViewIdentifier) -> PlaygroundLiveViewable {