Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

DZone's Guide to

Transforming Arrays of Points in JavaScript

In this tutorial, you use the map array method to transform arrays of points, reflecting and rotating them.

· Web Dev Zone ·
Free Resource

Comment (0)

Save
{{ articles[0].views | formatCount}} Views

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

In this tutorial, you use the map array method to transform arrays of points, reflecting and rotating them. For example, you reflect a simple shape across the y-axis, as shown below.

Representing a Single Point

For a single point, use an array with two elements, to represent the x- and y- coordinates. The following code produces this output:

`x is 3 and y is 4`

``````var p1 = [ 3 , 4 ];

console.log("x is " + p1[0] + " and y is " + p1[1]);``````

You create an array,  `[ 3 , 4 ]`  and assign it to the variable  `p1` . To access the elements in the array, append the index of the required element, in square brackets, to the variable:  `p1[0]`  for the first element and  `p1[1]`  for the second. (Indexes for arrays start at 0.)

To reflect a single point in the y-axis, switch the sign of the point's x-coordinate. For example, `[ 3 , 4 ]`   reflected in the y-axis becomes  `[ -3 , 4 ]` , as shown in figure 2.

To perform the reflection, create a function; you'll want to use the function again and again to reflect multiple points. The code block below displays the following output:

`(3, 4) becomes (-3, 4)`

``````// Change the sign of the x-coordinate
function reflectInY (point) {
return [ -point[0] , point[1] ];
}

// Return a string representation of the point
function getPointString (point) {
return "(" + point[0] + ", " + point[1] + ")";
}

// Create our initial point
var p1 = [ 3 , 4 ];

// Create a reflected point
var p2 = reflectInY(p1);

// Display the transformation
console.log(getPointString(p1) + " becomes " + getPointString(p2));``````

http://jsbin.com/sarenixozi/edit?js,console

You pass the function,  `reflectInY` , a point as an argument and it returns a new point with the updated x-coordinate:

`return [ -point[0] , point[1] ];`

Reflecting Multiple Points Using Map

To represent multiple points in code, you use an array of points, an array of arrays:

``var points = [ [3, 4], [3, 1], [1, 1] ];``

To reflect all of the points in the y-axis, you need to pass each point to the  `reflectInY`  function. The result should be a new array of points.

JavaScript has a  `map`  method that creates a new array from an existing array. You specify the mapping function that  `map`  will use to create each new element from the corresponding existing element.

``var newArray = oldArray.map(mappingFunction);``

So, for your set of points, the mapping function will be  `reflectInY` .

``````var points = [ [3, 4], [3, 1], [1, 1] ];

function reflectInY (point) {
return [ -point[0], point[1] ];
}

var reflected = points.map(reflectInY);

console.log(reflected);
// [ [-3, 4], [-3, 1], [-1, 1] ]``````

`map`  passes each point in the original  `points`  array to the  `reflectInY`  function. The reflected points that  `reflectInY`  returns make up the elements of the new  `reflected`  array.

However, you might want to hide the implementation, how you performed the reflection, and provide a  `reflectAllInY`  function instead:

``````var points = [ [3, 4], [3, 1], [1, 1] ];

function reflectInY (point) {
return [ -point[0], point[1] ];
}

function reflectAllInY (pointsArray) {
return pointsArray.map(reflectInY);
}

var reflected = reflectAllInY(points);

console.log(reflected);
// [ [-3, 4], [-3, 1], [-1, 1] ]``````

http://jsbin.com/ducopuq/edit?js,console

You don't want to be able only to reflect points in the y-axis; you want a range of transformations at your fingertips. For now, you add the ability to reflect in the x-axis and to rotate 90 degrees clockwise.

The figure below shows a point reflected in the x-axis. Notice how the sign of its y-coordinate is changed.

Here's the function to perform the reflection:

``````function reflectInX (point) {
return [ point[0], -point[1] ];
}``````

As with  `reflectInY` , the  `reflectInX`  function returns a new point with the required coordinates.

The next figure shows a point rotated by 90 degrees clockwise about (0, 0). Pay careful attention to how the x- and y-coordinates are changed by the transformation.

And here's the function to perform the rotation:

``````function rotate90cw (point) {
return [ point[1], -point[0] ];
}``````

The function returns a new point. The new x-coordinate is the old y-coordinate. The new y-coordinate is the old x-coordinate with its sign changed.

Applying the Transformations to Multiple Points

You can now bring all of your transformation functions together and apply them to multiple points using the  `map`  method.

``````// Individual transformations

function reflectInY (point) {
return [ -point[0], point[1] ];
}

function reflectInX (point) {
return [ point[0], -point[1] ];
}

function rotate90cw (point) {
return [ point[1], -point[0] ];
}

// Group transformations

function reflectAllInY (points) {
return points.map(reflectInY);
}

function reflectAllInX (points) {
return points.map(reflectInX);
}

function rotateAll90cw (points) {
return points.map(rotate90cw);
}

// Test the functions

var points = [ [3, 4], [3, 1], [1, 1] ];

var reflected = reflectAllInX(points);
var rotated = rotateAll90cw(points);

console.log(reflected);  // [ [3, -4], [3, -1], [1, -1] ]
console.log(rotated);    // [ [4, -3], [1, -3], [1, -1] ]``````

http://jsbin.com/leyosu/edit?js,console

Transformations in Action

You can see a demo of the transformations over on JS Bin. Click the buttons to perform the transformations.

http://output.jsbin.com/tudoji

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:
javascript ,arrays ,transformations ,web dev

Comment (0)

Save
{{ articles[0].views | formatCount}} Views

Opinions expressed by DZone contributors are their own.