We Keep Coding

How to implement granular synthesis(pitch shifter)?

Since music speed and pitch is coupled together, if I speed up music, pitch is also increased. And conversely, if I slow down music, pitch is also decreased.
However, I saw that using granular synthesis, I can decouple speed and pitch. So, I'm currently trying hard to implement granular synthesis.
First of all, I think I succeeded in implementing double speed and half speed, while pitch is same. The code is as same as the following:
※ grain size is 2000. It means that I use 0.04ms of sound as one grain. (2000 samples * 1 s / 44100 samples = 0.04s = 40ms)
// get music
const $fileInput = document.createElement('input');
$fileInput.setAttribute('type', 'file');
document.body.appendChild($fileInput);
$fileInput.addEventListener('change', async (e) => {
const music = await $fileInput.files[0].arrayBuffer();
const actx = new (window.AudioContext || window.webkitAudioContext)({ latencyHint: 'playback', sampleRate: 44100 });
const audioData = await actx.decodeAudioData(music);
const original = audioData.getChannelData(0);
const arr = [];
const grainSize = 2000;
// Please choose one code out of double speed code or half speed code
// copy and paste audio processing code here
});
// double speed
// ex: [0,1,2,3, 4,5,6,7, 8] => [0,1, 4,5, 8] discard 2 items out of 4 items
for (let i = 0; i < original.length; i += grainSize) {
if (original[i + (grainSize / 2) - 1] !== undefined) {
for (let j = 0; j < grainSize / 2; j++) {
arr.push(original[i + j]);
}
} else {
for (let j = i; j < original.length; j++) {
arr.push(j);
}
}
}
// half speed
// ex: [0,1, 2,3, 4] => [0,1,0,0, 2,3,0,0, 4,0,0] add 'two' zeros after every 'two' items
for (let i = 0; i < original.length; i += grainSize) {
if (original[i + grainSize - 1] !== undefined) {
for (let j = 0; j < grainSize; j++) {
arr.push(original[i + j]);
}
} else {
for (let j = i; j < original.length; j++) {
arr.push(original[j]);
}
}
for (let j = 0; j < grainSize; j++) {
arr.push(0);
}
}
// play sound
const f32Arr = Float32Array.from(arr);
const audioBuffer = new AudioBuffer({ length: arr.length, numberOfChannels: 1, sampleRate: actx.sampleRate });
audioBuffer.copyToChannel(f32Arr, 0);
const absn = new AudioBufferSourceNode(actx, { buffer: audioBuffer });
absn.connect(actx.destination);
absn.start();
But the problem is, I totally have no idea how to implement pitch shifter (that is, different pitch, same speed).
As far as I think, same speed means same AudioBuffer size. Therefore, the only variable in my hand is grain size. But I seriously don't know what should I do. It would be greatly appreciated if you share some of your knowledge. Thank you very much!
To Phil Freihofner
Hello, thank you for the kind explanation. I tried your method. As far as I understand, your method is a process that does the following:
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // input data (10 samples)
→ [0, 2, 4, 6, 8] // double speed, 1 octave high (sampling interval: 2)
→ [0, 0, 2, 2, 4, 4, 6, 6, 8, 8] // change duration
The result sounds 1 octave high with same duration (successful pitch shifting). However, I don't know what should I do if I do sampling from the input data with sampling interval 1.5? What I mean is I have no idea how to make the length of [0, 1, 3, 4, 6, 7, 9] as the same length with the input data.
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // input data
// from
[0, 1, 3, 4, 6, 7, 9] // sampling interval: 1.5
// to
[?, ?, ?, ?, ?, ?, ?, ?, ?, ?]
Meanwhile, I learned that pitch shift can be achieved by a way and as far as I understand, the way is as following:
[1] make each granule be started at the same position as original source
[2] play each granule with different speed.
In addition, I found that I can achieve pitch shifting and time stretching if I transform an input data like the following:
input data = [0, 1, 2, 3, 4, 5, 6, 7]
grain size = 4
<pitch shifting>
in case of p = 2
result = [0, 2, 0, 2, 4, 6, 4, 6] // sounds like one octave high
// If I remember correctly, [0, 2, 0, 0, 4, 6, 0, 0] is also fine
// (and it is more fit to the definition above ([1] and [2])
// but the sound was not good (stuttering).
// I found that [0, 2, 0, 2...] is better.
in case of p = 1.5
result = [0, 1, 3, 0, 4, 5, 7, 4]
in case of p = 0.5
result = [0, 0, 1, 1, 4, 4, 5, 5] // sounds like one octave low
<time stretching>
in case of speed = 2
result = [0, 1, 4, 5]
in case of speed = 1.2
result = [0, 1, 2, 4, 5, 6]
in case of speed = 0.5
result = [0, 1, 2, 3, 0, 1, 2, 3, 4, 5, 6, 7, 4, 5, 6, 7]
// If I remember correctly, [0, 1, 2, 3, 0, 0, 0, 0...] is also fine
// but the sound was not good (stuttering)
in case of speed = 0.75
result = [0, 1, 2, 3, 0, 4, 5, 6, 7, 4]
Anyway, thank you for the answer.

