0
1
00:00:00,390 --> 00:00:00,650
All right.
1

2
00:00:00,750 --> 00:00:07,670
So in the last lesson, we managed to convert a 2D touch on the screen of the iPad or the iPhone, and convert
2

3
00:00:07,670 --> 00:00:12,010
it using a hitTest to a 3D location in the real world.
3

4
00:00:12,060 --> 00:00:18,540
And then we created this function called addDot to add a node onto the 3D world to show where we tapped.
4

5
00:00:18,540 --> 00:00:24,330
Now, in this lesson, I want to get into the meat of this application which is really calculating the distance
5

6
00:00:24,390 --> 00:00:27,720
between dotNodes that we place onto the scene.
6

7
00:00:27,720 --> 00:00:34,470
So the first thing I'm gonna do is I'm going to create a new variable that is called dotNodes,
7

8
00:00:34,470 --> 00:00:39,320
and this is going to be an array of SCNNode objects
8

9
00:00:39,570 --> 00:00:42,330
and I'm going to initialize it to an empty array.
9

10
00:00:42,930 --> 00:00:48,650
So this is an array that I'm going to use to keep track of all the dotNodes that we put onto the scene,
10

11
00:00:48,660 --> 00:00:54,630
so down here where we add new dotNodes into the scene. Every single time I add a new dotNode,
11

12
00:00:54,660 --> 00:01:01,530
I'm also going to add it into my array of dotNodes. So I can see that the naming is a little bit ambiguous,
12

13
00:01:01,650 --> 00:01:09,720
but, basically, the plural which is dotNodes is the array, and I'm going to append the dotNode that gets
13

14
00:01:09,720 --> 00:01:13,070
created whenever we tap on a new position.
14

15
00:01:13,110 --> 00:01:18,960
So the singular is the SCNNode and the plural is the array.
15

16
00:01:18,960 --> 00:01:23,010
So feel free to change that naming however you want, whatever makes sense to you.
16

17
00:01:23,010 --> 00:01:30,000
And then once we do that, we're going to check if there are two or more dotNodes in the array.
17

18
00:01:30,150 --> 00:01:42,090
So I'm going to say if dotNodes.count is greater than or equal to 2, then I'm going to call a
18

19
00:01:42,090 --> 00:01:46,050
function called calculate. And calculate doesn't exist yet,
19

20
00:01:46,110 --> 00:01:55,710
so I'm going to go and create it. And this calculate function does not take any inputs, but it does have
20

21
00:01:55,740 --> 00:01:56,830
a functionality.
21

22
00:01:57,030 --> 00:02:04,320
The first thing I want to specify is I want to create a constant called start that is set to equal to
22

23
00:02:04,380 --> 00:02:07,550
the first object in the array of dotNodes.
23

24
00:02:07,560 --> 00:02:08,930
So that's going to be dotNodes.,
24

25
00:02:08,940 --> 00:02:10,350
ssquare brackets, zero.
25

26
00:02:10,800 --> 00:02:13,870
And that's gonna be the first dot that we put onto the scene.
26

27
00:02:13,890 --> 00:02:19,410
So that's our starting position where we want to start measuring from. And then I'm going to create another
27

28
00:02:19,410 --> 00:02:25,410
constant called end, and you guessed it, this is going to be the second dot that we place on the screen
28

29
00:02:25,800 --> 00:02:30,340
which is the ending position of where we want to measure.
29

30
00:02:30,390 --> 00:02:34,620
So we're measuring the distance from the start to the end,
30

31
00:02:34,620 --> 00:02:38,910
and we've got these two dotNodes that each have a 3D position and we're going to figure out the
31

32
00:02:38,910 --> 00:02:42,220
distance between them in 3D.
32

33
00:02:42,430 --> 00:02:48,940
So the first thing I want to do is I want to print to the console the start and end positions, so that
33

34
00:02:48,940 --> 00:02:53,380
we can have a look at what they look like and code accordingly.
34

35
00:02:53,380 --> 00:03:00,130
So I'm going to print start position and end position and let's give it a go.
35

36
00:03:00,210 --> 00:03:00,440
All right.
36

37
00:03:00,460 --> 00:03:06,550
So we've got our feature point detection and I'm going to put down one dot here, and then I'm gonna put
37

38
00:03:06,550 --> 00:03:10,320
down another one on the opposite side of my keyboard.
38

39
00:03:10,330 --> 00:03:17,200
Now, if we have a look inside our console, you can see that we've got two SCNVectors printed in here.
39

40
00:03:18,790 --> 00:03:23,220
And if I zoom in, you can see that this is the start position.
40

41
00:03:23,320 --> 00:03:31,540
So it has an x, y, and z position, and then this is the end, x, y, and z.
41

42
00:03:32,050 --> 00:03:38,240
So the next thing we need to do is simply figure out the distance between these two 3D coordinates.
42

43
00:03:38,470 --> 00:03:43,060
So I think it's a little bit difficult to imagine these coordinates in 3D space just by looking at the
43

44
00:03:43,060 --> 00:03:43,630
numbers.
44

45
00:03:43,990 --> 00:03:49,300
So let's head over to a 3D graph maker to try and plot this in 3D.
45

46
00:03:50,440 --> 00:03:55,170
So the first thing that I'm going to do is to show and hide grids.
46

47
00:03:55,270 --> 00:04:02,380
So the moment we've got a grid on this 3d graph for the x and y 2D space, but that is not the same as
47

48
00:04:02,380 --> 00:04:03,760
what we have in ARKit.
48

49
00:04:03,790 --> 00:04:07,750
As you know, it's the x and z grid that we need.
49

50
00:04:07,780 --> 00:04:10,180
So let's enable that and disable that one.
50

51
00:04:10,180 --> 00:04:17,710
So as you can see on our graph, as y goes towards the positive that's going up in 3D space, and as x goes
51

52
00:04:17,710 --> 00:04:21,490
towards the positive that's going towards the right in 3D space,
52

53
00:04:21,490 --> 00:04:27,570
and as z goes towards the negative that's going forwards in our 3D space.
53

54
00:04:27,580 --> 00:04:29,880
So, now we've got this more less aligned.
54

55
00:04:29,980 --> 00:04:34,780
I'm going to go and put those two 3D positions that we got back.
55

56
00:04:34,780 --> 00:04:36,890
So the first one was the start.
56

57
00:04:36,910 --> 00:04:41,050
So I'm going to add a point here and x is equal to.
57

58
00:04:41,290 --> 00:04:46,430
I'm going to multiply this by 100 to make it a little bit more obvious on this graph.
58

59
00:04:46,570 --> 00:04:54,980
So x was equal to 6 point something, y is equal to minus 20 point something,
59

60
00:04:55,240 --> 00:05:01,870
and z is equal to minus thirteen point something.
60

61
00:05:02,230 --> 00:05:05,920
So let's go ahead and adjust that.
61

62
00:05:06,040 --> 00:05:11,460
So these are basically the same numbers as you see over here just multiplied by a hundred,
62

63
00:05:11,620 --> 00:05:13,930
so that we see a little bit more clearly on the graph.
63

64
00:05:13,930 --> 00:05:16,110
Now, that's our first spot done.
64

65
00:05:16,300 --> 00:05:18,080
And you can see it's down there.
65

66
00:05:18,580 --> 00:05:22,410
Now, the next thing I'm going to do is plot the second spot.
66

67
00:05:22,410 --> 00:05:24,790
So this is the end position.
67

68
00:05:24,790 --> 00:05:29,740
And again, we're going to keep it on the same scale so we're gonna be multiplying these values by a hundred.
68

69
00:05:29,770 --> 00:05:38,310
So this one's gonna turn into a minus 20 point something, 20.6 something,
69

70
00:05:38,310 --> 00:05:44,700
20.06, and y is going to be minus 21,
70

71
00:05:50,200 --> 00:05:59,460
and z is going to be minus 5.6.
71

72
00:05:59,690 --> 00:06:00,200
All right, cool.
72

73
00:06:00,230 --> 00:06:04,140
So let's go ahead and add our second spot on here.
73

74
00:06:04,160 --> 00:06:11,360
We can now see them on the scene. So you can see that the y positions of both of these points are more
74

75
00:06:11,360 --> 00:06:13,310
or less along the same plane.
75

76
00:06:13,340 --> 00:06:18,650
And that's because we tapped on two spaces on the keyboard which is more or less on the same plane as
76

77
00:06:18,650 --> 00:06:21,050
each other because they're both on my keyboard.
77

78
00:06:21,110 --> 00:06:28,670
Now, the reason why it's so far down in the y position is because the y position here is relative to
78

79
00:06:28,670 --> 00:06:30,660
the position of the camera.
79

80
00:06:30,680 --> 00:06:38,000
So if the position of my camera is at zero y, then my keyboard is just a bit below it.
80

81
00:06:38,000 --> 00:06:40,710
So about, what is that, 20 centimeters below.
81

82
00:06:40,760 --> 00:06:49,610
So the next thing that you'll realize is that this point in 3D has a x component and a z component.
82

83
00:06:49,640 --> 00:06:54,230
So we need to figure out this distance here from a to b.
83

84
00:06:54,230 --> 00:06:55,730
Now, how do we do that?
84

85
00:06:55,730 --> 00:06:59,300
Well, this is where high school math is going to come in really handy.
85

86
00:06:59,300 --> 00:07:03,910
So when we did high school math, you would have learn about something called Pythagoras' theorem.
86

87
00:07:03,920 --> 00:07:07,520
So this is where in a right-sided triangle,
87

