Webstatt.org - Community seit 2006 - 2012 (2024?)

Punktmatrix

Avatar user-255
08.06.2006 14:55
Findet zwar wohl noch seltener Anwendung als meine Permutations-Funktion, aber was macht man nicht alles, wen einem langweilig ist.. zwinkern

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ß Fettes Grinsen

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'zwinkern;

	for(var i=0;i<tbls.length;i++){if(tbls[i].getAttribute('class'zwinkern=='matrix'zwinkernthis.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'zwinkern+'"></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'zwinkern;

				if((v==0&&c=='y'zwinkern||(v==1&&c=='n'zwinkern){td[x].setAttribute('class', (c=='y'zwinkern?'n':'y'zwinkern}

			}

		}

	}

// 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überraschtrange}


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



m.drawChr(2,2,'A'zwinkern;

m.drawChr(2,9,'B'zwinkern;

m.drawChr(2,16,'C'zwinkern;

m.drawChr(2,23,'D'zwinkern;

m.drawChr(2,30,'E'zwinkern;

m.drawChr(2,37,'F'zwinkern;

m.drawChr(2,44,'G'zwinkern;



m.render();
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
Avatar user-255
08.06.2006 15:22
Update: update Methode implementiert 8)

Mini-Animation
var m=new matrix(20,15);

m.drawChr(2,2,'A'zwinkern;

m.drawChr(2,9,'B'zwinkern;

m.render();



for(var i=0;i<5;i++){

	setTimeout(function(){

		m.drawChr(2,2,'B'zwinkern;

		m.drawChr(2,9,'A'zwinkern;

		m.render();

		setTimeout(function(){

			m.drawChr(2,2,'A'zwinkern;

			m.drawChr(2,9,'B'zwinkern;

			m.render();

		},500);

	},500+i*1000);

}
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm