All right. 1
So in the last lesson, we managed to convert a 2D touch on the screen of the iPad or the iPhone, and convert 2
it using a hitTest to a 3D location in the real world. 3
And then we created this function called addDot to add a node onto the 3D world to show where we tapped. 4
Now, in this lesson, I want to get into the meat of this application which is really calculating the distance 5
between dotNodes that we place onto the scene. 6
So the first thing I'm gonna do is I'm going to create a new variable that is called dotNodes, 7
and this is going to be an array of SCNNode objects 8
and I'm going to initialize it to an empty array. 9
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
so down here where we add new dotNodes into the scene. Every single time I add a new dotNode, 11
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
but, basically, the plural which is dotNodes is the array, and I'm going to append the dotNode that gets 13
created whenever we tap on a new position. 14
So the singular is the SCNNode and the plural is the array. 15
So feel free to change that naming however you want, whatever makes sense to you. 16
And then once we do that, we're going to check if there are two or more dotNodes in the array. 17
So I'm going to say if dotNodes.count is greater than or equal to 2, then I'm going to call a 18
function called calculate. And calculate doesn't exist yet, 19
so I'm going to go and create it. And this calculate function does not take any inputs, but it does have 20
a functionality. 21
The first thing I want to specify is I want to create a constant called start that is set to equal to 22
the first object in the array of dotNodes. 23
So that's going to be dotNodes., 24
ssquare brackets, zero. 25
And that's gonna be the first dot that we put onto the scene. 26
So that's our starting position where we want to start measuring from. And then I'm going to create another 27
constant called end, and you guessed it, this is going to be the second dot that we place on the screen 28
which is the ending position of where we want to measure. 29
So we're measuring the distance from the start to the end, 30
and we've got these two dotNodes that each have a 3D position and we're going to figure out the 31
distance between them in 3D. 32
So the first thing I want to do is I want to print to the console the start and end positions, so that 33
we can have a look at what they look like and code accordingly. 34
So I'm going to print start position and end position and let's give it a go. 35
All right. 36
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
down another one on the opposite side of my keyboard. 38
Now, if we have a look inside our console, you can see that we've got two SCNVectors printed in here. 39
And if I zoom in, you can see that this is the start position. 40
So it has an x, y, and z position, and then this is the end, x, y, and z. 41
So the next thing we need to do is simply figure out the distance between these two 3D coordinates. 42
So I think it's a little bit difficult to imagine these coordinates in 3D space just by looking at the 43
numbers. 44
So let's head over to a 3D graph maker to try and plot this in 3D. 45
So the first thing that I'm going to do is to show and hide grids. 46
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
what we have in ARKit. 48
As you know, it's the x and z grid that we need. 49
So let's enable that and disable that one. 50
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
towards the positive that's going towards the right in 3D space, 52
and as z goes towards the negative that's going forwards in our 3D space. 53
So, now we've got this more less aligned. 54
I'm going to go and put those two 3D positions that we got back. 55
So the first one was the start. 56
So I'm going to add a point here and x is equal to. 57
I'm going to multiply this by 100 to make it a little bit more obvious on this graph. 58
So x was equal to 6 point something, y is equal to minus 20 point something, 59
and z is equal to minus thirteen point something. 60
So let's go ahead and adjust that. 61
So these are basically the same numbers as you see over here just multiplied by a hundred, 62
so that we see a little bit more clearly on the graph. 63
Now, that's our first spot done. 64
And you can see it's down there. 65
Now, the next thing I'm going to do is plot the second spot. 66
So this is the end position. 67
And again, we're going to keep it on the same scale so we're gonna be multiplying these values by a hundred. 68
So this one's gonna turn into a minus 20 point something, 20.6 something, 69
20.06, and y is going to be minus 21, 70
and z is going to be minus 5.6. 71
All right, cool. 72
So let's go ahead and add our second spot on here. 73
We can now see them on the scene. So you can see that the y positions of both of these points are more 74
or less along the same plane. 75
And that's because we tapped on two spaces on the keyboard which is more or less on the same plane as 76
each other because they're both on my keyboard. 77
Now, the reason why it's so far down in the y position is because the y position here is relative to 78
the position of the camera. 79
So if the position of my camera is at zero y, then my keyboard is just a bit below it. 80
So about, what is that, 20 centimeters below. 81
So the next thing that you'll realize is that this point in 3D has a x component and a z component. 82
So we need to figure out this distance here from a to b. 83
Now, how do we do that? 84
Well, this is where high school math is going to come in really handy. 85
So when we did high school math, you would have learn about something called Pythagoras' theorem. 86
So this is where in a right-sided triangle, 87
so this is 90 degrees. The hypotenuse, 88
so this line here, we can find out its length 89
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
root of a squared plus b squared. 91
So depending on how long ago that was, it might take a little bit of jogging of your memory. 92
But the point being that if we wanted to figure out a distance between two points in 2D space, 93
it's as simple as working out the root of the square of these two sides. 94
So this is in 2D. 95
Now, the problem is that our coordinates are more or less in 3D. 96
And in order to figure out the distance between two coordinates in 3D, it's a little bit more involved. 97
So let's say here that we've got this 3D space, right? 98
So we've got a point here and a point here, and we want to work out this distance here. 99
Now, in order to figure out that distance, we need a, b, and c which we have, because that corresponds to 100
the difference between our x, our y, and our z positions. 101
So if this is our starting point and this was our ending point, we're trying to figure out the distance 102
between the two in this 3D space. And in order to do that, we're going to use a slight variant of Pythagoras' 103
theorem, and the equation, basically, assumes that you know what a, b, and c are. 104
And once you do, then the distance between these two points in 3D space, let's call it distance d equals 105
a² plus b² plus c², 106
and then the entire result rooted. So taking those coordinates that we saw on the screen where we've got 107
x1, y1, and z1, 108
right? 109
So that's the starting position. And then down here, we've got x2, y2, z2, and that's the ending 110
position. 111
So, now we can use the starting and end coordinates to figure out a, b, and c. And if you imagine this 112
being 3D space, this axis is the x axis. 113
This is going to be y and that is going to be z. 114
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
going to be equal to y2 minus y1, and then c is going to be equal to z2 minus z1. 116
And once we've got a, b, and c, then we can use the Pythagoras equation to work out this distance d using 117
d equals a² plus b² plus c², 118
and then, the entire thing square rooted. 119
All right. 120
So that's a little bit of math. 121
The code will still work if you believe Pythagoras or not. 122
And if you ever need to work out the distance in 3D, then this is simply the equation that you need to 123
know. 124
All right, so let's head back into our code and go and implement those things. 125
So inside calculate, we know that the distance is equal to the root of x2 minus x1 to the power of 2 126
plus y2 minus y1 to the power of 2. 127
And then, finally added on to that is z2 minus z1, again, to the power of 2. 128
So, now we need to convert this equation into Swift code. 129
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
say, let a equals the distance on the x axis, 131
so we're going to take the end.position.x, and we're going to subtract the start.position.x, 132
and then b is going to be equal to end.position.y minus start.position.y, and c is going 133
to be end.position.z minus start.position.z. 134
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
= square root. 136
So this is a function that is available to you through UIKit. And inside the square root, we're going 137
to give it a double, and the double is going to be equal to power, 138
so we're going to use the power function which takes two values. 139
So first is going to be a, the value, and then the second one is the power, the exponent. 140
So in this case, it'll be two. 141
So basically saying raise a to the power of 2, and then we're going to add to this same thing, power 142
b, 2. 143
And,finally, power c, 2. 144
So, now we've promoted this formula into a four-step process. 145
Now, if you want to, you can make this more succinct by simply putting this in here, and putting this one 146
in here, instead of b, and c can be substituted as well, and you can get rid of all of that. 147
Now, it's completely up to you, if you find this too confusing, then go with the original but, otherwise, 148
this should work. 149
And I've got an extra comma in there so I should get rid of that and it should work. 150
Remember that you can actually format your code so that you can see more easily what's actually happening 151
at a glance. 152
So I think this is a slightly easier way of seeing what's going on, rather than that gobbledygook. 153
All right, cool. 154
So the last thing that we're going to do is we're going to print the absolute value of our distance. 155
So by putting our distance inside this function called absolute, we basically remove any signs in front 156
of this distance. 157
So if distance happened to be negative, then this will still change it into positive. 158
So, basically, we're ignoring the sign by using "abs" or absolute, because we don't know if the end is, you 159
know, more positive than the start or if the start is more positive than the end. 160
It doesn't really matter for us because all we care about is that distance. 161
So I'm just removing any negative signs in front of the distance. 162
And now if we give it a spin, we should be able to see our distance on screen. 163
All right. 164
So that was 0.27, 165
so that's 27 centimeters. 166
And if you measure your own MacBook Pro, you'll see that the distance from one side to the other side 167
of the keyboard is about the same. 168
So awesome. All that high school math is finally useful for something. 169
All right. 170
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
so that we'll be able to show this distance that we've detected in the same scene where the user is 172
asking for the distance, so we can show a 3D text of the distance between the two points inside our app. 173
So I'll see you there.