Sierpinski-Dreieck

Sierpinski-Dreieck

Ich habe kürzlich das Sierpinski-Dreieck für mich entdeckt, als ich einem Freund bei seinen Java-Aufgaben geholfen habe. Das Sierpinski-Dreieck ist ein Fraktal aus Dreiecken, die selbstähnlich sind, beschrieben von Waclaw Sierpinski, mehr dazu auf http://de.wikipedia.org/wiki/Sierpinski-Dreieck.
Ich dachte mir, dass muss doch auch für meinen kleinen Blog hier machbar sein, allerdings wollte ich kein JavaApplet haben. Auf http://www.walterzorn.de/jsgraphics/jsgraphics.htm habe ich eine JavaScript Bibliothek gefunden, mit der man mit Hilfe von farbigen DIV Containern malen kann, finde ich toll.
Diese habe ich dann auch benutzt, um das Sierpinski-Dreieck einmal in JavaScript zu implementieren.



Die Zeichnung besteht wirklich nur aus DIVs 🙂
Es folgt der JavaScript Code, den ich dazu geschrieben habe. Die Sierpinski Funktion war ursprünglich eine Java Methode aus einem Übungsblatt, die ich für JavaScript entsprechend angepasst habe.


Code Highlight von http://quickhighlighter.com

<!-- DIV Container, der die Zeichnung aufnimmt -->
<div id="canvas" style="position:relative;width:100%;height:450px;">
</div>

<!-- hier beginnt das Java Script -->
<script id="js" type="text/javascript">
<!--
    var jg = new jsGraphics("canvas"); //Variable für das Zeichenobjekt
   
    function triangle(x1,y1,x2,y2,x3,y3) //Objektdefinition für das Dreieck, inklusive Konstruktor
    {
        //Variablen für Start- und Endpunkte sowie Kantenlänge und Flächeninhalt
        this.x1=x1;
        this.x2=x2;
        this.x3=x3;
        this.y1=y1;
        this.y2=y2;
        this.y3=y3;
        this.a=0;
        this.b=0;
        this.c=0;
        this.area=0;
        //Kantenlängen und Flächeninhalt müssen berechnet werden
        this.update();
    }
   
    //Setter
    triangle.prototype.setx1 = function(x1){
        this.x1=x1;
    }
    triangle.prototype.setx2 = function(x2){
        this.x2=x2;
    }
    triangle.prototype.setx3 = function(x3){
        this.x3=x3;
    }
    triangle.prototype.sety1 = function(y1){
        this.y1=y1;
    }
    triangle.prototype.sety2 = function(y2){
        this.y2=y2;
    }
    triangle.prototype.sety3 = function(y3){
        this.y3=y3;
    }
   
    //Kantenlängen und Flächeninhalt neu berechnen
    triangle.prototype.update = function(){
        this.setA();
        this.setB();
        this.setC();
        this.setArea();
    }
   
    //Berechnung der Kantenlängen nach dem Satz des Pythagoras
    triangle.prototype.setA = function() {this.a = Math.sqrt((this.x2-this.x1)*(this.x2-this.x1)+(this.y2-this.y1)*(this.y2-this.y1));} //Länge eines Vektors a1,a2 ist Wurzel aus(a1*a1 + a2*a2), wobei a1 = this.x2-this.x1 ist usw.
    triangle.prototype.setB = function() {this.b = Math.sqrt((this.x3-this.x2)*(this.x3-this.x2)+(this.y3-this.y2)*(this.y3-this.y2));}
    triangle.prototype.setC = function() {this.c = Math.sqrt((this.x1-this.x3)*(this.x1-this.x3)+(this.y1-this.y3)*(this.y1-this.y3));}
   
    //Berechnung des Flächeninhalts nach dem Satz des Heron
    triangle.prototype.setArea = function()
    {
        this.area = 0.25*Math.sqrt((this.a+this.b+this.c)*(this.a+this.b-this.c)*(this.b+this.c-this.a)*(this.c+this.a-this.b));
    }
   
    //Verschiebung des Dreiecks um einen Vektor (v1,v2)
    triangle.prototype.move = function(v1,v2)
    {
        this.x1 = this.x1+v1;
        this.x2 = this.x2+v1;
        this.x3 = this.x3+v1;
       
        this.y1 = this.y1+v2;
        this.y2 = this.y2+v2;
        this.y3 = this.y3+v2;
    }
   
    //das aktuelle Dreieck wird gezeichnet
    triangle.prototype.draw = function()
    {
        jg.drawLine(this.x1,this.y1,this.x2,this.y2);
        jg.drawLine(this.x2,this.y2,this.x3,this.y3);
        jg.drawLine(this.x3,this.y3,this.x1,this.y1);
        jg.paint();
    }  

    //die Sierpinski Funktion
    function sierpinski(t)
    {
        t.draw();
        if( t.area < 100 ) {
            t.draw();
            return;
        }
        t.setx2((t.x1+t.x2)/2);
        t.sety2((t.y1+t.y2)/2);
        t.setx3((t.x1+t.x3)/2);
        t.sety3((t.y1+t.y3)/2);
        t.move(t.x2-t.x1, t.y2-t.y1);
        t.update();
        sierpinski(t);
        t.move(t.x3-t.x2, t.y3-t.y2);
        t.update();
        sierpinski(t);
        t.move(t.x1-t.x3, t.y1-t.y3);
        t.update();
        sierpinski(t);
        t.setx2(2*t.x2-t.x1);
        t.sety2(2*t.y2-t.y1);
        t.setx3(2*t.x3-t.x1);
        t.sety3(2*t.y3-t.y1);
        t.update();
    }

    //neues Dreieck erzeugen und nach Sierpinski zeichnen
    var t1 = new triangle(0,0,500,0,250,433);
    sierpinski(t1);
   
//-->
</script>