Added introduction chapter and illustrations.

Author: GetToSet

ArtOfAscii/Chapters/01-ArtOfAscii.playgroundchapter/Pages/01-Introduction.playgroundpage/main.swift

@@ -10,3 +10,29 @@ import PlaygroundSupport
 PlaygroundPage.current.needsIndefiniteExecution = true
 
 //#-end-hidden-code
+/*:
+# Art of ASCII — Introduction to Digital Image Processing
+
+## What is an ASCII Art?
+
+**ASCII (American Standard Code for Information Interchange)** is a standard for electronic communication, which
+contains 128 characters.
+
+**ASCII arts** are artworks created with ASCII characters, which can be seen in many places where only textual data can
+be transmitted, for example, within a terminal.
+
+* Experiment:
+    Head to the panel beside, and *tap the **run** button*, have fun experiencing the ASCII effects I've created.
+
+## What We'll Learn by Generating ASCII Arts?
+
+Examining how to generate ASCII Arts is a great way to explore the world of image processing. You'll be introduced with
+**the RGB color model**, **histograms and equalization techniques** with piratical experiments, which can be a fun and
+delightful.
+
+[Let's get started! 🏃‍♂️](@next)
+*/
+//#-hidden-code
+PlaygroundPage.current.assessmentStatus = .pass(message: nil)
+//#-end-hidden-code
+

ArtOfAscii/Chapters/01-ArtOfAscii.playgroundchapter/Pages/02-HowImagesComposed.playgroundpage/PrivateResources/Hint.md

@@ -0,0 +1,3 @@
+If you're not familiar with *linear algebra*, the following figure explains how this **transform matrix** works.
+
+![How Transform Matrix Works](transform-matrix.jpg)

ArtOfAscii/Chapters/01-ArtOfAscii.playgroundchapter/Pages/02-HowImagesComposed.playgroundpage/PrivateResources/Hints.plist

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>Hints</key>
+	<array>
+		<dict>
+			<key>FileReference</key>
+			<string>Hint.md</string>
+		</dict>
+	</array>
+</dict>
+</plist>

ArtOfAscii/Chapters/01-ArtOfAscii.playgroundchapter/Pages/02-HowImagesComposed.playgroundpage/PrivateResources/transform-matrix.jpg

@@ -8,9 +8,26 @@ import UIKit
 import PlaygroundSupport
 
 import BookCore
+import BookAPI
 
 PlaygroundPage.current.needsIndefiniteExecution = true
 
+func performCorrectnessCheck(matrix: [Double]) {
+    if matrix == [
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        0, 0, 0, 1
+    ] {
+        PlaygroundPage.current.assessmentStatus = .pass(
+                message: """
+                         Congratulations, You've learnt how digital images composed.
+
+                         Continue to [Preprocess Images for ASCII Art](@next)
+                         """)
+    }
+}
+
 //#-end-hidden-code
 /*:
 # Basics: How Images Composed
@@ -35,16 +52,11 @@ an extra **alpha** channel to describe the opacity of a color.
 
 ![RGB Color Model](rgb-model.png)
 
-## Filters
-
-**Filtering** is a general technique for image processing. A **digital image filter** resembles a mathematical function,
-which receives a raw image as a sequence of colors, performing a specific calculation and returns a new image.
-
-### 🔨Your First Image Filter
+### 🔨Decomposing an Image
 
 * Experiment:
-    * You'll build a simple filter which separates red, green or blue component out from the source image.
-    * Try completing following code snippet. Run your code and tap the *R, G and B* button to verify whether it works.
+    * The following code separates red, green and blue components from an image by multiplying it with a transform matrix.
+    * Try completing the code snippet. Run your code and tap the *R, G and B* button to verify whether it works.
 */
 
 //#-code-completion(everything, hide)
