JavaScript Graphics Library (JSGL.org) Draw and move interactive vector graphics easily in Javascript!

This is an old revision of the document!


Class Vector2D (jsgl.Vector2D)

jsgl.Vector2D is a utility class, objects of which can be used throughout JSGL to simplify manipulation with 2-D coordinates. Many JSGL API classes provide interface methods that accept or return jsgl.Vector2D objects.

Even though JSGL does not force you to use jsgl.Vector2D objects, they may be useful if you create applications of high complexity.

Typically, jsgl.Vector2D are cloned whenever passed as parameter or returned by a function. The objects are very small and serve as de-facto value type for 2-D coordinates.

Constructor: jsgl.Vector2D([x, [y]])

You can simply create jsgl.Vector2D object by calling its constructor:

var myVector = new jsgl.Vector2D(); // the vector created is [X=0,Y=0]

If no arguments are passed to the constructor, both the X and Y components of the vector take a default value of 0.

As a shortcut, you also can initialize the vector during construction by providing X and Y values:

var myVector = new jsgl.Vector2D(100,50); // the vector created is [X=100,Y=50]

Public Fields

Name Description
X The X-axis coordinate of the vector.
Y The Y-axis coordinate of the vector.

The jsgl.Vector2D is designed so that its X and Y fields can be accessed directly. However, there are some methods that allow you to do some basic operations with the vector.

Method Summary

Setters, Getters

Even though the X and Y fields can be accessed directly, you may use setter/getter methods:

Setters
setX(newX: Number) Sets the X-axis coordinate of the vector.
setY(newY: Number) Sets the Y-axis coordinate of the vector.
Getters
getX() : Number Gets the current X-axis coordinate of the vector.
getY() : Number Gets the current Y-axis coordinate of the vector.

Transformations

add(v: jsgl.Vector2D) : jsgl.Vector2D Does the translation of the current vector by the vector given as the argument.
subtract(v: jsgl.Vector2D) : jsgl.Vector2D Does the translation of the current vector by the inversed vector given as the argument.
rotate(centerX: Number, centerY: Number, angle: Number) : jsgl.Vector2D Does the rotation of the current vector around given point in given angle.

Miscellaneous

equals(value) : Boolean Tests whether the vector is equal to the object given as argument.
toString() : String Converts the vector to string representation.

Method Detail

setX(newX: Number)

Sets the X-axis coordinate of the vector.

Parameters

Name Type Description
newX Number The new value for the X-axis coordinate.

Example

Set the X-axis coordinate to 50:

myVector.setX(50);

is equivalent to, yet more OOP-compliant than:

myVector.X = 50;

Since

version 1.0

setY(newY: Number)

Sets the Y-axis coordinate of the vector.

Parameters

Name Type Description
newY Number The new value for the Y-axis coordinate.

Example

Set the X-axis coordinate to 30:

myVector.setX(30);

is equivalent to, yet more OOP-compliant than:

myVector.X = 30;

Since

version 1.0

getX() : Number

Gets the current X-axis coordinate of the vector.

Returns

Number

Example

Echo the current X-axis component of the vector:

window.alert(myVector.getX());

is equivalent to, yet more OOP-compliant than:

window.alert(myVector.X);

Since

version 1.0

getY() : Number

Gets the current Y-axis coordinate of the vector.

Returns

Number

Example

Echo the current Y-axis component of the vector:

window.alert(myVector.getY());

is equivalent to, yet more OOP-compliant than:

window.alert(myVector.Y);

Since

version 1.0

add(v: jsgl.Vector2D) : jsgl.Vector2D

Creates a new vector whose X and Y components are the coordinates of the current vector, translated by a vector given as a parameter. The current vector remains unchanged.

Parameters

Name Type Description
v jsgl.Vector2D The translation vector.

Returns

jsgl.Vector2D – the current vector translated by vector v

Example

var vectorA = new jsgl.Vector2D(10,20);
var vectorB = new jsgl.Vector2D(30,50);
 
window.alert(vectorA.add(vectorB)); // prints "40 70"

Since

version 1.0

subtract(v: jsgl.Vector2D) : jsgl.Vector2D

Creates a new vector whose X and Y components are the coordinates of the current vector, translated by a negation of the vector given as a parameter. The current vector remains unchanged.

Parameters

Name Type Description
v jsgl.Vector2D The inverse-translation vector.

Returns

jsgl.Vector2D – the current vector translated by vector -v

Example

var vectorA = new jsgl.Vector2D(20,50);
var vectorB = new jsgl.Vector2D(30,40);
 
window.alert(vectorA.substract(vectorB)); // prints "-10 10"

Since

version 1.0

rotate(centerX: Number, centerY: Number, angle: Number) : jsgl.Vector2D

Creates a new vector obtained by clockwise rotation of the current vector around point [centerX,centerY] by angle given in radians.

Parameters

Name Type Description
centerX Number The X-coordinate of the rotation origin.
centerY Number The Y-coordinate of the rotation origin.
angle Number The angle by which the current vector will be rotated, given in radians.

Returns

jsgl.Vector2D

Example

Rotate the current vector [x=30,y=20] clockwise by 45 degrees around [x=10,y=10]:

var myVector = new jsgl.Vector2D(30,20);
var rotated = myVector.rotate(10, 10, Math.PI/2);
 
window.alert(rotated); // prints "0 30"

Since

version 1.0

equals(value) : Boolean

Tests whether the vector is equal to the object given as the argument.

Returns

Boolean:

  • false if the argument is not instance of jsgl.Vector2D, or if differs in X or Y component,
  • true if the argument is jsgl.Vector2D object, which is component-wise equal to the current vector.

Since

version 1.0

toString() : String

Converts the vector to string representation.

Returns

String

Example

In the following code, the .toString() method of the myVector object is called implicitly by the JavaScript interpreter:

var myVector = new jsgl.Vector(20, 40);
 
window.alert(myVector); // same as window.alert(myVector.toString()), prints "20 40"

Since

version 1.0

 
vector2d.1346016852.txt.gz · Last modified: 2013/03/14 02:47 (external edit)
 
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Driven by DokuWiki Powered by PHP Valid XHTML 1.0 Valid CSS