FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Keine Bearbeitungszusammenfassung
Zeile 25: Zeile 25:


<html>
<html>
<div id="gozinto1" style="width:90vw; max-width:600px; height:60vw; max-height:500px; margin-top:20px;"></div>
<div id="gozinto1" style="width:90vw; max-width:700px; height:60vw; max-height:500px; margin-top:20px;"></div>
<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script>
<script>
Zeile 31: Zeile 31:
     boundingbox: [-1, 8, 10, -1],
     boundingbox: [-1, 8, 10, -1],
     axis: false,
     axis: false,
     showCopyright: false,
     showNavigation: false,
     showNavigation: false
     showCopyright: false
});
});


// Hilfsfunktion zum Rechteck
// Rechteck mit Label innen
function box(x1,y1,x2,y2,color){
function box(x1,y1,x2,y2,text){
     return brd1.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
     var poly = brd1.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
         fillColor:color,fillOpacity:0.8,vertices:{visible:false},borders:{strokeColor:'#333'}
         fillColor:'#3498db',fillOpacity:0.8,vertices:{visible:false},
        borders:{strokeColor:'#1f4e78',strokeWidth:2}
     });
     });
    brd1.create('text',[(x1+x2)/2,(y1+y2)/2,text],
        {anchorX:'middle',anchorY:'middle',strokeColor:'white',fontSize:14});
    return poly;
}
}


// Knoten
// Knoten
var E1=box(0,6,1,7,'#e67e22');
var E1=box(0,6,1.5,7,'E1');
var E2=box(2,6,3,7,'#e67e22');
var E2=box(2,6,3.5,7,'E2');
var E3=box(4,6,5,7,'#e67e22');
var E3=box(4,6,5.5,7,'E3');
var E4=box(6,6,7,7,'#e67e22');
var E4=box(6,6,7.5,7,'E4');
var B1=box(1,3,2,4,'#3498db');
var B2=box(3,3,4,4,'#3498db');
var B3=box(5,3,6,4,'#3498db');
var B4=box(2,1,3,2,'#2ecc71');
var B5=box(4,1,5,2,'#2ecc71');


// Beschriftungen
var B1=box(1,3.5,2.5,4.5,'B1');
brd1.create('text',[0.4,7.2,'E1']);
var B2=box(3,3.5,4.5,4.5,'B2');
brd1.create('text',[2.4,7.2,'E2']);
var B3=box(5,3.5,6.5,4.5,'B3');
brd1.create('text',[4.4,7.2,'E3']);
var B4=box(2,1,3.5,2,'B4');
brd1.create('text',[6.4,7.2,'E4']);
var B5=box(5,1,6.5,2,'B5');
brd1.create('text',[1.4,4.2,'B1']);
brd1.create('text',[3.4,4.2,'B2']);
brd1.create('text',[5.4,4.2,'B3']);
brd1.create('text',[2.4,2.2,'B4']);
brd1.create('text',[4.4,2.2,'B5']);


function arrow(fromX, fromY, toX, toY, label){
// Hilfsfunktion: Pfeil mit Mengen-Kreis
     brd1.create('arrow',[[fromX,fromY],[toX,toY]],{strokeColor:'#555'});
function edge(from,to,label){
     brd1.create('text',[(fromX+toX)/2,(fromY+toY)/2+0.2,label],{fontSize:10});
    var midX=(from[0]+to[0])/2;
    var midY=(from[1]+to[1])/2;
    var dirX=(to[0]-from[0]);
    var dirY=(to[1]-from[1]);
    var len=Math.sqrt(dirX*dirX+dirY*dirY);
    var ux=dirX/len, uy=dirY/len;
    var gap=0.3; // Lücke an der Kreisposition
    var p1=[midX-ux*gap, midY-uy*gap];
    var p2=[midX+ux*gap, midY+uy*gap];
     brd1.create('arrow',[from,p1],{strokeColor:'#000',strokeWidth:1.5});
    brd1.create('arrow',[p2,to],{strokeColor:'#000',strokeWidth:1.5});
     brd1.create('circle',[ [midX,midY],0.2 ],{fillColor:'white',strokeColor:'black'});
    brd1.create('text',[midX,midY,label],{anchorX:'middle',anchorY:'middle',fontSize:11});
}
}


// Kanten
// Verbindungen laut Aufgabe:
arrow(0.5,6,1.5,4,'2');
edge([0.75,6],[1.75,4.5],'2'); // E1→B1
arrow(2.5,6,1.5,4,'1');
edge([2.75,6],[1.75,4.5],'1'); // E2→B1
arrow(2.5,6,3.5,4,'3');
 
arrow(4.5,6,3.5,4,'2');
edge([0.75,6],[3.75,4.5],'2'); // E1→B2
arrow(4.5,6,5.5,4,'1');
edge([2.75,6],[3.75,4.5],'1'); // E2→B2
arrow(6.5,6,5.5,4,'1');
 
arrow(1.5,3,2.5,2,'1');
edge([0.75,6],[5.75,4.5],'1'); // E1→B3
arrow(3.5,3,2.5,2,'2');
edge([2.75,6],[5.75,4.5],'1'); // E2→B3
arrow(3.5,3,4.5,2,'1');
edge([4.75,6],[5.75,4.5],'1'); // E3→B3
arrow(5.5,3,4.5,2,'1');
 
edge([0.75,6],[2.75,2],'2');  // E1→B4
edge([4.75,6],[2.75,2],'1');   // E3→B4
edge([6.75,6],[2.75,2],'1');  // E4→B4
 
edge([0.75,6],[5.75,2],'1');  // E1→B5
edge([6.75,6],[5.75,2],'2');  // E4→B5
</script>
</html>
 
== Beispiel 2: Rezeptstruktur eines Gerichts ==
<html>
<div id="gozinto2" style="width:90vw; max-width:700px; height:60vw; max-height:500px; margin-top:20px;"></div>
<script>
var brd2 = JXG.JSXGraph.initBoard('gozinto2', {
    boundingbox: [-1, 8, 10, -1],
    axis: false,
    showNavigation: false,
    showCopyright: false
});
 
function box2(x1,y1,x2,y2,text){
    var poly = brd2.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
        fillColor:'#3498db',fillOpacity:0.8,vertices:{visible:false},
        borders:{strokeColor:'#1f4e78',strokeWidth:2}
    });
    brd2.create('text',[(x1+x2)/2,(y1+y2)/2,text],
        {anchorX:'middle',anchorY:'middle',strokeColor:'white',fontSize:14});
    return poly;
}
 
// Zutaten
var M=box2(0,6,1.5,7,'Mehl');
var W=box2(2,6,3.5,7,'Wasser');
var H=box2(4,6,5.5,7,'Hefe');
var T=box2(2,3.5,3.5,4.5,'Teig');
var S=box2(5,3.5,6.5,4.5,'Soße');
var P=box2(3,1,4.5,2,'Pizza');
 
// Pfeile mit Kreisen
function edge2(from,to,label){
    var midX=(from[0]+to[0])/2;
    var midY=(from[1]+to[1])/2;
    var dirX=(to[0]-from[0]);
    var dirY=(to[1]-from[1]);
    var len=Math.sqrt(dirX*dirX+dirY*dirY);
    var ux=dirX/len, uy=dirY/len;
    var gap=0.3;
    var p1=[midX-ux*gap, midY-uy*gap];
    var p2=[midX+ux*gap, midY+uy*gap];
    brd2.create('arrow',[from,p1],{strokeColor:'#000',strokeWidth:1.5});
    brd2.create('arrow',[p2,to],{strokeColor:'#000',strokeWidth:1.5});
    brd2.create('circle',[ [midX,midY],0.2 ],{fillColor:'white',strokeColor:'black'});
    brd2.create('text',[midX,midY,label],{anchorX:'middle',anchorY:'middle',fontSize:11});
}
 
// Beziehungen
edge2([0.75,6],[2.75,4.5],'2'); // Mehl->Teig
edge2([2.75,6],[2.75,4.5],'1'); // Wasser->Teig
edge2([4.75,6],[2.75,4.5],'0.5'); // Hefe->Teig
 
edge2([2.75,4.5],[3.75,2],'1'); // Teig->Pizza
edge2([5.75,4.5],[3.75,2],'1'); // Soße->Pizza
</script>
</script>
</html>
</html>
Abgerufen von „https://wiki.flbk-hamm.de/Gozintograph“