投稿記事

ProcessingJS 勉強 - Vectors

21 Jun 2016


Khan Academy での学習

Vectors

学習元 Intro to vectors

ベクトルを使わない

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

位置x, y
速度xspeed, yspeed
var x = 100;
var y = 100;
var xspeed = 1;
var yspeed = 3.3;
var ballRadius = 32;
// 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.
    if ((x > width-ballRadius/2) || (x < 0+ballRadius/2)) {
        xspeed = xspeed * -1;
    }
    if ((y > height-ballRadius/2) || (y < 0+ballRadius/2)) {
        yspeed = yspeed * -1;
    }
    processing.noStroke();
    processing.fill(181, 181, 181);
    // Display the ball at the location (x,y).
    processing.ellipse(x, y, ballRadius, ballRadius);
}; 
      


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);
     position.add(velocity);
     // 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.
     if ((position.x > width-ballRadius/2) || (position.x < 0+ballRadius/2)) {
         velocity.x = velocity.x * -1;
     }
     if ((position.y > height-ballRadius/2) || (position.y < 0+ballRadius/2)) {
         velocity.y = velocity.y * -1;
     }
     processing.noStroke();
     processing.fill(255, 255, 255);
     processing.ellipse(position.x, position.y, ballRadius, ballRadius);
 };

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() {
    this.position.add(this.velocity);
};
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(); 
};

Acceleration

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.add(this.acceleration);
    this.velocity.limit(10); // 最大値を10に制限する
    this.position.add(this.velocity);
};

A totally random acceleration


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

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.add(this.acceleration);
    this.velocity.limit(5);
    this.position.add(this.velocity);
};

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.add(this.acceleration);
        this.velocity.limit(5);
        this.position.add(this.velocity);
    };

    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(); 
        };
    };