88
00:07:07,520 --> 00:07:10,610
so this is 90 degrees. The hypotenuse,
88

89
00:07:10,610 --> 00:07:14,700
so this line here, we can find out its length
89

90
00:07:14,840 --> 00:07:23,240
if we know the length of a and the length of b. Let's call this h. And h is gonna be equal to the square
90

91
00:07:23,240 --> 00:07:27,740
root of a squared plus b squared.
91

92
00:07:27,770 --> 00:07:32,600
So depending on how long ago that was, it might take a little bit of jogging of your memory.
92

93
00:07:32,600 --> 00:07:38,390
But the point being that if we wanted to figure out a distance between two points in 2D space,
93

94
00:07:38,570 --> 00:07:42,040
it's as simple as working out the root of the square of these two sides.
94

95
00:07:42,050 --> 00:07:44,110
So this is in 2D.
95

96
00:07:44,120 --> 00:07:48,490
Now, the problem is that our coordinates are more or less in 3D.
96

97
00:07:48,500 --> 00:07:54,760
And in order to figure out the distance between two coordinates in 3D, it's a little bit more involved.
97

98
00:07:54,980 --> 00:08:00,030
So let's say here that we've got this 3D space, right?
98

99
00:08:00,050 --> 00:08:07,440
So we've got a point here and a point here, and we want to work out this distance here.
99

100
00:08:07,520 --> 00:08:18,080
Now, in order to figure out that distance, we need a, b, and c which we have, because that corresponds to
100

101
00:08:18,080 --> 00:08:22,990
the difference between our x, our y, and our z positions.
101

102
00:08:23,000 --> 00:08:30,350
So if this is our starting point and this was our ending point, we're trying to figure out the distance
102

103
00:08:30,380 --> 00:08:37,660
between the two in this 3D space. And in order to do that, we're going to use a slight variant of Pythagoras'
103

104
00:08:37,670 --> 00:08:45,460
theorem, and the equation, basically, assumes that you know what a, b, and c are.
104

105
00:08:45,590 --> 00:08:54,050
And once you do, then the distance between these two points in 3D space, let's call it distance d equals
105

106
00:08:54,260 --> 00:08:58,600
a² plus b² plus c²,
106

107
00:08:58,730 --> 00:09:04,550
and then the entire result rooted. So taking those coordinates that we saw on the screen where we've got
107

108
00:09:05,390 --> 00:09:11,660
x1, y1, and z1,
108

109
00:09:11,660 --> 00:09:11,900
right?
109

110
00:09:11,930 --> 00:09:22,370
So that's the starting position. And then down here, we've got x2, y2, z2, and that's the ending
110

111
00:09:22,370 --> 00:09:23,300
position.
111

112
00:09:23,330 --> 00:09:29,060
So, now we can use the starting and end coordinates to figure out a, b, and c. And if you imagine this
112

113
00:09:29,060 --> 00:09:32,660
being 3D space, this axis is the x axis.
113

114
00:09:32,750 --> 00:09:36,720
This is going to be y and that is going to be z.
114

115
00:09:36,770 --> 00:09:46,490
So, now to work out a, b, and c. So a is going to equal x2 minus x1, and that's the distance of a. b is
115

116
00:09:46,490 --> 00:09:56,410
going to be equal to y2 minus y1, and then c is going to be equal to z2  minus z1.
116

117
00:09:56,540 --> 00:10:04,880
And once we've got a, b, and c, then we can use the Pythagoras equation to work out this distance d using
117

118
00:10:04,940 --> 00:10:10,290
d equals a² plus b² plus c²,
118

119
00:10:10,430 --> 00:10:13,760
and then, the entire thing square rooted.
119

120
00:10:14,050 --> 00:10:14,380
All right.
120

121
00:10:14,410 --> 00:10:15,840
So that's a little bit of math.
121

122
00:10:15,910 --> 00:10:18,600
The code will still work if you believe Pythagoras or not.
122

123
00:10:18,670 --> 00:10:23,590
And if you ever need to work out the distance in 3D, then this is simply the equation that you need to
123

124
00:10:23,590 --> 00:10:24,330
know.
124

125
00:10:24,340 --> 00:10:29,580
All right, so let's head back into our code and go and implement those things.
125

126
00:10:30,010 --> 00:10:42,740
So inside calculate, we know that the distance is equal to the root of x2 minus x1 to the power of 2
126

127
00:10:42,740 --> 00:10:49,190
plus y2 minus y1 to the power of 2.
127

128
00:10:49,340 --> 00:10:57,930
And then, finally added on to that is z2 minus z1, again, to the power of 2.
128

129
00:10:58,820 --> 00:11:02,690
So, now we need to convert this equation into Swift code.
129

130
00:11:02,690 --> 00:11:07,580
So I'm gonna make my code a little bit more wordy, just so that you can see what is happening. So let's
130