I've not read your code close enough to comment on it specifically, but I can comment on the general theory of how pitch shifting is accomplished.
The granules are usually given volume envelopes, with a fade-in and fade-out. I've seen the Hann function (Hanning Window) mentioned as a possibility. Also, the granules are overlapped, with the windowing creating a cross-fade, in effect.
Let's say a granule is 2000 frames, but with the windowing. If you make a granule at every 1000 frames and play them back, overlapping, at the same spacing (every 1000 frames), you should hear the equivalent of the original sound.
Varying the playback distance between the overlapping granules is how the different time lengths of the sound are accomplished. For example, instead of playing a granule every 1000 frames, use 900 or 1100.
I'm pretty sure there are factors to take into consideration concerning the size and shape of the windowing and the range of possible intervals between the granules, but I am not up on them. My simple experiments with this have been with Java and mostly work, but with some artificiality creeping into the playback.
I think consulting at StackOverflow's Signal Processing site would be a good bet for getting more info on the specifics.
EDIT: I just realized that I misread your question! You were asking about changing the pitch while retaining the length of time over which the sounds play. I don't know if this is the "best" way, but I'd consider a plan of doing this in two steps. First, change the sound to the desired pitch. Then, alter the duration of the new sound to be that of the original sound.
The first step can be done with linear interpolation. I tried to explain how to do this in a previous question. For the second step, we break the transformed wave into granules.
However, I just noticed, Spektre has an additional answer on that post that does directly using what you ask, via using FFT. This is probably a better way, but I haven't tried implementing it myself.
EDIT 2, in response to the question added to the OP:
Given, PCM data for 10 frames as follows [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9] (I'm using signed floats ranging from -1 to 1. You may have to scale this to convert to your format.)
To change the pitch of the playback to 1.5x (but also changes the length) we get the following data: [0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9]
The 0.15 is a value that is halfway between points 0.1 and 0.2, arrived at by linear interpolation. If the speed were 1.25x, the data points would be as follows: [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, ?? (depends on what follows 0.9)].
The linear intepolation calculation for index 1 in the sequence is as follows:
pitchShiftedAudioData1 = originalPCM1 * (1 - 0.25) + originalPCM2 * 0.75;
In other words, since we land at a point that is 0.25 of the way in between originalPCM1 and originalPCM2, the above calculates what that value would be if the data progressed linearly from 1 to 2.
After doing all this, there would still remain additional steps to form the pitch-shifted data into granules. One has to use a windowing function for each granule. If the window were only 10 frames long (far too short, but will illustrate), a possible window might be the following: [0.01, 0.15 , 0.5 , 0.85 , 1, 1, 0.85, 0.5, 0.15 , 0.01]. (In actuality, it should follow the Hann function.)
This is applied to the data from the different starting points, to create the granules, where N is the index in the array of the signal.
[ signal[N] * window[0], signal[N+1] * window1, signal[N+2] * window2, ..., signal[N+10] * window[10] ]
To create the new signal, the resulting granules are placed sequentially, overlapping, and summed. The relative placement of the granules (how close together or far apart) determines the timing. This is my naive understanding of a brute-force way to accomplish time-shifting, and I've had some OK, not great, results.
I hope this clarifies what I was attempting to describe somewhat!
If you aren't able to follow, please consider unchecking this as the answer. Others may participate that will be able to provide easier to understand information or corrections.
Time-shifting is pretty advanced, IMHO, so expect some complicated calculations and coding (unless someone has a tool to recommend).

JavaScript: Is there an elegant way to generate the coordinates of adjacent cells in a 2d array

let's say I have a grid i.e. 2d array
const grid = [
[0, 0, A, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, B, 0],
[D, E, 0, C, F],
[0, 0, 0, 0, 0],
]
if some cell in the grid can visit all adjacent cells 4-diredtionally, for example, C is at [3, 3] so it can visit [3, 3 + 1], [3 - 1, 3],[3 +1, 3]``[3, 3 - 1], so normally I would have to hard code this like
// 👇 hard-coded directions
const dirs = [
[1, 0],
[-1, 0],
[0, 1],
[0, -1],
]
const possibleMoves = []
for (const [dx, dy] of dirs) {
possibleMoves.push([dx + x, dy +y])
}
then if it can move 8-directionally then you have to hard code more directions
const dirs = [[1, 0], [-1, 0] , [0,1], [0,-1], [1,1], [-1,1], [-1,-1], [1,-1]]
Is there a smarter way to generate the dirs array for the next moves?

Yes!
First: any time you're doing grid-logic, start by checking what Amit Patel has to say.
Honestly, that link has everything you could ever need.
The short version is: if you know the grid width and cell layout, you can easily calculate coordinate offsets of any cell neighbor for any definition of "neighbor."
That logic can be implemented as a pure function that requires both the grid dimensions and the coordinates of the cell whose neighbors you want (aka the "target" cell):
let myNeighbors = getCellNeighbors(
{ x: 2, y: 2 }, // coords of target cell
{ width: 10, height: 10 } // grid dimensions, in cells
)
Or you can create a stateful thing that takes the grid dimensions at creation and calculates the offsets once, to be re-used for all getNeighbors calls:
let myGrid = new Grid(10, 10)
let myNeighbors = myGrid.getNeighbors(2, 5)
let myBiggerGrid = new Grid(25, 25)
let otherNeighbors = myBiggerGrid(2, 5)

Algorithm Fill Closed Area in Tile map JavaScript

sorry for my english.
I have a problem and what is the next:
Example, i have a map:
var map =
[[0,1,1,0,0,0,0,0,0,0],
[0,1,0,1,0,1,1,0,0,0],
[0,1,0,0,1,0,0,1,0,0],
[0,1,0,0,0,0,0,0,1,0],
[0,0,1,0,0,0,0,1,0,0],
[0,0,0,1,0,0,0,1,1,0],
[0,0,1,0,0,0,1,0,0,0],
[0,1,0,0,0,0,0,1,0,0],
[1,0,0,1,1,1,0,1,0,0],
[0,1,1,0,0,1,1,1,0,0]];
Which contains a series of numbers 0 and 1 (For example). I need to fill in all the closed boxes that are on this map, for example using the number 2.
Example:
var map =
[[0,1,1,0,0,0,0,0,0,0],
[0,1,2,1,0,1,1,0,0,0],
[0,1,2,2,1,2,2,1,0,0],
[0,1,2,2,2,2,2,2,1,0],
[0,0,1,2,2,2,2,1,0,0],
[0,0,0,1,2,2,2,1,1,0],
[0,0,1,2,2,2,1,0,0,0],
[0,1,2,2,2,2,2,1,0,0],
[1,2,2,1,1,1,2,1,0,0],
[0,1,1,0,0,1,1,1,0,0]];
Taking into consideration that:
Just as in this example there is only one closed figure, there can be several closed figures
The sides of the map will not be taken into consideration
If it is of any use, the numbers 1 (which would be the solid), will
be generated as time passes, so the map will be constantly changing
(like strokes in an array)
I found a method called "Flood Fill" but however it depends on a starting point, in this case it has no starting point. The idea is that the code is in charge of finding the closed areas and filling them automatically.

If you don't have starting coordinates, one method to identify every 0 to be filled is to identify every 0 on the edges. Each of these zeros should not be filled, and each 0 eventually adjacent to these 0s should also not be filled. So, if you take the edge 0s as the "starting point" and iterate through all of their recursive neighbors, you'll have identified each coordinate which is a 0 but should not be filled in.
Then, it's simple: just iterate over the input, and for every 0, check to see if the current coordinate is in that set of coordinates that shouldn't be filled. If the coordinate is not in that set, replace with a 2.
var map =
[[0,1,1,0,0,0,0,0,0,0],
[0,1,2,1,0,1,1,0,0,0],
[0,1,2,2,1,2,2,1,0,0],
[0,1,2,2,2,2,2,2,1,0],
[0,0,1,2,2,2,2,1,0,0],
[0,0,0,1,2,2,2,1,1,0],
[0,0,1,2,2,2,1,0,0,0],
[0,1,2,2,2,2,2,1,0,0],
[1,2,2,1,1,1,2,1,0,0],
[0,1,1,0,0,1,1,1,0,0]];
const height = map.length;
const width = map[0].length;
const edgeZerosCoords = new Set();
map.forEach((arr, row) => {
arr.forEach((num, col) => {
if (num === 0 && (row === 0 || col === 0 || row === width - 1 || col === height - 1)) {
edgeZerosCoords.add(`${row}_${col}`);
}
})
});
const doNotFillCoords = new Set();
const visited = new Set();
const checkCoord = (row, col) => {
// Verify valid coord:
if (row < 0 || col < 0 || row === width || col === height) return;
const str = `${row}_${col}`;
if (doNotFillCoords.has(str) || visited.has(str)) return;
visited.add(str);
const num = map[row][col];
if (num !== 0) return;
doNotFillCoords.add(str);
checkCoord(row + 1, col);
checkCoord(row - 1, col);
checkCoord(row, col + 1);
checkCoord(row, col - 1);
};
for (const str of edgeZerosCoords) {
const [row, col] = str.split('_').map(Number);
checkCoord(row, col)
}
map.forEach((arr, row) => {
arr.forEach((num, col) => {
const str = `${row}_${col}`;
if (num === 0 && !doNotFillCoords.has(str)) {
map[row][col] = 2;
}
})
});
console.log(JSON.stringify(map));
Result:
[
[0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 2, 1, 0, 1, 1, 0, 0, 0],
[0, 1, 2, 2, 1, 2, 2, 1, 0, 0],
[0, 1, 2, 2, 2, 2, 2, 2, 1, 0],
[0, 0, 1, 2, 2, 2, 2, 1, 0, 0],
[0, 0, 0, 1, 2, 2, 2, 1, 1, 0],
[0, 0, 1, 2, 2, 2, 1, 0, 0, 0],
[0, 1, 2, 2, 2, 2, 2, 1, 0, 0],
[1, 2, 2, 1, 1, 1, 2, 1, 0, 0],
[0, 1, 1, 0, 0, 1, 1, 1, 0, 0]
]

Connect 2 phaser sprites using p2 revolute constraints without apply force

So I have sprites that I want to connect using p2.js' revolute constraints. My current implementation applys force to the sprites as soon as the constraint is created.
How can I avoid this behavior?
If it can't be avoided is there another way to connect 2 sprites with each other horizontally?EDIT:
var Game = {
preload: function() {
game.load.image('tree00', './imgs/tree/tree-00.png');
game.load.image('tree01', './imgs/tree/tree-01.png');
game.load.image('tree02', './imgs/tree/tree-02.png');
game.load.image('tree03', './imgs/tree/tree-03.png');
game.load.image('tree04', './imgs/tree/tree-04.png');
game.load.image('tree05', './imgs/tree/tree-05.png');
game.load.spritesheet('present', './imgs/dude.png', 32, 48);
},
create: function() {
game.physics.startSystem(Phaser.Physics.P2JS);
game.physics.p2.gravity.y = 300;
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = '#aaffee';
treeCollsionGroup = game.physics.p2.createCollisionGroup();
presentCollisionGroup = game.physics.p2.createCollisionGroup();
this.createPresent(game.world.width * 0.21, game.world.height * 0.6);
this.createTree(6, game.world.width * 0.2, game.world.height * 0.8);
//presentCollisionGroup.collides(treeCollsionGroup);
connection[0] = game.physics.p2.createRevoluteConstraint(treeParts[treeParts.length - 1], [(treeParts[treeParts.length - 1].width)/2, treeParts[treeParts.length - 1].height], present, [-present.width/2, treeParts[treeParts.length - 1].height], maxForce);
connection[1] = game.physics.p2.createRevoluteConstraint(treeParts[treeParts.length - 1], [(treeParts[treeParts.length - 1].width)/2, 0], present, [-present.width/2, 0], maxForce);
},
createTree: function(length, xAnchor, yAnchor) {
var lastSprite;
for (var i = 0; i < length; i++) {
newSprite = game.add.sprite(xAnchor, yAnchor - i*100, 'tree0' + i);
newSprite.scale.x = game.world.width/1920;
newSprite.scale.y = game.world.width/1920;
game.physics.p2.enable(newSprite, true);
if (i != length-1) {
newSprite.body.setRectangle(game.world.width * 0.10, newSprite.height * 0.15);
} else {
newSprite.body.setRectangle(newSprite.width * 0.8, newSprite.height * 0.8);
}
newSprite.body.setCollisionGroup(treeCollsionGroup);
if(i === 0) {
newSprite.body.static = true;
}
if (lastSprite) {
switch(i) {
case 1: constraint = game.physics.p2.createRevoluteConstraint(newSprite, [0, 0], lastSprite, [0, -lastSprite.height * 0.62], maxForce);
treeConstraints.push(constraint);
break;
case 2: constraint = game.physics.p2.createRevoluteConstraint(newSprite, [0, 0], lastSprite, [0, -lastSprite.height * 0.285], maxForce);
treeConstraints.push(constraint);
break;
case 3: constraint = game.physics.p2.createRevoluteConstraint(newSprite, [0, 0], lastSprite, [0, -lastSprite.height * 0.425], maxForce);
treeConstraints.push(constraint);
break;
case 4: constraint = game.physics.p2.createRevoluteConstraint(newSprite, [0, 0], lastSprite, [0, -lastSprite.height * 0.4], maxForce);
treeConstraints.push(constraint);
break;
case 5: constraint = game.physics.p2.createRevoluteConstraint(newSprite, [0, 0], lastSprite, [0, -lastSprite.height * 0.55], maxForce);
treeConstraints.push(constraint);
break;
}
}
lastSprite = newSprite;
treeParts.push(newSprite);
newSprite.body.collides(treeCollsionGroup);
}
},
createPresent: function(xAnchor, yAnchor) {
present = game.add.sprite(game.world.width * 0.21, game.world.height * 0.6, 'present');
game.physics.p2.enable(present, true);
present.scale.x = game.world.width/1920;
present.scale.y = game.world.width/1920;
present.body.setRectangle(present.width, present.height);
present.body.data.gravityScale = 0;
present.body.setCollisionGroup(presentCollisionGroup);
}
}
I cut the less important code out so it would not be too much (it already is). Basically what I'm doing is: I create a tree and connecting the parts using revolute constraints so they behave like a tree in the real world (for example in the wind).
Than I create the present which is basically a sprite that should be horizontally connected to the top of the tree. Therefore I use 2 revolute constraint one for the topmost point between the sprites and one for the bottommost. (I know it's kind of dirty code)
After I create these constraints and the present gets connected to the top of the tree the tree starts shaking and collapses (like it should). But I don't want this behaviour.Maybe a lock constraint is what I'm looking for, I have to look into this.
Edit 2:
After taking a look at lock constraints I realized that this is what I'm looking for. But even lock constraints are collapsing the tree.

I can't really understand your issue but have you tried Prismatic or even Lock Constraint? Can give us some code or even codepen example so we may be able to help you better?

CSS matrix calculation

Been trying to sort this out for a few days and I am not sure if the CSS matrix is different from standard graphics matrices, or if I have something wrong (likely I have something wrong).
I am primarily trying to figure out how to rotate on the X and Y axis. When I use "transform: rotateX(2deg) rotateY(2deg) translate3d(0px, -100px, 0px);" and I use javascript to grab the matrix style, this is what I am able to output.
0.9993908270190958, -0.001217974870087876, -0.03487823687206265, 0,
0, 0.9993908270190958, -0.03489949670250097, 0,
0.03489949670250097, 0.03487823687206265, 0.9987820251299122, 0,
0, -99.93908270190957, 3.489949670250097, 1
But if I try to calculate the matrix using javascript (with 2 degrees on both X and Y) I get
0.9993908270190958, 0, -0.03489949670250097, 0,
-0.001217974870087876, 0.9993908270190958, -0.03487823687206265, 0,
0.03487823687206265, 0.03489949670250097, 0.9987820251299122, 0,
0.1217974870087876, -99.93908270190957, 3.487823687206265, 1
Now while several numbers are different in the second one, I believe one number is causing the problem. Note the numbers in row 1/column 2 and in row 2/column 1, for both matrices. The "-0.001217974870087876" looks to be switched. And if I understand how everything is calculated that is likely throwing off all the other numbers.
Here's the code I am using to create the second matrix
var basematrix = [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -100, 0, 1]
];
function RotateWorld(y, x)
{
var halfrot = Math.PI / 180;
var xcos = Math.cos(x * halfrot);
var xsin = Math.sin(x * halfrot);
var ycos = Math.cos(y * halfrot);
var ysin = Math.sin(y * halfrot);
var ymatrix = [
[ycos, 0, -ysin, 0],
[0, 1, 0, 0],
[ysin, 0, ycos, 0],
[0, 0, 0, 1]
];
var xmatrix = [
[1, 0, 0, 0],
[0, xcos, xsin, 0],
[0, -xsin, xcos, 0],
[0, 0, 0, 1]
];
var calcmatrix = MatrixMultiply(ymatrix, basematrix);
calcmatrix = MatrixMultiply(xmatrix, calcmatrix);
calcmatrix = TransMultiply(calcmatrix);
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < 4; j++)
{
document.getElementById('info').innerHTML += calcmatrix[i][j] + ', ';
}
}
}
function MatrixMultiply(matrixa, matrixb)
{
var newmatrix = [];
for (var i = 0; i < 4; ++i)
{
newmatrix[i] = [];
for (var j = 0; j < 4; ++j)
{
newmatrix[i][j] = matrixa[i][0] * matrixb[0][j]
+ matrixa[i][1] * matrixb[1][j]
+ matrixa[i][2] * matrixb[2][j]
+ matrixa[i][3] * matrixb[3][j];
}
}
return newmatrix;
}
function TransMultiply(matrix)
{
var newmatrix = matrix;
var x = matrix[3][0];
var y = matrix[3][1];
var z = matrix[3][2];
var w = matrix[3][3];
newmatrix[3][0] = x * matrix[0][0] + y * matrix[1][0] + z * matrix[2][0];
newmatrix[3][1] = x * matrix[0][1] + y * matrix[1][1] + z * matrix[2][1];
newmatrix[3][2] = x * matrix[0][2] + y * matrix[1][2] + z * matrix[2][2];
newmatrix[3][3] = x * matrix[0][3] + y * matrix[1][3] + z * matrix[2][3] + newmatrix[3][3];
if (newmatrix[3][3] != 1 && newmatrix[3][3] != 0)
{
newmatrix[3][0] = x / w;
newmatrix[3][1] = y / w;
newmatrix[3][2] = z / w;
}
return newmatrix;
}
My code is a bit verbose as I am just trying to learn how to work with the CSS matrix. But hopefully someone can help me get that one number into the right place.
Edit
I hate to bump a post but I am running out of places to ask, so I am hoping a few more people will see it with a chance of getting an answer. I have tried every possible search to figure this out (unique questions don't get ranked very high in Google). I have probably read over 20 articles on working with matrices and they are yielding nothing. If I need to add more information please let me know. Also if there is a better place to ask let me know that as well. I would assume by now several people have looked at the code and the code must be ok, maybe my assumption that CSS is the culprit is a possibility, if so how does one track that down?

Take a look at this page, it explains how css 3dmatrix work. Also here you have an implementation in JS of CSSMatrix object, very similar to WebKitCSSMatrix which is already included in your (webkit) browser for your use.

You have a bug in your implementation of function TransMultiply(matrix) { .. }
var newmatrix = matrix;
That isn't cloning your matrix, that's setting newmatrix to refer to your original matrix! Anything using this method is going to have the original matrix and new matrix messed up. You might want to use a method that creates new 4x4 matricies, like:
function new4x4matrix(){
return [[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]];
}
and then wherever you need a new matrix, do:
var newmatrix = new4x4matrix();
Edit: err, but you may actually need a clone method: fine.
function cloneMatrix(matrixa)
{
var newmatrix = [];
for (var i = 0; i < 4; ++i)
{
newmatrix[i] = [];
for (var j = 0; j < 4; ++j)
{
newmatrix[i][j] = matrixa[i][j];
}
}
return newmatrix;
}
and instead, for TransMultiply do:
var newmatrix = cloneMatrix(matrix);