# 投稿記事

21 Jun 2016

## Vectors

### ベクトルを使わない

このプログラムでは、ボールの属性として

 位置 x, y 速度 xspeed, yspeed
```var x = 100;
var y = 100;
var xspeed = 1;
var yspeed = 3.3;
// setup
processing.setup = function(){
// canvas size
processing.size(width,height);
};
//draw
processing.draw = function() {
processing.background(66, 66, 66);
// Move the ball according to its speed.
x = x + xspeed;
y = y + yspeed;
// Check for bouncing.
xspeed = xspeed * -1;
}
yspeed = yspeed * -1;
}
processing.noStroke();
processing.fill(181, 181, 181);
// Display the ball at the location (x,y).
};
```

### PVector() を使う

``` var ballRadius = 16;
var position = new processing.PVector(100, 100);
var velocity = new processing.PVector(2, 5);
// setup
processing.setup = function(){
// canvas size
processing.size(width,height);
};
// draw
processing.draw = function() {
processing.background(99, 99, 99);
// We still sometimes need to refer to the individual components of a PVector and can do so using the dot syntax: location.x, velocity.y, etc.
velocity.x = velocity.x * -1;
}
velocity.y = velocity.y * -1;
}
processing.noStroke();
processing.fill(255, 255, 255);
};
```

## Vector Motion

### Velocity

```// Mover Object
var Mover = function() {
this.position = new processing.PVector(processing.random(width), processing.random(height));
this.velocity = new processing.PVector(processing.random(-2, 2), processing.random(-2, 2));
};
Mover.prototype.update = function() {
};
Mover.prototype.display = function() {
processing.stroke(0);
processing.strokeWeight(2);
processing.fill(127);
processing.ellipse(this.position.x, this.position.y, 48, 48);
};
Mover.prototype.checkEdges = function() {
if (this.position.x > width) {
this.position.x = 0;
}
else if (this.position.x < 0) {
this.position.x = width;
}
if (this.position.y > height) {
this.position.y = 0;
}
else if (this.position.y < 0) {
this.position.y = height;
}
};
// create mover object
var mover = new Mover();
// setup
processing.setup = function(){
// canvas size
processing.size(width,height);
};
// draw
processing.draw = function() {
processing.background(255, 255, 255);
mover.update();
mover.checkEdges();
mover.display();
};
```

### A constant acceleration

```// Mover Object
var Mover = function() {
this.position = new processing.PVector(width/2, height/2);
this.velocity = new processing.PVector(0, 0);
this.acceleration = new PVector(-0.001,0.01); //<===
};
Mover.prototype.update = function() {
this.velocity.limit(10); // 最大値を10に制限する
};
```

### A totally random acceleration

```Mover.prototype.update = function() {
//<-----
this.acceleration = processing.PVector.random2D();
this.acceleration.mult(processing.random(2));
//---->
this.velocity.limit(10); // 最大値を10に制限する
};
```

### Braking car

LEFT Arrow <=> RIGHT Arrow

### Acceleration towards mouse

キャンバスの上でマウスを動かして

```Mover.prototype.update = function() {
var mouse = new PVector(processing.mouseX, processing.mouseY);
// マウスの位置 - Mover の位置　でベクトルの方向を計算
var dir = processing.PVector.sub(mouse, this.position);
// 単位ベクトルにする
dir.normalize();
// 1/2ベクトルにする
dir.mult(0.5);
this.acceleration = dir;
this.velocity.limit(5);
};
```

### Acceleration towards mouse

キャンバスの上でマウスを動かして

```    // Mover Object
var Mover = function() {
this.position = new processing.PVector(processing.random(width),
processing.random(height));
this.velocity = new processing.PVector(0, 0);
this.acceleration = new PVector(-0.001,0.01);
};

Mover.prototype.update = function() {
var mouse = new PVector(processing.mouseX, processing.mouseY);
var dir = processing.PVector.sub(mouse, this.position);
dir.normalize();
dir.mult(0.2);
this.acceleration = dir;
this.velocity.limit(5);
};

Mover.prototype.display = function() {
processing.stroke(255);
processing.strokeWeight(2);
processing.fill(255,255,0);
processing.ellipse(this.position.x, this.position.y, 10, 10);
};

var mover = [];

for (var i = 0; i < 20; i++) {
mover[i] = new Mover();
};

// setup
processing.setup = function(){
// canvas size
processing.size(width,height);
};
// draw
processing.draw = function() {
processing.background(66, 66, 66);

for (var i = 0; i < 20; i++) {
mover[i].update();
mover[i].display();
};
};
```