131
00:11:07,580 --> 00:11:12,680
say, let a equals the distance on the x axis,
131

132
00:11:12,770 --> 00:11:23,330
so we're going to take the end.position.x, and we're going to subtract the start.position.x,
132

133
00:11:23,480 --> 00:11:37,520
and then b is going to be equal to end.position.y minus start.position.y, and c is going
133

134
00:11:37,520 --> 00:11:43,660
to be end.position.z minus start.position.z.
134

135
00:11:46,540 --> 00:11:54,550
Okay. So, now we have a, b, and c. And to work out the distance, all we need to do is say let distance
135

136
00:11:55,510 --> 00:11:57,430
= square root.
136

137
00:11:57,520 --> 00:12:04,090
So this is a function that is available to you through UIKit. And inside the square root, we're going
137

138
00:12:04,090 --> 00:12:08,830
to give it a double, and the double is going to be equal to power,
138

139
00:12:08,830 --> 00:12:13,360
so we're going to use the power function which takes two values.
139

140
00:12:13,390 --> 00:12:19,690
So first is going to be a, the value, and then the second one is the power, the exponent.
140

141
00:12:19,720 --> 00:12:21,160
So in this case, it'll be two.
141

142
00:12:21,160 --> 00:12:29,740
So basically saying raise a to the power of 2, and then we're going to add to this same thing, power
142

143
00:12:30,250 --> 00:12:32,640
b, 2.
143

144
00:12:32,960 --> 00:12:36,970
And,finally, power c, 2.
144

145
00:12:36,990 --> 00:12:41,670
So, now we've promoted this formula into a four-step process.
145

146
00:12:41,670 --> 00:12:50,400
Now, if you want to, you can make this more succinct by simply putting this in here, and putting this one
146

147
00:12:50,820 --> 00:13:00,490
in here, instead of b, and c can be substituted as well, and you can get rid of all of that.
147

148
00:13:00,510 --> 00:13:05,490
Now, it's completely up to you, if you find this too confusing, then go with the original but, otherwise,
148

149
00:13:05,550 --> 00:13:06,350
this should work.
149

150
00:13:06,360 --> 00:13:10,920
And I've got an extra comma in there so I should get rid of that and it should work.
150

151
00:13:10,920 --> 00:13:15,780
Remember that you can actually format your code so that you can see more easily what's actually happening
151

152
00:13:15,840 --> 00:13:17,000
at a glance.
152

153
00:13:17,010 --> 00:13:23,310
So I think this is a slightly easier way of seeing what's going on, rather than that gobbledygook.
153

154
00:13:23,310 --> 00:13:23,910
All right, cool.
154

155
00:13:23,940 --> 00:13:31,440
So the last thing that we're going to do is we're going to print the absolute value of our distance.
155

156
00:13:31,440 --> 00:13:38,850
So by putting our distance inside this function called absolute, we basically remove any signs in front
156

157
00:13:38,850 --> 00:13:39,620
of this distance.
157

158
00:13:39,630 --> 00:13:45,240
So if distance happened to be negative, then this will still change it into positive.
158

159
00:13:45,240 --> 00:13:52,370
So, basically, we're ignoring the sign by using "abs" or absolute, because we don't know if the end is, you
159

160
00:13:52,380 --> 00:13:56,450
know, more positive than the start or if the start is more positive than the end.
160

161
00:13:56,460 --> 00:14:00,210
It doesn't really matter for us because all we care about is that distance.
161

162
00:14:00,210 --> 00:14:04,020
So I'm just removing any negative signs in front of the distance.
162

163
00:14:04,590 --> 00:14:09,480
And now if we give it a spin, we should be able to see our distance on screen.
163

164
00:14:23,970 --> 00:14:24,270
All right.
164

165
00:14:24,290 --> 00:14:27,080
So that was 0.27,
165

166
00:14:27,080 --> 00:14:29,910
so that's 27 centimeters.
166

167
00:14:29,930 --> 00:14:35,060
And if you measure your own MacBook Pro, you'll see that the distance from one side to the other side
167

168
00:14:35,060 --> 00:14:36,830
of the keyboard is about the same.
168

169
00:14:36,830 --> 00:14:41,830
So awesome. All that high school math is finally useful for something.
169

170
00:14:41,840 --> 00:14:42,070
All right.
170

171
00:14:42,080 --> 00:14:49,040
So in the next lesson, I'm going to be teaching you how to render or how to create 3D text in our ARScene
171

172
00:14:49,100 --> 00:14:55,820
so that we'll be able to show this distance that we've detected in the same scene where the user is
172

173
00:14:55,910 --> 00:15:03,680
asking for the distance, so we can show a 3D text of the distance between the two points inside our app.
173

174
00:15:03,740 --> 00:15:04,710
So I'll see you there.