@@ -61,24 +73,20 @@ func applyRGBFilter(redEnabled: Bool,
     factorGreen = (greenEnabled ? 1 : 0)
     factorBlue = (blueEnabled ? 1 : 0)
 
-    // For most digital images, color components are arranged in the order of red, green, blue and alpha, pre pixel basis.
-    // For alpha channel, 1 stands for opaque while 0 stands for transparent.
+    // For most images, color components are arranged in the order of red, green, blue and alpha, per pixel basis.
+    // For alpha channel, larger values means more opaque
     var filterMatrix: [Double] = [
         <#T##Red##Double#>, 0, 0, 0,
         0, <#T##Green##Double#>, 0, 0,
         0, 0, <#T##Blue##Double#>, 0,
         0, 0, 0, <#T##Alpha##Double#>
     ]
     rawImage.multiplyByMatrix(matrix4x4: filterMatrix)
+    
+    performCorrectnessCheck(matrix: filterMatrix)
 }
 
 //#-end-editable-code
-/*:
-* Note:
-    This code snippet transforms an image by multiplying it with a transform matrix. If you're not familiar with linear
-    algebra, the following figure explains how this transform matrix works.
-    （图）
-*/
 //#-hidden-code
 let remoteView = remoteViewAsLiveViewProxy()
 let eventListener = EventListener(proxy: remoteView) { message in

ArtOfAscii/Chapters/01-ArtOfAscii.playgroundchapter/Pages/02-HowImagesComposed.playgroundpage/main.swift

@@ -8,6 +8,7 @@ import UIKit
 import PlaygroundSupport
 
 import BookCore
+import BookAPI
 
 PlaygroundPage.current.needsIndefiniteExecution = true
 
@@ -27,8 +28,8 @@ a dedicated set of coefficients can be applied.
 ### 🔨Grayscale Filtering
 
 * Experiment:
-    * You'll build a filter to turn an image into grayscaled version.
-    * Try completing following code snippet. Run your code and tap the *Grayscale* button to verify whether it works.
+    * The following code turns an image into a grayscaled one.
+    * Try completing the code snippet. Run your code and tap the *Grayscale* button to verify whether it works.
 */
 //#-code-completion(everything, hide)
 //#-code-completion(literal, show, float, double, integer)
@@ -54,14 +55,14 @@ func applyGrayscaleFilter(rawImage: RawImage) {
 
 Images with low contrast may produce ASCII arts that are hard to recognize, as the following figure shows.
 
-（图）
+![Contrast Comparation](contrast-compare.jpg)
 
 **Histogram** is an effective tool for visualizing the distribution of tones in an image. The *X axis* represents *the
 brightness* while the *Y axis* represents *the number of pixels at a specific brightness value*.
 
-（图）
+![Histogram Examples](histogram-examples.jpg)
 
-### 🔬Demystification of Histograms
+### 🔬Demystifing Histograms
 
 * Experiment:
     * Choose an image and then tap 📊 to bring up the histogram. Tapping it again to show histograms for seperated red,
@@ -73,7 +74,7 @@ brightness* while the *Y axis* represents *the number of pixels at a specific br
 **Histogram Equalization** is a widely used technique to enhance the contrast of images by *redistributing tones to the
 whole brightness range*, spreading out pixels that has intense frequency.
 
-（图）
+![Histogram Equalization](equalization.jpg)
 
 ### 🔨Equalizing an Image
 

ArtOfAscii/Chapters/01-ArtOfAscii.playgroundchapter/Pages/03-GrayscaleHistogramEqualization.playgroundpage/PrivateResources/contrast-compare.jpg

@@ -7,8 +7,8 @@
 import UIKit
 import PlaygroundSupport
 
-import BookAPI
 import BookCore
+import BookAPI
 
 PlaygroundPage.current.needsIndefiniteExecution = true
 
@@ -23,7 +23,7 @@ desired result, the font must be **monospaced**, which has fixed width for all c
 
 Here is a **character map** built with font “Fira Code”, by arranging characters to fit a gradient from white to black.
 
-（图）
+![Character Map](character-map.jpg)
 
 */
 //#-editable-code
@@ -78,7 +78,7 @@ func scaleImageForAsciification(rawImage: RawImage) -> RawImage? {
 //#-editable-code
 
 func applyAsciification(rawImage: RawImage) -> UIImage? {
-    let characterMap: [Character] = Array(characterMapStr)
+    let characterMap = [Character](characterMapStr)
     let maxMappedBrightness = Double(characterMap.count - 1)
     var asciificationResult: String = ""