<< 칸아카데미의 Advenced JS를 학습한 내용입니다. 칸선생님 감사합니다. by 해인>>
The Random Walker Object
Let's review a bit of object-oriented programming (OOP) first by building a Walker
object. This will be only a cursory review. If you have never worked with OOP before, you should go through the section on Object-Oriented JavaScript.
An object in JavaScript is a data type that has both properties and functionality attached to it, via its prototype. We are looking to design a Walker
object that both keeps track of its data (where it exists on the screen) and has the capability to perform certain actions (such as draw itself or take a step).
In order to create instances of Walker
s, we need to define a Walker
object. We'll use that object as the cookie cutter, and each new Walker
instance are the cookies.
Let's begin by defining the Walker
object type. The Walker
only needs two pieces of data—a number for its x-location and one for its y-location. We'll set those in its constructor function, setting them to the center of the canvas.
var Walker = function() {
this.x = width/2;
this.y = height/2;
};
In addition to keeping track of its x and y, our Walker
object will also have methods that we can call on it. The first will be a method that allows the object to display itself as a black dot. Remember that we add methods to an object in JavaScript by attaching them to the object's prototype
.
Walker.prototype.display = function() {
stroke(0, 0, 0);
point(this.x, this.y);
};
The second method directs the Walker
object to take a step. Now, this is where things get a bit more interesting. Remember that floor on which we were taking random steps? Well, now we can use our canvas in that same capacity. There are four possible steps. A step to the right can be simulated by incrementing x
(x++
); to the left by decrementing x
(x--
); forward by going down a pixel (y++
); and backward by going up a pixel (y--
). How do we pick from these four choices? Earlier we stated that we could flip two coins. In ProcessingJS, however, when we want to randomly choose from a list of options, we can pick a random number using random()
.
Walker.prototype.walk = function() {
var choice = floor(random(4));
};
The above line of code picks a random floating point number between 0 and 4 and converts it to a whole number by using floor()
, with a result of 0, 1, 2, or 3. Technically speaking, the highest number will never be 4.0, but rather 3.999999999 (with as many 9s as there are decimal places); since floor()
returns the closest whole number that is lesser or equal, the highest result we can get is 3. Next, we take the appropriate step (left, right, up, or down) depending on which random number was picked.
Walker.prototype.walk = function() {
var choice = floor(random(4));
if (choice === 0) {
this.x++;
} else if (choice === 1) {
this.x--;
} else if (choice === 2) {
this.y++;
} else {
this.y--;
}
};
Now that we've written the class, it's time to make an actual Walker
object in our program. Assuming we are looking to model a single random walk, we declare and initialize one global variable of type Walker
, by calling the constructor function with the new operator.
var w = new Walker();
Now, to make the walker actually do something, we define the draw()
function, and tell the walker to take a step and draw itself each time that's called:
var draw = function() {
w.walk();
w.display();
};
Since we don't call background()
in the draw function, we can see the trail of the random walk on our canvas:
<코드>
var Walker = function() {
this.x = width / 2;
this.y = height / 2;
};
Walker.prototype.display = function() {
stroke(0, 34, 255);
point(this.x, this.y);
};
Walker.prototype.walk = function() {
var num = floor(random(4));
if (num === 0) {
this.x++;
} else if (num === 1) {
this.x--;
} else if (num === 2) {
this.y++;
} else {
this.y--;
}
};
var guy = new Walker();
draw = function() {
guy.display();
guy.walk();
};
'칸아카데미 > Advanced JS' 카테고리의 다른 글
PVector Instance(The nature of code) (0) | 2015.10.11 |
---|---|
칸아카데미>>Nomal distribution of random numbers (0) | 2015.10.03 |
칸아카데미>>probability & non-uniform distributions (0) | 2015.10.02 |