buba
09-27-2009, 11:54 AM
hi folks,
it's my first post here and it's my first script in javascript :)
i wrote a similar script years ago in php, and i'm trying to do it with js now.
my purpose is to create a matrix for 12-tone music. the numbers between 0-11 show the intervals between notes. maybe it sounds complicated at first but the matrix actually contains few simple calculations.
anyway, i wrote something and it works, but there are some problems.
when it loaded initially with the page, the matrix is perfect. but the calculations after the first one become wrong. just the first row and the first column are written correctly.
in other words, if we use the random numbers or we enter our numbers the results are wrong, except the first row and the first column.
you can see it in action @ http://abbasmacioglu.home.anadolu.edu.tr/m.html
here is my script:
<html>
<head>
<title>matrix</title>
<style type="text/css">
table, tr, td {
text-align: center;
vertical-align: middle;
border-width: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
var exist = 0;
function execute (form) {
therow = form.inputbox.value.split(",");
matrix();
}
function shufflerow (form) {
shuffle = function(v){
for (var y, x, z = v.length; z; y = parseInt(Math.random() * z), x = v[--z], v[z] = v[y], v[y] = x);
return v;
}
var randomrow = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
shuffle(randomrow);
var newLength = randomrow.unshift(0);
form.inputbox.value = randomrow;
}
function matrix() {
if (exist > 0) {
var box = document.getElementById('matrixarea');
var table = document.getElementById('matrixbox');
box.removeChild(table);
}
if (typeof(therow) == 'undefined') {
therow = new Array (0,3,2,1,9,5,7,6,8,4,11,10);
}
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var row = document.createElement("tr");
for(h=0 ; h < 12 ; ++h) {
var cell = document.createElement("td");
var cellText = document.createTextNode(therow[h]);
cell.appendChild(cellText);
row.appendChild(cell);
}
rows = new Array(11);
for (i=1 ; i < 12 ; ++i) {
tblBody.appendChild(row);
var row = document.createElement("tr");
col = new Array(11);
col[i] = 12 - therow[i];
var cell = document.createElement("td");
var cellText = document.createTextNode(col[i]);
cell.appendChild(cellText);
row.appendChild(cell);
tblBody.appendChild(row);
rows[i] = new Array(11);
for (j=1 ; j < 12 ; ++j) {
rows[i][j] = (col[i] + therow[j]) % 12;
var cell = document.createElement("td");
var cellText = document.createTextNode(rows[i][j]);
cell.appendChild(cellText);
row.appendChild(cell);
}
}
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute('id','matrixbox');
tbl.setAttribute("cellpadding", "5");
tbl.setAttribute("cellspacing", "0");
document.getElementById('matrixarea').appendChild(tbl);
exist++;
}
/* ]]> */
</script>
</head>
<body onload="matrix()">
<div id="matrixarea">
<form name="primerow" action="" method="get">
<input type="text" name="inputbox" value="">
<input type="button" name="button2" value="Shuffle" onClick="shufflerow(this.form)">
<input type="button" name="button1" value="Make" onClick="execute(this.form)">
</form>
</div>
</body>
</html>
here is a correct matrix, the first number should be seen diagonally on the table:
http://img180.imageshack.us/img180/9960/matrixv.th.gif (http://img180.imageshack.us/i/matrixv.gif/)
if you'd like to check them out, here are two other matrix pages, the second one was written in javascript:
http://www.evdokimoff.com/theory/tt_tools/
http://www.dancavanagh.com/music/matrix.php
my other problem is the shuffle button, it works just once, then it is fixed to the same numbers. it should produce new random numbers each time we press it.
(edit: solved, explained below)
i'd be grateful for any help or comments.
greetings...
it's my first post here and it's my first script in javascript :)
i wrote a similar script years ago in php, and i'm trying to do it with js now.
my purpose is to create a matrix for 12-tone music. the numbers between 0-11 show the intervals between notes. maybe it sounds complicated at first but the matrix actually contains few simple calculations.
anyway, i wrote something and it works, but there are some problems.
when it loaded initially with the page, the matrix is perfect. but the calculations after the first one become wrong. just the first row and the first column are written correctly.
in other words, if we use the random numbers or we enter our numbers the results are wrong, except the first row and the first column.
you can see it in action @ http://abbasmacioglu.home.anadolu.edu.tr/m.html
here is my script:
<html>
<head>
<title>matrix</title>
<style type="text/css">
table, tr, td {
text-align: center;
vertical-align: middle;
border-width: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
var exist = 0;
function execute (form) {
therow = form.inputbox.value.split(",");
matrix();
}
function shufflerow (form) {
shuffle = function(v){
for (var y, x, z = v.length; z; y = parseInt(Math.random() * z), x = v[--z], v[z] = v[y], v[y] = x);
return v;
}
var randomrow = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
shuffle(randomrow);
var newLength = randomrow.unshift(0);
form.inputbox.value = randomrow;
}
function matrix() {
if (exist > 0) {
var box = document.getElementById('matrixarea');
var table = document.getElementById('matrixbox');
box.removeChild(table);
}
if (typeof(therow) == 'undefined') {
therow = new Array (0,3,2,1,9,5,7,6,8,4,11,10);
}
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var row = document.createElement("tr");
for(h=0 ; h < 12 ; ++h) {
var cell = document.createElement("td");
var cellText = document.createTextNode(therow[h]);
cell.appendChild(cellText);
row.appendChild(cell);
}
rows = new Array(11);
for (i=1 ; i < 12 ; ++i) {
tblBody.appendChild(row);
var row = document.createElement("tr");
col = new Array(11);
col[i] = 12 - therow[i];
var cell = document.createElement("td");
var cellText = document.createTextNode(col[i]);
cell.appendChild(cellText);
row.appendChild(cell);
tblBody.appendChild(row);
rows[i] = new Array(11);
for (j=1 ; j < 12 ; ++j) {
rows[i][j] = (col[i] + therow[j]) % 12;
var cell = document.createElement("td");
var cellText = document.createTextNode(rows[i][j]);
cell.appendChild(cellText);
row.appendChild(cell);
}
}
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute('id','matrixbox');
tbl.setAttribute("cellpadding", "5");
tbl.setAttribute("cellspacing", "0");
document.getElementById('matrixarea').appendChild(tbl);
exist++;
}
/* ]]> */
</script>
</head>
<body onload="matrix()">
<div id="matrixarea">
<form name="primerow" action="" method="get">
<input type="text" name="inputbox" value="">
<input type="button" name="button2" value="Shuffle" onClick="shufflerow(this.form)">
<input type="button" name="button1" value="Make" onClick="execute(this.form)">
</form>
</div>
</body>
</html>
here is a correct matrix, the first number should be seen diagonally on the table:
http://img180.imageshack.us/img180/9960/matrixv.th.gif (http://img180.imageshack.us/i/matrixv.gif/)
if you'd like to check them out, here are two other matrix pages, the second one was written in javascript:
http://www.evdokimoff.com/theory/tt_tools/
http://www.dancavanagh.com/music/matrix.php
my other problem is the shuffle button, it works just once, then it is fixed to the same numbers. it should produce new random numbers each time we press it.
(edit: solved, explained below)
i'd be grateful for any help or comments.
greetings...