You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/tutorials/text/pvector/index.mdx
+15-15Lines changed: 15 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -73,7 +73,7 @@ void draw() {
73
73
}
74
74
```
75
75
76
-
In the above example, we have a very simple world -- a blank canvas with a circular shape (“ball”) traveling around. This “ball” has some properties.
76
+
In the above example, we have a very simple world — a blank canvas with a circular shape (“ball”) traveling around. This “ball” has some properties.
77
77
78
78
- LOCATION: x and y
79
79
- SPEED: xspeed and yspeed
@@ -105,7 +105,7 @@ Vector speed;
105
105
106
106
Vectors aren't going to allow us to do anything new. Using vectors won't suddenly make your Processing sketches magically simulate physics, however, they will simplify your code and provide a set of functions for common mathematical operations that happen over and over and over again while programming motion.
107
107
108
-
As an introduction to vectors, we're going to live in 2 dimensions for quite some time (at least until we get through the first several chapters.) All of these examples can be fairly easily extended to three dimensions (and the class we will use --[**PVector**](http://processing.org/reference/PVector.html)-- allows for three dimensions.) However, for the time being, it's easier to start with just two.
108
+
As an introduction to vectors, we're going to live in 2 dimensions for quite some time (at least until we get through the first several chapters.) All of these examples can be fairly easily extended to three dimensions (and the class we will use —[**PVector**](http://processing.org/reference/PVector.html)— allows for three dimensions.) However, for the time being, it's easier to start with just two.
109
109
110
110
## Vectors: What are they to us, the Processing programmer?
111
111
@@ -133,7 +133,7 @@ For every frame:
133
133
134
134
</FixedImage>
135
135
136
-
If velocity is a vector (the difference between two points), what is location? Is it a vector too? Technically, one might argue that location is not a vector, it's not describing the change between two points, it's simply describing a singular point in space -- a location. And so conceptually, we think of a location as different: a single point rather than the difference between two points.
136
+
If velocity is a vector (the difference between two points), what is location? Is it a vector too? Technically, one might argue that location is not a vector, it's not describing the change between two points, it's simply describing a singular point in space — a location. And so conceptually, we think of a location as different: a single point rather than the difference between two points.
137
137
138
138
Nevertheless, another way to describe a location is as the path taken from the origin to reach that location. Hence, a location can be represented as the vector giving the difference between location and origin. Therefore, if we were to write code to describe a vector object, instead of creating separate Point and Vector classes, we can use a single class which is more convenient.
139
139
@@ -144,7 +144,7 @@ location --> x,y
144
144
velocity --> xspeed,yspeed
145
145
```
146
146
147
-
Notice how we are storing the same data for both -- two floating point numbers, an x and a y. If we were to write a vector class ourselves, we'd start with something rather basic:
147
+
Notice how we are storing the same data for both — two floating point numbers, an x and a y. If we were to write a vector class ourselves, we'd start with something rather basic:
148
148
149
149
```
150
150
class PVector {
@@ -178,7 +178,7 @@ PVector location = new PVector(100,100);
178
178
PVector velocity = new PVector(1,3.3);
179
179
```
180
180
181
-
Now that we have two vector objects (“location” and “velocity”), we're ready to implement the algorithm for motion -- location = location + velocity. In the bouncing ball example, without vectors, we had:
181
+
Now that we have two vector objects (“location” and “velocity”), we're ready to implement the algorithm for motion — location = location + velocity. In the bouncing ball example, without vectors, we had:
182
182
183
183
```
184
184
// Add the current speed to the location.
@@ -269,7 +269,7 @@ Now that we see how add is written inside of [**PVector**](http://processing.org
269
269
location.add(velocity);
270
270
```
271
271
272
-
And here we are, ready to successfully complete our first goal -- rewrite the entire bouncing ball example using [**PVector**](http://processing.org/reference/PVector.html).
272
+
And here we are, ready to successfully complete our first goal — rewrite the entire bouncing ball example using [**PVector**](http://processing.org/reference/PVector.html).
273
273
274
274
Example: Bouncing Ball with PVector!
275
275
@@ -312,7 +312,7 @@ void draw() {
312
312
313
313
Now, you might feel somewhat disappointed. After all, this may initially appear to have made the code more complicated than the original version. While this is a perfectly reasonable and valid critique, it's important to understand that we haven't fully realized the power of programming with vectors just yet. Looking at a simple bouncing ball and only implementing vector addition is just the first step. As we move forward into looking at more a complex world of multiple objects and multiple forces (we'll cover forces in the next chapter), the benefits of [**PVector**](http://processing.org/reference/PVector.html) will become more apparent.
314
314
315
-
We should, however, make note of an important aspect of the above transition to programming with vectors. Even though we are using [**PVector**](http://processing.org/reference/PVector.html) objects to describe two values -- the x and y of location and the x and y of velocity -- we still often need to refer to the x and y components of each [**PVector**](http://processing.org/reference/PVector.html) individually. When we go to draw an object in Processing there's no means for us to say:
315
+
We should, however, make note of an important aspect of the above transition to programming with vectors. Even though we are using [**PVector**](http://processing.org/reference/PVector.html) objects to describe two values — the x and y of location and the x and y of velocity — we still often need to refer to the x and y components of each [**PVector**](http://processing.org/reference/PVector.html) individually. When we go to draw an object in Processing there's no means for us to say:
316
316
317
317
```
318
318
ellipse(location,16,16);
@@ -373,7 +373,7 @@ and the function inside [**PVector**](http://processing.org/reference/PVector.ht
373
373
374
374
</FixedImage>
375
375
376
-
Following is an example that demonstrates vector subtraction by taking the difference between two points -- the mouse location and the center of the window.
376
+
Following is an example that demonstrates vector subtraction by taking the difference between two points — the mouse location and the center of the window.
377
377
378
378
Example: Vector subtraction
379
379
@@ -697,7 +697,7 @@ This is Motion 101.
697
697
- Draw object at location
698
698
In the bouncing ball example, all of this code happened in Processing's main tab, within [**_setup()_**](http://processing.org/reference/setup_.html) and [**_draw()_**](http://processing.org/reference/draw_.html). What we want to do now is move towards encapsulating all of the logic for motion inside of a [**_class_**](http://processing.org/reference/class.html), this way we can create a foundation for programming moving objects in Processing. We'll take a quick moment to review the basics of object-oriented programming in this context now, but this book will otherwise assume knowledge of working with objects (which will be necessary for just about every example from this point forward). However, if you need a further refresher, I encourage you to check out the [OOP tutorial](http://processing.org/tutorials/objects/).
699
699
700
-
The driving principle behind object-oriented programming is the bringing together of data and functionality. Take the prototypical OOP example: a car. A car has data -- color, size, speed, etc. A car has functionality -- drive(), turn(), stop(), etc. A car [**_class_**](http://processing.org/reference/class.html) brings all that stuff together in a template from which car instances, i.e. [**_objects_**](http://processing.org/reference/Object.html), are made. The benefit is nicely organized code that makes sense when you read it.
700
+
The driving principle behind object-oriented programming is the bringing together of data and functionality. Take the prototypical OOP example: a car. A car has data — color, size, speed, etc. A car has functionality — drive(), turn(), stop(), etc. A car [**_class_**](http://processing.org/reference/class.html) brings all that stuff together in a template from which car instances, i.e. [**_objects_**](http://processing.org/reference/Object.html), are made. The benefit is nicely organized code that makes sense when you read it.
701
701
702
702
```
703
703
Car c = new Car(red,big,fast);
@@ -861,7 +861,7 @@ class Mover {
861
861
}
862
862
```
863
863
864
-
Ok, at this point, we should feel comfortable with two things -- (1) What is a [**PVector**](http://processing.org/reference/PVector.html)? and (2) How do we use PVectors inside of an object to keep track of its location and movement? This is an excellent first step and deserves an mild round of applause. For standing ovations and screaming fans, however, we need to make one more, somewhat larger, step forward. After all, watching the Motion 101 example is fairly boring -- the circle never speeds up, never slows down, and never turns. For more interesting motion, for motion that appears in the real world around us, we need to add one more PVector to our class -- acceleration.
864
+
Ok, at this point, we should feel comfortable with two things — (1) What is a [**PVector**](http://processing.org/reference/PVector.html)? and (2) How do we use PVectors inside of an object to keep track of its location and movement? This is an excellent first step and deserves an mild round of applause. For standing ovations and screaming fans, however, we need to make one more, somewhat larger, step forward. After all, watching the Motion 101 example is fairly boring — the circle never speeds up, never slows down, and never turns. For more interesting motion, for motion that appears in the real world around us, we need to add one more PVector to our class — acceleration.
865
865
866
866
The strict definition of acceleration that we are using here is: **the rate of change of velocity**. Let's think about that definition for a moment. Is this a new concept? Not really. Velocity is defined as: **the rate of change of location**. In essence, we are developing a “trickle down” effect. Acceleration affects velocity which in turn affects location (for some brief foreshadowing, this point will become even more crucial in the next chapter when we see how forces affect acceleration which affects velocity which affects location.) In code, this reads like this:
867
867
@@ -870,7 +870,7 @@ The strict definition of acceleration that we are using here is: **the rate of c
870
870
location.add(velocity);
871
871
```
872
872
873
-
As an exercise, from this point forward, let's make a rule for ourselves. Let's write every example in the rest of this book without ever touching the value of velocity and location (except to initialize them). In other words, our goal now for programming motion is as follows -- come up with an algorithm for how we calculate acceleration and let the trickle down effect work its magic. And so we need to come up with some ways to calculate acceleration:
873
+
As an exercise, from this point forward, let's make a rule for ourselves. Let's write every example in the rest of this book without ever touching the value of velocity and location (except to initialize them). In other words, our goal now for programming motion is as follows — come up with an algorithm for how we calculate acceleration and let the trickle down effect work its magic. And so we need to come up with some ways to calculate acceleration:
874
874
875
875
ACCELERATION ALGORITHMS!
876
876
@@ -924,7 +924,7 @@ This means that when the sketch starts, the object is at rest. We don't have to
924
924
}
925
925
```
926
926
927
-
Are you thinking --“Gosh, those values seem awfully small!” Yes, that's right, they are quite tiny. It's important to realize that our acceleration values (measured in pixels) accumulate into the velocity over time, about thirty times per second depending on our sketch's frame rate. And so to keep the magnitude of the velocity vector within a reasonable range, our acceleration values should remain quite small. We can also help this cause by incorporating the PVector function [limit()](http://processing.org/reference/PVector_limit_.html).
927
+
Are you thinking —“Gosh, those values seem awfully small!” Yes, that's right, they are quite tiny. It's important to realize that our acceleration values (measured in pixels) accumulate into the velocity over time, about thirty times per second depending on our sketch's frame rate. And so to keep the magnitude of the velocity vector within a reasonable range, our acceleration values should remain quite small. We can also help this cause by incorporating the PVector function [limit()](http://processing.org/reference/PVector_limit_.html).
928
928
929
929
```
930
930
// The limit() function constrains the magnitude of a vector.
@@ -976,7 +976,7 @@ class Mover {
976
976
}
977
977
```
978
978
979
-
Ok, algorithm #2--“a totally random acceleration.” In this case, instead of initializing acceleration in the object's constructor we want to pick a new acceleration each cycle, i.e. each time update() is called.
979
+
Ok, algorithm #2—“a totally random acceleration.” In this case, instead of initializing acceleration in the object's constructor we want to pick a new acceleration each cycle, i.e. each time update() is called.
980
980
981
981
Example: Motion 101 (velocity and random acceleration)
982
982
@@ -1128,7 +1128,7 @@ With chaining the above can be written as:
1128
1128
1129
1129
## Vectors: Interactivity
1130
1130
1131
-
Ok, to finish out this tutorial, let's try something a bit more complex and a great deal more useful. Let's dynamically calculate an object's acceleration according to a rule, acceleration algorithm #4--“the object accelerates towards the mouse.”
1131
+
Ok, to finish out this tutorial, let's try something a bit more complex and a great deal more useful. Let's dynamically calculate an object's acceleration according to a rule, acceleration algorithm #4—“the object accelerates towards the mouse.”
1132
1132
1133
1133
<FixedImagewidth={650}height={210}>
1134
1134
@@ -1144,7 +1144,7 @@ Anytime we want to calculate a vector based on a rule/formula, we need to comput
1144
1144
1145
1145
</FixedImage>
1146
1146
1147
-
As illustrated in the above diagram, we see that we can get a vector (dx,dy) by subtracting the object's location from the mouse's location. After all, this is precisely where we started this chapter -- the definition of a vector is “the difference between two points in space!”
1147
+
As illustrated in the above diagram, we see that we can get a vector (dx,dy) by subtracting the object's location from the mouse's location. After all, this is precisely where we started this chapter — the definition of a vector is “the difference between two points in space!”
0 commit comments