| 1 | <!DOCTYPE HTML> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Test Reflection and Projection matrices</title> |
|---|
| 5 | <style> |
|---|
| 6 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 7 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 8 | </style> |
|---|
| 9 | <script src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|---|
| 10 | <script> |
|---|
| 11 | dojo.require("dojox.gfx"); |
|---|
| 12 | dojo.require("dojo.colors"); |
|---|
| 13 | |
|---|
| 14 | dojo.require("dijit.form.HorizontalSlider"); |
|---|
| 15 | dojo.require("dijit.form.HorizontalRule"); |
|---|
| 16 | dojo.require("dijit.form.HorizontalRuleLabels"); |
|---|
| 17 | |
|---|
| 18 | var W = 500, H = 500, MARKER_SIZE = 5; |
|---|
| 19 | |
|---|
| 20 | function makeGrid(group, size, step, stroke){ |
|---|
| 21 | var g = group.createGroup(); |
|---|
| 22 | stroke = stroke || {color: [0, 0, 0, 0.1], width: 1}; |
|---|
| 23 | for(var i = step; i < size; i += step){ |
|---|
| 24 | g.createLine({x1: 0, y1: i, x2: size, y2: i}).setStroke(stroke); |
|---|
| 25 | g.createLine({x1: i, y1: 0, x2: i, y2: size}).setStroke(stroke); |
|---|
| 26 | } |
|---|
| 27 | g.createRect({x: 0, y: 0, width: size - 1, height: size -1}).setStroke("black"); |
|---|
| 28 | return g; |
|---|
| 29 | } |
|---|
| 30 | |
|---|
| 31 | var surface, shape, line = {x1: 0, y1: 0, x2: W, y2: H}, |
|---|
| 32 | rm, pm, pt, rpt, ppt, point, rpoint, ppoint, rline, pline; |
|---|
| 33 | |
|---|
| 34 | function updatePoints(){ |
|---|
| 35 | // get all transforms |
|---|
| 36 | rm = dojox.gfx.matrix.reflect(line.x2, line.y2); |
|---|
| 37 | pm = dojox.gfx.matrix.project(line.x2, line.y2); |
|---|
| 38 | |
|---|
| 39 | // update points and lines |
|---|
| 40 | if(point){ |
|---|
| 41 | rpt = dojox.gfx.matrix.multiplyPoint(rm, pt); |
|---|
| 42 | ppt = dojox.gfx.matrix.multiplyPoint(pm, pt); |
|---|
| 43 | point.setShape({cx: pt.x, cy: pt.y, r: MARKER_SIZE}); |
|---|
| 44 | rpoint.setShape({cx: rpt.x, cy: rpt.y, r: MARKER_SIZE}); |
|---|
| 45 | ppoint.setShape({cx: ppt.x, cy: ppt.y, r: MARKER_SIZE}); |
|---|
| 46 | rline.setShape({x1: pt.x, y1: pt.y, x2: rpt.x, y2: rpt.y}); |
|---|
| 47 | pline.setShape({x1: pt.x, y1: pt.y, x2: ppt.x, y2: ppt.y}); |
|---|
| 48 | } |
|---|
| 49 | } |
|---|
| 50 | |
|---|
| 51 | function shiftVector(value){ |
|---|
| 52 | // update the line |
|---|
| 53 | if(value < 0){ |
|---|
| 54 | line.y2 = H; |
|---|
| 55 | line.x2 = W + (W / 100) * value; |
|---|
| 56 | }else{ |
|---|
| 57 | line.x2 = W; |
|---|
| 58 | line.y2 = H - (H / 100) * value; |
|---|
| 59 | } |
|---|
| 60 | shape.setShape(line); |
|---|
| 61 | updatePoints(); |
|---|
| 62 | } |
|---|
| 63 | |
|---|
| 64 | function setPoint(e){ |
|---|
| 65 | var bbox = dojo.position("surf", true); |
|---|
| 66 | pt = {x: e.pageX - bbox.x, y: e.pageY - bbox.y}; |
|---|
| 67 | if(!point){ |
|---|
| 68 | point = surface.createCircle({cx: 0, cy: 0, r: MARKER_SIZE}). |
|---|
| 69 | setStroke("black").setFill("yellow"); |
|---|
| 70 | rpoint = surface.createCircle({cx: 0, cy: 0, r: MARKER_SIZE}). |
|---|
| 71 | setStroke("black").setFill("red"); |
|---|
| 72 | ppoint = surface.createCircle({cx: 0, cy: 0, r: MARKER_SIZE}). |
|---|
| 73 | setStroke("black").setFill("green"); |
|---|
| 74 | rline = surface.createLine({x1: 0, y1: 0, x2: 0, y2: 0}). |
|---|
| 75 | setStroke("red"); |
|---|
| 76 | pline = surface.createLine({x1: 0, y1: 0, x2: 0, y2: 0}). |
|---|
| 77 | setStroke({color: "green", style: "dash"}); |
|---|
| 78 | } |
|---|
| 79 | updatePoints(); |
|---|
| 80 | } |
|---|
| 81 | |
|---|
| 82 | run = function(surface){ |
|---|
| 83 | makeGrid(surface, W, 50); |
|---|
| 84 | shape = surface.createLine(line).setStroke("black"); |
|---|
| 85 | dojo.connect(dijit.byId("shifter"), "onChange", shiftVector); |
|---|
| 86 | dojo.connect(dojo.byId("surf"), "onclick", setPoint); |
|---|
| 87 | shiftVector(0); |
|---|
| 88 | }; |
|---|
| 89 | |
|---|
| 90 | createSurface = function(){ |
|---|
| 91 | surface = dojox.gfx.createSurface("surf", W, H); |
|---|
| 92 | surface.whenLoaded(run); |
|---|
| 93 | }; |
|---|
| 94 | |
|---|
| 95 | dojo.addOnLoad(createSurface); |
|---|
| 96 | </script> |
|---|
| 97 | </head> |
|---|
| 98 | <body class="tundra"> |
|---|
| 99 | <h1>Test Reflection and Projection matrices</h1> |
|---|
| 100 | <div id="shifter" dojoType="dijit.form.HorizontalSlider" |
|---|
| 101 | value="0" minimum="-100" maximum="100" value="0" discreteValues="21" showButtons="false" intermediateChanges="true" style="width: 500px;"> |
|---|
| 102 | <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count="21" style="height: 5px;"></div> |
|---|
| 103 | <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="5" style="height: 5px;"></div> |
|---|
| 104 | <div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" labels="-100,-50,0,50,100" style="height: 1.2em; font-size: 75%; color: gray;"></div> |
|---|
| 105 | </div> |
|---|
| 106 | <div id="surf"></div> |
|---|
| 107 | <p>Legend: <span style="background: yellow;">yellow</span> is your point, <span style="color: red;">red</span> is a reflected point, |
|---|
| 108 | <span style="color: green;">green</span> is a projected point.</p> |
|---|
| 109 | <p>Click anywhere on the surface to set a point and see its reflection and projection.</p> |
|---|
| 110 | </body> |
|---|
| 111 | </html> |
|---|
