Willkommen in der Webstatt Zum Webstatt Blog und Stories
milahu milahu am 08.06.06 16:55

Findet zwar wohl noch seltener Anwendung als meine Permutations-Funktion, aber was macht man nicht alles, wen einem langweilig ist.. ;)

Ursprünglich wollte ich kleine Animationen darin ablaufen lassen, aber das würde wohl jeden Browser in die Knie zwingen.. *g
Jetzt hab ich ihm ein paar Buchstaben beigebracht, die man in die Punktmatrix schreiben kann. Viel Spaß :D

JS-Code
function matrix(width,height){
// konstruktor
this.width=width;
this.height=height;
// ID erzeugen
this.id=1;
// nach anderen matrizen suchen
tbls=document.getElementsByTagName('table');
for(var i=0;i<tbls.length;i++){if(tbls[i].getAttribute('class')=='matrix')this.id++}
// zuruecksetzen
this.reset=function(){
this.field=new Array(this.height);
for(var y=0;y<height;y++){
this.field[y]=new Array(this.width);
for(var x=0;x<width;x++){this.field[y][x]=0}
}
}
this.reset();
// charmap mit je 7x11 feldern
this.charmap={
'A':[[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,1,0,0,1,0,0],[0,1,0,0,1,0,0],[0,1,1,1,1,0,0],[1,0,0,0,0,1,0],[1,0,0,0,0,1,0],[1,0,0,0,0,1,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]],
'B':[[1,1,1,1,1,0,0],[1,0,0,0,0,1,0],[1,0,0,0,0,1,0],[1,1,1,1,1,0,0],[1,0,0,0,0,1,0],[1,0,0,0,0,1,0],[1,0,0,0,0,1,0],[1,1,1,1,1,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]],
'C':[[0,0,1,1,1,0,0],[0,1,0,0,0,1,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[0,1,0,0,0,1,0],[0,0,1,1,1,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]],
'D':[[1,1,1,1,0,0,0],[1,0,0,0,1,0,0],[1,0,0,0,0,1,0],[1,0,0,0,0,1,0],[1,0,0,0,0,1,0],[1,0,0,0,0,1,0],[1,0,0,0,1,0,0],[1,1,1,1,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]],
'E':[[1,1,1,1,1,1,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,1,1,1,1,0,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]],
'F':[[1,1,1,1,1,1,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,1,1,1,1,0,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]],
'G':[[0,0,1,1,1,0,0],[0,1,0,0,0,1,0],[1,0,0,0,0,0,0],[1,0,0,0,0,0,0],[1,0,0,0,1,1,0],[1,0,0,0,0,1,0],[0,1,0,0,0,1,0],[0,0,1,1,1,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0]]
}
// rendern
this.render=function(){
if(document.getElementById(this.id)){this.update()}else{this.rendernew()}
}
// neu erstellen
this.rendernew=function(){
b='<table class="matrix" id="'+this.id+'">';
for(var y=0;y<height;y++){b+='<tr>';for(var x=0;x<width;x++){b+='<td class="'+((this.field[y][x]==0)?'n':'y')+'"></td>'}b+='</tr>';}
b+='</table>';
document.write(b);
}
// aktualisieren
this.update=function(){
var m=document.getElementById(this.id);
var tr=m.childNodes[0].childNodes;
for(var y=0;y<tr.length;y++){
var td=tr[y].childNodes;
for(var x=0;x<td.length;x++){
var v=this.field[y][x];
var c=td[x].getAttribute('class');
if((v==0&&c=='y')||(v==1&&c=='n')){td[x].setAttribute('class', (c=='y')?'n':'y')}
}
}
}
// zeichen schreiben
this.drawChr=function(y,x,chr){
for(y_c=0;y_c<11;y_c++){
for(x_c=0;x_c<7;x_c++){
this.field[y_c+y][x_c+x]=this.charmap[chr][y_c][x_c];
}
}
}
// feld aendern
this.toggle=function(y,x){
this.field[y][x]=(this.field[y][x]==0)?1:0;
}
}


CSS-Definitionen
*{margin:0;padding:0}
.matrix{border-spacing:0px}
.matrix td{width:1px;height:1px}
.matrix .y{background:black}
.matrix .n{background:orange}


Beispiel (Ausgabe im Firefox ist im Anhang zu bewundern..)
var m=new matrix(60,40);

m.drawChr(2,2,'A');
m.drawChr(2,9,'B');
m.drawChr(2,16,'C');
m.drawChr(2,23,'D');
m.drawChr(2,30,'E');
m.drawChr(2,37,'F');
m.drawChr(2,44,'G');

m.render();

netcup.de Warum gibt es hier Werbung?
milahu milahu am 08.06.06 17:22

Update: update Methode implementiert 8)

Mini-Animation
var m=new matrix(20,15);
m.drawChr(2,2,'A');
m.drawChr(2,9,'B');
m.render();

for(var i=0;i<5;i++){
setTimeout(function(){
m.drawChr(2,2,'B');
m.drawChr(2,9,'A');
m.render();
setTimeout(function(){
m.drawChr(2,2,'A');
m.drawChr(2,9,'B');
m.render();
},500);
},500+i*1000);
}

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt