|
|
| Zeile 293: |
Zeile 293: |
|
| |
|
| == Beispiel 2: Rezeptstruktur eines Gerichts == | | == 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>
| |
| </html>
| |
|
| |
| === Rezeptstruktur eines Gerichts ===
| |
| Im nächsten Beispiel wird der Gozintograph genutzt, um die Zutatenstruktur eines Rezepts zu zeigen.
| |
| Das Endprodukt „Pizza“ besteht aus mehreren Zwischenprodukten („Teig“, „Soße“) und Basiszutaten.
| |
| Auch hier zeigen Pfeile mit Zahlen, welche Mengen von Zutaten in die jeweiligen Komponenten eingehen.
| |
|
| |
| <html>
| |
| <div id="gozinto2" style="width:90vw; max-width:600px; height:60vw; max-height:500px; margin-top:20px;"></div>
| |
| <script>
| |
| var brd2 = JXG.JSXGraph.initBoard('gozinto2', {
| |
| boundingbox: [-1, 8, 10, -1],
| |
| axis: false,
| |
| showCopyright: false,
| |
| showNavigation: false
| |
| });
| |
|
| |
| function box2(x1,y1,x2,y2,color){
| |
| return brd2.create('polygon',[[x1,y1],[x2,y1],[x2,y2],[x1,y2]],{
| |
| fillColor:color,fillOpacity:0.8,vertices:{visible:false},borders:{strokeColor:'#333'}
| |
| });
| |
| }
| |
|
| |
| var M1=box2(0,6,1,7,'#e67e22'); // Mehl
| |
| var W1=box2(2,6,3,7,'#e67e22'); // Wasser
| |
| var H1=box2(4,6,5,7,'#e67e22'); // Hefe
| |
| var T1=box2(1,3,2,4,'#3498db'); // Teig
| |
| var T2=box2(5,3,6,4,'#3498db'); // Soße
| |
| var T3=box2(3,1,4,2,'#2ecc71'); // Pizza
| |
|
| |
| brd2.create('text',[0.4,7.2,'Mehl']);
| |
| brd2.create('text',[2.4,7.2,'Wasser']);
| |
| brd2.create('text',[4.4,7.2,'Hefe']);
| |
| brd2.create('text',[1.4,4.2,'Teig']);
| |
| brd2.create('text',[5.4,4.2,'Soße']);
| |
| brd2.create('text',[3.4,2.2,'Pizza']);
| |
|
| |
| function arrow2(fromX, fromY, toX, toY, label){
| |
| brd2.create('arrow',[[fromX,fromY],[toX,toY]],{strokeColor:'#555'});
| |
| brd2.create('text',[(fromX+toX)/2,(fromY+toY)/2+0.2,label],{fontSize:10});
| |
| }
| |
|
| |
| // Zutaten -> Teig
| |
| arrow2(0.5,6,1.5,4,'2');
| |
| arrow2(2.5,6,1.5,4,'1');
| |
| arrow2(4.5,6,1.5,4,'0.5');
| |
| // Teig + Soße -> Pizza
| |
| arrow2(1.5,3,3.5,2,'1');
| |
| arrow2(5.5,3,3.5,2,'1');
| |
| </script>
| |
| </html>
| |
|
| |
|
| [[Kategorie:Lineare_Algebra]] | | [[Kategorie:Lineare_Algebra]] |
| [[Kategorie:AHR_WuV_Mathe_GK]] | | [[Kategorie:AHR_WuV_Mathe_GK]] |