User:Pseudosphere/Test Page 2

<graph>{

"width": 512, "height": 512, "background": "black", "signals": [ {"name":"clocks","init":{"expr":"{raw:now(),active:false,offset:now(),main:0,prev:0,delta:0,frames:0}"},"streams":[{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:now(),active:eventX()>=0&&eventX()<width&&eventY()>=0&&eventY()<height,offset:clocks.offset,main:clocks.main,prev:clocks.prev,delta:clocks.delta,frames:clocks.frames}"},{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:clocks.raw,active:clocks.active,offset:clocks.active?clocks.offset:(clocks.raw-clocks.main),main:clocks.active?(clocks.raw-clocks.offset):clocks.main,prev:clocks.prev,delta:clocks.delta,frames:clocks.frames+clocks.active}"},{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:clocks.raw,active:clocks.active,offset:clocks.offset,main:clocks.main,prev:clocks.main,delta:clocks.main-clocks.prev,frames:clocks.frames}"}]}, { "name": "wHeld", "streams": [ { "type": "body:keydown[event.code=='KeyW']", "expr": true }, { "type": "body:keyup[event.code=='KeyW']", "expr": false } ] }, { "name": "aHeld", "streams": [ { "type": "body:keydown[event.code=='KeyA']", "expr": true }, { "type": "body:keyup[event.code=='KeyA']", "expr": false } ] }, { "name": "sHeld", "streams": [ { "type": "body:keydown[event.code=='KeyS']", "expr": true }, { "type": "body:keyup[event.code=='KeyS']", "expr": false } ] }, { "name": "dHeld", "streams": [ { "type": "body:keydown[event.code=='KeyD']", "expr": true }, { "type": "body:keyup[event.code=='KeyD']", "expr": false } ] }, { "name": "wColor", "init": "white", "expr": "wHeld ? 'lime' : 'white'" }, { "name": "aColor", "init": "white", "expr": "aHeld ? 'lime' : 'white'" }, { "name": "sColor", "init": "white", "expr": "sHeld ? 'lime' : 'white'" }, { "name": "dColor", "init": "white", "expr": "dHeld ? 'lime' : 'white'" }, { "name": "vX", "init": 0, "expr": "dHeld ? aHeld ? 0 : 0.00390625 : aHeld ? -0.00390625 : 0" }, { "name": "vZ", "init": 0, "expr": "wHeld ? sHeld ? 0 : 0.00390625 : sHeld ? -0.00390625 : 0" }, { "name": "xPos", "init": 0, "streams": [ { "type": "body:mousemove,mouseover,mouseout,body:wheel", "expr": "xPos + vX * clocks.delta" } ] }, { "name": "zPos", "init": -1, "streams": [ { "type": "body:mousemove,mouseover,mouseout,body:wheel", "expr": "zPos + vZ * clocks.delta" } ] }, { "name": "xText", "init": "X: 0", "expr": "'X: ' + xPos" }, { "name": "zText", "init": "Z: 0", "expr": "'Z: ' + zPos" }, { "name": "square0", "expr": "'M' + (256 + (-1 - xPos) * 256 / (1 - zPos)) + ' ' + (256 - 128 / (1 - zPos)) + 'v' + (256 / (1 - zPos)) + 'L' + (256 - xPos * 256 / (2 - zPos)) + ' ' + (256 + 128 / (2 - zPos)) + 'v' + (-256 / (2 - zPos)) + 'Z'" }, { "name": "square1", "expr": "'M' + (256 + (1 - xPos) * 256 / (1 - zPos)) + ' ' + (256 - 128 / (1 - zPos)) + 'v' + (256 / (1 - zPos)) + 'L' + (256 - xPos * 256 / (2 - zPos)) + ' ' + (256 + 128 / (2 - zPos)) + 'v' + (-256 / (2 - zPos)) + 'Z'" }, { "name": "square2", "expr": "'M' + (256 + (1 - xPos) * 256 / (1 - zPos)) + ' ' + (256 - 128 / (1 - zPos)) + 'v' + (256 / (1 - zPos)) + 'L' + (256 + (1 - xPos) * -256 / zPos) + ' ' + (256 - 128 / zPos) + 'v' + (256 / zPos) + 'Z'" }, { "name": "square3", "expr": "'M' + (256 + (-1 - xPos) * 256 / (1 - zPos)) + ' ' + (256 - 128 / (1 - zPos)) + 'v' + (256 / (1 - zPos)) + 'L' + (256 + (-1 - xPos) * -256 / zPos) + ' ' + (256 - 128 / zPos) + 'v' + (256 / zPos) + 'Z'" } ], "marks": [ { "name": "poly0", "type": "path", "properties": { "enter": { "fill": {"value": "red"} }, "update": { "path": {"signal": "square0"} } } }, { "name": "poly1", "type": "path", "properties": { "enter": { "fill": {"value": "blue"} }, "update": { "path": {"signal": "square1"} } } }, { "name": "poly2", "type": "path", "properties": { "enter": { "fill": {"value": "lime"} }, "update": { "path": {"signal": "square2"} } } }, { "name": "poly3", "type": "path", "properties": { "enter": { "fill": {"value": "yellow"} }, "update": { "path": {"signal": "square3"} } } }, { "name": "coordX", "type": "text", "properties": { "enter": { "fill": {"value": "white"}, "x": {"value": 0}, "y": {"value": 0}, "baseline": {"value": "top"}, "font": {"value": "monospace"}, "fontSize": {"value": 16} }, "update": { "text": {"signal": "xText"} } } }, { "name": "coordZ", "type": "text", "properties": { "enter": { "fill": {"value": "white"}, "x": {"value": 0}, "y": {"value": 16}, "baseline": {"value": "top"}, "font": {"value": "monospace"}, "fontSize": {"value": 16} }, "update": { "text": {"signal": "zText"} } } }, { "name": "wIndicator", "type": "text", "properties": { "enter": { "x": {"value": 16}, "y": {"value": 32}, "baseline": {"value": "top"}, "fontSize": {"value": 16}, "font": {"value": "monospace"}, "text": {"value": "W"} }, "update": { "fill": {"signal": "wColor"} } } }, { "name": "aIndicator", "type": "text", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 48}, "baseline": {"value": "top"}, "fontSize": {"value": 16}, "font": {"value": "monospace"}, "text": {"value": "A"} }, "update": { "fill": {"signal": "aColor"} } } }, { "name": "sIndicator", "type": "text", "properties": { "enter": { "x": {"value": 16}, "y": {"value": 48}, "baseline": {"value": "top"}, "fontSize": {"value": 16}, "font": {"value": "monospace"}, "text": {"value": "S"} }, "update": { "fill": {"signal": "sColor"} } } }, { "name": "dIndicator", "type": "text", "properties": { "enter": { "x": {"value": 32}, "y": {"value": 48}, "baseline": {"value": "top"}, "fontSize": {"value": 16}, "font": {"value": "monospace"}, "text": {"value": "D"} }, "update": { "fill": {"signal": "dColor"} } } } ]

}</graph>