29:null 2a:["$","title",null,{"children":"How to create the Rubik's cube game using Vega | Mathias Tiberghien | Observable"}] 2f:T75b4,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "background":"black", "signals":[ { "name":"size", "init":"40*(min(width,height)/400)" }, { "name":"cube_padding", "value":0.02 }, { "name":"cube_size", "value":3 }, { "name":"btn_reset_pressed", "on":[{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"true"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"false"}] }, { "name":"btn_shuffle_pressed", "on":[{"events":"@btn_shuffle:mousedown,@txt_shuffle:mousedown", "update":"true"}, {"events":"@btn_shuffle:mouseup,@txt_shuffle:mouseup", "update":"false"}] }, { "name":"btn_solve_pressed", "on":[{"events":"@btn_solve:mousedown,@txt_solve:mousedown", "update":"true"}, {"events":"@btn_solve:mouseup,@txt_solve:mouseup", "update":"false"}] }, { "name":"reset", "on": [{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"setdata('points',[{iX:[]}])"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"0"}] }, { "name":"shuffle", "init":"-1", "on":[{"events":"@btn_shuffle:mousedown,@txt_shuffle:mousedown", "update":"setdata('shuffle', [{id:[]}]) === 1 ? -1:-1"},{"events":"@btn_shuffle:mouseup,@txt_shuffle:mouseup", "update":"solve_index === -1 ? 0 : -1"},{"events":"timer{50}", "update":"shuffle !== -1 && shuffle < 9 ? length(data('unfinished'))>0 ? shuffle : shuffle+1: -1"}] }, { "name":"shuffle_current", "on":[{"events":{"signal": "shuffle"}, "update":"shuffle !== -1 && shuffle <=9 ? data('shuffle')[shuffle]:null"}] }, { "name":"solve_index", "init":"-1", "on":[{"events":"@btn_solve:mouseup,@txt_solve:mouseup", "update":"length(data('history'))>0 ? solve_index === -1 ? length(data('history')) - 1 : solve_index : -1"},{"events":"timer{500}", "update":"solve_index >=0 && length(data('unfinished')) === 0 && solve_index !== -1 && solve_current_remaining === solve_current_completed ? solve_index - 1 : solve_index"},{"events":{"signal":"reset"},"update":"-1"}] }, { "name":"solve_current", "on":[{"events":{"signal":"solve_index"}, "update":"solve_index !==-1 ? data('history')[solve_index]: null"}] }, { "name":"solve_current_remaining", "on":[{"events":{"signal":"solve_current"}, "update":"solve_current !== null ? abs(round(solve_current.angle/90)): 0"}] }, { "name":"solve_current_rotation", "update":"solve_index !==-1 && solve_current!=null ? merge(solve_current,{angle:solve_current.angle < 0 ? 5 : -5}):{angle:0, axis:null, iX:-1, iY:-1, iZ:-1}", "on":[{"events":"timer{25}","update":"solve_index !==-1 && solve_current!=null && (length(data('unfinished'))> 0 || (solve_current_rotation.angle === 0 && solve_current_remaining > solve_current_completed)) ? merge(solve_current,{angle:solve_current.angle < 0 ? 5 : -5}):{angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"}] }, { "name":"solve_current_completed", "on":[{"events":{"signal":"solve_current"},"update":"0"},{"events":{"signal":"solve_current_rotation"}, "update":"solve_current_rotation.angle === 0 && solve_current_completed >=0 && solve_current_remaining > solve_current_completed? solve_current_completed + 1 : solve_current_completed"}] }, { "name":"scale", "value":1, "bind":{"input":"range","min": 0, "max": 2, "step": 0.1}, "on":[{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (cube_changing ? 0 : ((event.movementX < 0) ^ (rotation_VER > 180) ? 5 : (event.movementX > 0) ^(rotation_VER > 180) ? -5 : 0))"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + ( cube_changing ? 0 :(event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0))"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"angle_Line", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "force": true,"update":"rotation_Line.angle === 0 && selected !=null ? ((selected.axis === 'z' ? (event.movementX < 0 ^ (rotation_VER > 180) ? 1 : event.movementX === 0 ? 0 : -1) : (selected.axis === 'x' ? (event.movementY < 0 ^ isYZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : (selected.axis === 'y' ? (event.movementY < 0 ^ isXZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : 0)))*10) : 0"}] }, { "name":"completion_Angle", "on":[{"events":{"signal":"last_Rotation"}, "update":"last_Rotation !== null && last_Rotation.rotation.a % 90 !== 0? {angle: last_Rotation.rotation.a % 90 === 0 ? 0 : abs(last_Rotation.rotation.a) % 90 < 40 ? -(last_Rotation.rotation.a % 90) : (last_Rotation.rotation.a < 0 ? -90 : 90) - last_Rotation.rotation.a % 90, axis: last_Rotation.rotation.r, iX:last_Rotation.iX, iY: last_Rotation.iY, iZ: last_Rotation.iZ}:{angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":"view:mousedown", "update":"selected !=null ? {angle:0, axis: selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}:{angle:0, axis:null, iX: -1, iY: -1, iZ: -1}"}] }, { "name":"last_Rotation", "on":[{"events":{"signal":"cube_changing"}, "update":"cube_changing? null : length(data('unfinished'))>0 ? data('unfinished')[0] : null"},{"events":{"signal":"reset"},"update":"null"}] }, { "name":"history_Rotation", "update":"shuffle === -1 ? null : history_Rotation", "on": [ {"events":{"signal":"solve_index"},"update":"solve_index === -1 ? null: history_Rotation"}, {"events":{"signal":"shuffle_current"}, "update":"isValid(shuffle_current) ? shuffle_current.rotation : history_Rotation"}, {"events":{"signal":"last_Rotation || completion_Angle"}, "update":"completion_Angle !=null && last_Rotation!=null ? completion_Angle.axis !== null ? merge(completion_Angle, {angle:completion_Angle.angle + last_Rotation.rotation.a}) : {angle:last_Rotation.rotation.a,axis: last_Rotation.rotation.r, iX: last_Rotation.iX, iY: last_Rotation.iY, iZ: last_Rotation.iZ} : history_Rotation"}, {"events":{"signal":"reset"},"update":"null"} ] }, { "name":"clear_history", "on":[{"events":{"signal":"reset"}, "update":"reset"}, { "events":{"signal":"solve_index"}, "update":"solve_index === -1" }] }, { "name":"rotation_Line", "value":{"angle":0, "axis":null, "iX":-1, "iY":-1, "iZ":-1}, "on":[{"events":{"signal":"angle_Line"}, "update":"selected !== null ? {angle:angle_Line, axis : selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}: {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":{"signal":"completion_Angle"}, "update":"completion_Angle"},{"events":{"signal":"shuffle_current"}, "update":"shuffle_current!=null ? shuffle_current.rotation : {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":{"signal":"solve_current_rotation"}, "update":"solve_current_rotation", "force": true}] }, { "name":"rotation_HOR", "value":45, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"qrAngle_HOR", "init":"PI*(rotation_HOR)/360", "on": [{"events":{"signal":"-rotation_HOR"}, "update":"PI*(rotation_HOR)/360"}] }, { "name":"qrAngle_VER", "init":"PI*(rotation_VER)/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*(rotation_VER)/360"}] }, { "name":"qrAngle_Line", "init":"PI*(rotation_Line.angle)/360", "on": [{"events":{"signal":"rotation_Line"}, "update":"PI*(rotation_Line.angle)/360"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" }, { "name":"qLine", "update":"{x: (rotation_Line.axis === 'y' ? sin(qrAngle_Line) : 0), y:(rotation_Line.axis === 'x' ? sin(-qrAngle_Line) : 0), z:(rotation_Line.axis === 'z' ? sin(qrAngle_Line) : 0), w : (rotation_Line.axis !==null ? cos(qrAngle_Line) : 1)}" }, { "name":"qLine_1", "update":"{x: -qLine.x, y: -qLine.y, z: -qLine.z, w: qLine.w}" }, { "name":"cube_changing", "init":"false", "on":[{"events":"view:mousedown", "update":"selected!=null"},{"events":"view:mouseup", "update":"false"}] }, { "name":"selected", "init":"null", "on":[ {"events":"@face:mousemove", "update":"event.buttons === 0 && solve_index === -1 ?{iX:datum.iX, iY:datum.iY, iZ:datum.iZ, axis: (datum.iZ < cube_size - 1 && rotation_VER <= 180) || (datum.iZ !== 0 && rotation_VER > 180) ? 'z' : datum.axis} : selected"}, {"events":"@face:mouseout", "update":"cube_changing ? selected : null"}, {"events":"view:mouseup", "update":"null"} ] }, { "name":"perspective", "value":0.5, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.05} } ], "scales":[ { "name":"color", "type":"ordinal", "domain":[1,2,3,4,5,6], "range":["darkorange","red","yellow","white","green","blue"] } ], "data":[ { "name":"points", "values":[{"iX":[]}], "transform":[ { "type":"formula", "expr":"[{iX:0,iY:0,iZ:0,axis:'z',face:1},{iX:0,iY:1,iZ:0,axis:'z',face:1},{iX:0,iY:2,iZ:0,axis:'z',face:1},{iX:1,iY:0,iZ:0,axis:'z',face:1},{iX:1,iY:1,iZ:0,axis:'z',face:1},{iX:1,iY:2,iZ:0,axis:'z',face:1},{iX:2,iY:0,iZ:0,axis:'z',face:1},{iX:2,iY:1,iZ:0,axis:'z',face:1},{iX:2,iY:2,iZ:0,axis:'z',face:1},{iX:0,iY:0,iZ:2,axis:'z',face:2},{iX:0,iY:1,iZ:2,axis:'z',face:2},{iX:0,iY:2,iZ:2,axis:'z',face:2},{iX:1,iY:0,iZ:2,axis:'z',face:2},{iX:1,iY:1,iZ:2,axis:'z',face:2},{iX:1,iY:2,iZ:2,axis:'z',face:2},{iX:2,iY:0,iZ:2,axis:'z',face:2},{iX:2,iY:1,iZ:2,axis:'z',face:2},{iX:2,iY:2,iZ:2,axis:'z',face:2},{iX:0,iY:0,iZ:0,axis:'x',face:3},{iX:0,iY:0,iZ:1,axis:'x',face:3},{iX:0,iY:0,iZ:2,axis:'x',face:3},{iX:0,iY:1,iZ:0,axis:'x',face:3},{iX:0,iY:1,iZ:1,axis:'x',face:3},{iX:0,iY:1,iZ:2,axis:'x',face:3},{iX:0,iY:2,iZ:0,axis:'x',face:3},{iX:0,iY:2,iZ:1,axis:'x',face:3},{iX:0,iY:2,iZ:2,axis:'x',face:3},{iX:2,iY:0,iZ:0,axis:'x',face:4},{iX:2,iY:0,iZ:1,axis:'x',face:4},{iX:2,iY:0,iZ:2,axis:'x',face:4},{iX:2,iY:1,iZ:0,axis:'x',face:4},{iX:2,iY:1,iZ:1,axis:'x',face:4},{iX:2,iY:1,iZ:2,axis:'x',face:4},{iX:2,iY:2,iZ:0,axis:'x',face:4},{iX:2,iY:2,iZ:1,axis:'x',face:4},{iX:2,iY:2,iZ:2,axis:'x',face:4},{iX:0,iY:0,iZ:0,axis:'y',face:5},{iX:0,iY:0,iZ:1,axis:'y',face:5},{iX:0,iY:0,iZ:2,axis:'y',face:5},{iX:1,iY:0,iZ:0,axis:'y',face:5},{iX:1,iY:0,iZ:1,axis:'y',face:5},{iX:1,iY:0,iZ:2,axis:'y',face:5},{iX:2,iY:0,iZ:0,axis:'y',face:5},{iX:2,iY:0,iZ:1,axis:'y',face:5},{iX:2,iY:0,iZ:2,axis:'y',face:5},{iX:0,iY:2,iZ:0,axis:'y',face:6},{iX:0,iY:2,iZ:1,axis:'y',face:6},{iX:0,iY:2,iZ:2,axis:'y',face:6},{iX:1,iY:2,iZ:0,axis:'y',face:6},{iX:1,iY:2,iZ:1,axis:'y',face:6},{iX:1,iY:2,iZ:2,axis:'y',face:6},{iX:2,iY:2,iZ:0,axis:'y',face:6},{iX:2,iY:2,iZ:1,axis:'y',face:6},{iX:2,iY:2,iZ:2,axis:'y',face:6}]", "as":"iX" }, { "type":"flatten", "fields":["iX"] }, { "type":"project", "fields":["iX.iX","iX.iY","iX.iZ","iX.axis","iX.face"], "as":["iX","iY","iZ","axis","face"] }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:datum.iX===0?-1:1, y:0,z:0}: datum.axis === 'y' ? {x:0, y:datum.iY === 0 ? -1:1, z:0}: {x:0,y:0, z:datum.iZ ===0?-1:1}", "as":"normal" }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:(datum.iX === cube_size - 1 ? cube_size : 0) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}: datum.axis === 'y' ? {x:(1/2 + datum.iX)-cube_size/2, y: (datum.iY === cube_size - 1 ? cube_size:0) -cube_size/2, z:( 1/2 + datum.iZ)-cube_size/2} : {x:(1/2 + datum.iX)-cube_size/2, y: (1/2 + datum.iY)-cube_size/2, z: (datum.iZ === cube_size - 1 ? cube_size : 0)-cube_size/2}", "as":"center" }, { "type":"formula", "expr":"datum.axis === 'x' ? [{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2}] : datum.axis === 'y' ? [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2}] : [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z}]", "as":"points" }, { "type":"formula", "expr":"{x:(datum.iX+1/2) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}", "as":"center" }, { "type":"flatten", "fields":["points"] } ] }, { "name":"points_dyn", "source":"points", "transform":[ { "type":"formula", "expr":"(rotation_Line.angle !== 0 && rotation_Line.axis !== null && ((rotation_Line.axis === 'x' && datum.iY === rotation_Line.iY) || (rotation_Line.axis === 'y' && datum.iX === rotation_Line.iX) || (rotation_Line.axis === 'z' && datum.iZ === rotation_Line.iZ)))", "as":"isTransformed" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.normal.x + qLine.y*datum.normal.z- qLine.z * datum.normal.y, y:qLine.w * datum.normal.y - qLine.x * datum.normal.z + qLine.z*datum.normal.x, z:qLine.w * datum.normal.z + qLine.x*datum.normal.y - qLine.y * datum.normal.x, w: -qLine.x * datum.normal.x - qLine.y * datum.normal.y - qLine.z * datum.normal.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.normal", "as":"normal" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.center.x + qLine.y*datum.center.z- qLine.z * datum.center.y, y:qLine.w * datum.center.y - qLine.x * datum.center.z + qLine.z*datum.center.x, z:qLine.w * datum.center.z + qLine.x*datum.center.y - qLine.y * datum.center.x, w: -qLine.x * datum.center.x - qLine.y * datum.center.y - qLine.z * datum.center.z}: {}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}: datum.center", "as":"center" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.points.x + qLine.y*datum.points.z- qLine.z * datum.points.y, y:qLine.w * datum.points.y - qLine.x * datum.points.z + qLine.z*datum.points.x, z:qLine.w * datum.points.z + qLine.x*datum.points.y - qLine.y * datum.points.x, w: -qLine.x * datum.points.x - qLine.y * datum.points.y - qLine.z * datum.points.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.points", "as":"points" }, { "type":"formula", "expr":"datum.isTransformed ? {r:rotation_Line.axis, a: ((isDefined(datum.rotation) ? datum.rotation.a: 0) + rotation_Line.angle)} : datum.rotation", "as":"rotation" }, { "type":"formula", "expr":"!cube_changing && isValid(datum.rotation) && datum.rotation.a!==0", "as":"isUpdated" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? (datum.rotation.a % 180 === 0 ? datum.axis : (datum.rotation.r === 'x' && datum.axis !== 'y') ? (datum.axis !== 'z'?'z':'x'): (datum.rotation.r === 'y' && datum.axis !== 'x') ? (datum.axis !== 'z'?'z':'y'): (datum.rotation.r === 'z' && datum.axis !== 'z') ? (datum.axis!=='y'?'y':'x') : datum.axis) : datum.axis", "as":"axis" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.x) < 0 ? 0 : round(datum.center.x)> 0 ? 2 : 1 : datum.iX", "as":"iX" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.y) < 0 ? 0 : round(datum.center.y)> 0 ? 2 : 1 : datum.iY", "as":"iY" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.z) < 0 ? 0 : round(datum.center.z)> 0 ? 2 : 1 : datum.iZ", "as":"iZ" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? {a:0} : datum.rotation", "as":"rotation" } ] }, { "name":"projections", "source":"points_dyn", "transform":[ { "type":"formula", "expr":"{x:q.w * datum.normal.x + q.y*datum.normal.z- q.z * datum.normal.y, y:q.w * datum.normal.y - q.x * datum.normal.z + q.z*datum.normal.x, z:q.w * datum.normal.z + q.x*datum.normal.y - q.y * datum.normal.x, w: -q.x * datum.normal.x - q.y * datum.normal.y - q.z * datum.normal.z}", "as":"q1" }, { "type":"formula", "expr":"{z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"nq2" }, { "type":"filter", "expr":"datum.nq2.z>0" }, { "type":"formula", "expr":"{x:q.w * datum.center.x + q.y*datum.center.z- q.z * datum.center.y, y:q.w * datum.center.y - q.x * datum.center.z + q.z*datum.center.x, z:q.w * datum.center.z + q.x*datum.center.y - q.y * datum.center.x, w: -q.x * datum.center.x - q.y * datum.center.y - q.z * datum.center.z}", "as":"q1" }, { "type":"formula", "expr":"datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w", "as":"cq2_z" }, { "type":"formula", "expr":"{x:q.w * datum.points.x + q.y*datum.points.z- q.z * datum.points.y, y:q.w * datum.points.y - q.x * datum.points.z + q.z*datum.points.x, z:q.w * datum.points.z + q.x*datum.points.y - q.y * datum.points.x, w: -q.x * datum.points.x - q.y * datum.points.y - q.z * datum.points.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:((datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w) - 1.5*sqrt(3))/(3*sqrt(3))}", "as":"pq2" }, { "type":"collect", "sort":{"field":["cq2_z"], "order": ["ascending"]} }, { "type":"formula", "expr":"(datum.pq2.x)*size*scale*(1+perspective)/(1 - perspective*datum.pq2.z) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.pq2.y)*size*scale*(1+perspective)/(1 - perspective*datum.pq2.z) + height/2", "as":"y" } ] }, { "name":"shuffle", "values":[{"id":[]}], "transform":[ { "type":"formula", "expr":"sequence(0,10,1)", "as": "id" }, { "type":"flatten", "fields":["id"] }, { "type":"formula", "expr":"[round(random()*100)%3, round(random()*100)%3, round(random()*100)%3,round(random()*100)%3,round(random()*100)%3]", "as":"rotation" }, { "type":"formula", "expr":"{iX:datum.rotation[0], iY:datum.rotation[1], iZ:datum.rotation[2]!==1 ? datum.rotation[2] : datum.rotation[0] !==1 || datum.rotation[1]!==1 ? datum.rotation[2] : 2, axis:datum.rotation[3] === 0 ? 'x' : datum.rotation[3] === 1 ? 'y':'z', angle: datum.rotation[4] === 0 ? 90 : datum.rotation[4] === 1 ? -90 : 180}", "as":"rotation" } ] }, { "name":"unfinished", "source":"points_dyn", "transform":[ { "type":"filter", "expr":"isDefined(datum.rotation) && datum.rotation.a !== 0" } ] }, { "name":"history", "values":[], "on":[ { "trigger":"isValid(history_Rotation) && history_Rotation.axis !== null && history_Rotation.angle % 360 !== 0 && solve_index === -1", "insert": "merge(history_Rotation, {angle:history_Rotation.angle % 360 < -180 ? 360 + (history_Rotation.angle % 360) : history_Rotation.angle % 360})" }, { "trigger":"clear_history", "remove":"clear_history" } ], "transform":[ { "type":"filter", "expr":"true" } ] } ], "marks":[ { "type":"group", "marks":[ { "type":"rect", "name":"btn_reset", "encode":{ "enter":{ "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_reset_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":80}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":1}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_reset", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":40}, "y":{"value":15}, "text":{"value":"reset"}, "fontSize":{"value":20} } } }, { "type":"rect", "name":"btn_shuffle", "encode":{ "enter":{ "x":{"value":85}, "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_shuffle_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":86}, "y":{"value":1}, "x2":{"value":165}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_shuffle_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":86}, "y":{"value":1}, "x2":{"value":86}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_shuffle_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_shuffle", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":125}, "y":{"value":15}, "text":{"value":"shuffle"}, "fontSize":{"value":20} } } }, { "type":"rect", "name":"btn_solve", "encode":{ "enter":{ "x":{"value":170}, "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_solve_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":171}, "y":{"value":1}, "x2":{"value":250}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_solve_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":171}, "y":{"value":1}, "x2":{"value":171}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_solve_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_solve", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":210}, "y":{"value":15}, "text":{"value":"solve"}, "fontSize":{"value":20} } } }] }, { "type": "group", "from": { "facet": { "name": "area", "data": "projections", "groupby": [ "cq2_z", "iX", "iY", "iZ", "face" ] } }, "marks": [ { "type": "area", "name":"face", "from": { "data": "area" }, "encode": { "update": { "x": { "field": "x" }, "y": { "field": "y" }, "y2": { "signal":"0" }, "fill": [{ "field": "face", "scale": "color" }], "opacity":[{"test":"cube_changing && (selected !== null && ((selected.axis === 'x' && datum.iY !== selected.iY) || (selected.axis === 'y' && datum.iX !== selected.iX) || (selected.axis === 'z' && datum.iZ !== selected.iZ)))", "value": 0.5},{"value":1}] } } }, { "type":"line", "from":{"data":"area"}, "encode":{ "update":{ "x":{"field":"x"}, "y":{"field":"y"}, "strokeWidth":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":3},{"value":1}], "stroke":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":"steelblue"},{"value":"black"}] } } } ] } ] },{"renderer":"svg"})30:T12ff,({ "name":"points", "values":[{"iX":[]}], "transform":[ { "type":"formula", "expr":"[{iX:0,iY:0,iZ:0,axis:'z',face:1},{iX:0,iY:1,iZ:0,axis:'z',face:1},{iX:0,iY:2,iZ:0,axis:'z',face:1},{iX:1,iY:0,iZ:0,axis:'z',face:1},{iX:1,iY:1,iZ:0,axis:'z',face:1},{iX:1,iY:2,iZ:0,axis:'z',face:1},{iX:2,iY:0,iZ:0,axis:'z',face:1},{iX:2,iY:1,iZ:0,axis:'z',face:1},{iX:2,iY:2,iZ:0,axis:'z',face:1},{iX:0,iY:0,iZ:2,axis:'z',face:2},{iX:0,iY:1,iZ:2,axis:'z',face:2},{iX:0,iY:2,iZ:2,axis:'z',face:2},{iX:1,iY:0,iZ:2,axis:'z',face:2},{iX:1,iY:1,iZ:2,axis:'z',face:2},{iX:1,iY:2,iZ:2,axis:'z',face:2},{iX:2,iY:0,iZ:2,axis:'z',face:2},{iX:2,iY:1,iZ:2,axis:'z',face:2},{iX:2,iY:2,iZ:2,axis:'z',face:2},{iX:0,iY:0,iZ:0,axis:'x',face:3},{iX:0,iY:0,iZ:1,axis:'x',face:3},{iX:0,iY:0,iZ:2,axis:'x',face:3},{iX:0,iY:1,iZ:0,axis:'x',face:3},{iX:0,iY:1,iZ:1,axis:'x',face:3},{iX:0,iY:1,iZ:2,axis:'x',face:3},{iX:0,iY:2,iZ:0,axis:'x',face:3},{iX:0,iY:2,iZ:1,axis:'x',face:3},{iX:0,iY:2,iZ:2,axis:'x',face:3},{iX:2,iY:0,iZ:0,axis:'x',face:4},{iX:2,iY:0,iZ:1,axis:'x',face:4},{iX:2,iY:0,iZ:2,axis:'x',face:4},{iX:2,iY:1,iZ:0,axis:'x',face:4},{iX:2,iY:1,iZ:1,axis:'x',face:4},{iX:2,iY:1,iZ:2,axis:'x',face:4},{iX:2,iY:2,iZ:0,axis:'x',face:4},{iX:2,iY:2,iZ:1,axis:'x',face:4},{iX:2,iY:2,iZ:2,axis:'x',face:4},{iX:0,iY:0,iZ:0,axis:'y',face:5},{iX:0,iY:0,iZ:1,axis:'y',face:5},{iX:0,iY:0,iZ:2,axis:'y',face:5},{iX:1,iY:0,iZ:0,axis:'y',face:5},{iX:1,iY:0,iZ:1,axis:'y',face:5},{iX:1,iY:0,iZ:2,axis:'y',face:5},{iX:2,iY:0,iZ:0,axis:'y',face:5},{iX:2,iY:0,iZ:1,axis:'y',face:5},{iX:2,iY:0,iZ:2,axis:'y',face:5},{iX:0,iY:2,iZ:0,axis:'y',face:6},{iX:0,iY:2,iZ:1,axis:'y',face:6},{iX:0,iY:2,iZ:2,axis:'y',face:6},{iX:1,iY:2,iZ:0,axis:'y',face:6},{iX:1,iY:2,iZ:1,axis:'y',face:6},{iX:1,iY:2,iZ:2,axis:'y',face:6},{iX:2,iY:2,iZ:0,axis:'y',face:6},{iX:2,iY:2,iZ:1,axis:'y',face:6},{iX:2,iY:2,iZ:2,axis:'y',face:6}]", "as":"iX" }, { "type":"flatten", "fields":["iX"] }, { "type":"project", "fields":["iX.iX","iX.iY","iX.iZ","iX.axis","iX.face"], "as":["iX","iY","iZ","axis","face"] }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:datum.iX===0?-1:1, y:0,z:0}: datum.axis === 'y' ? {x:0, y:datum.iY === 0 ? -1:1, z:0}: {x:0,y:0, z:datum.iZ ===0?-1:1}", "as":"normal" }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:(datum.iX === cube_size - 1 ? cube_size : 0) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}: datum.axis === 'y' ? {x:(1/2 + datum.iX)-cube_size/2, y: (datum.iY === cube_size - 1 ? cube_size:0) -cube_size/2, z:( 1/2 + datum.iZ)-cube_size/2} : {x:(1/2 + datum.iX)-cube_size/2, y: (1/2 + datum.iY)-cube_size/2, z: (datum.iZ === cube_size - 1 ? cube_size : 0)-cube_size/2}", "as":"center" }, { "type":"formula", "expr":"datum.axis === 'x' ? [{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2}] : datum.axis === 'y' ? [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2}] : [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z}]", "as":"points" }, { "type":"formula", "expr":"{x:(datum.iX+1/2) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}", "as":"center" }, { "type":"flatten", "fields":["points"] } ] })31:Ta4a,({ "name":"projections", "source":"points", "transform":[ { "type":"formula", "expr":"{x:q.w * datum.normal.x + q.y*datum.normal.z- q.z * datum.normal.y, y:q.w * datum.normal.y - q.x * datum.normal.z + q.z*datum.normal.x, z:q.w * datum.normal.z + q.x*datum.normal.y - q.y * datum.normal.x, w: -q.x * datum.normal.x - q.y * datum.normal.y - q.z * datum.normal.z}", "as":"q1" }, { "type":"formula", "expr":"{z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"nq2" }, { "type":"filter", "expr":"datum.nq2.z>0" }, { "type":"formula", "expr":"{x:q.w * datum.center.x + q.y*datum.center.z- q.z * datum.center.y, y:q.w * datum.center.y - q.x * datum.center.z + q.z*datum.center.x, z:q.w * datum.center.z + q.x*datum.center.y - q.y * datum.center.x, w: -q.x * datum.center.x - q.y * datum.center.y - q.z * datum.center.z}", "as":"q1" }, { "type":"formula", "expr":"datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w", "as":"cq2_z" }, { "type":"collect", "sort":{"field":["cq2_z"]} }, { "type":"formula", "expr":"{x:q.w * datum.points.x + q.y*datum.points.z- q.z * datum.points.y, y:q.w * datum.points.y - q.x * datum.points.z + q.z*datum.points.x, z:q.w * datum.points.z + q.x*datum.points.y - q.y * datum.points.x, w: -q.x * datum.points.x - q.y * datum.points.y - q.z * datum.points.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:((datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w) - 1.5*sqrt(3))/(3*sqrt(3))}", "as":"pq2" }, { "type":"extent", "field":"pq2.z", "signal": "z_value" }, { "type":"formula", "expr":"(datum.pq2.x)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.pq2.y)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z)+ height/2", "as":"y" }, { "type":"formula", "expr":"false", "as":"isProcessing" } ] })32:T443,md`## Adding perspective In the projections table there is a small difference that changes the rendering of the cube: perspective. In my other experiments, in order to simplify, I used orthographic projections. It means that I only cared about rotation of the camera and now about the distance between the points and the camera. When using perspective the far the object is from the camera, the smaller it should be. The good practice is to use a perspective matrix, configured with the field of view and the near and far planes. I simplified this to the minimum: the cube has a side of 3 units, it means that the radius of the sphere containing the cube is 3 multiply by square root of 3 (well, I hope so...). Substracting half of the radius to the z point and diving the result by the radius you'll have a z value variating between 0 and 1. Let's create now a variable named perspective that will vary from 0 (orthographic to 2). If you multiply the x and y paramters by (1+perspective)/(1-perspective*z), you will be able to configure the strength of the perspective effect. Here we go:`33:T2b32,spec = ({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "background":"black", "signals":[ { "name":"size", "init":"40*(min (width,height)/400)" }, { "name":"cube_padding", "value":0.02 }, { "name":"cube_size", "value":3 }, { "name":"scale", "value":1, "bind":{"input":"range","min": 0, "max": 2, "step": 0.1}, "on":[{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + ((event.movementX < 0) ^ (rotation_VER > 180) ? 5 : (event.movementX > 0) ^(rotation_VER > 180) ? -5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":45, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"qrAngle_HOR", "init":"PI*(rotation_HOR)/360", "on": [{"events":{"signal":"-rotation_HOR"}, "update":"PI*(rotation_HOR)/360"}] }, { "name":"qrAngle_VER", "init":"PI*(rotation_VER)/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*(rotation_VER)/360"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"perspective", "value":0.5, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.05} } ], "scales":[ { "name":"color", "type":"ordinal", "domain":[1,2,3,4,5,6], "range":["darkorange","red","yellow","white","green","blue"] } ], "data":[ { "name":"points", "values":[{"iX":[]}], "transform":[ { "type":"formula", "expr":"[{iX:0,iY:0,iZ:0,axis:'z',face:1},{iX:0,iY:1,iZ:0,axis:'z',face:1},{iX:0,iY:2,iZ:0,axis:'z',face:1},{iX:1,iY:0,iZ:0,axis:'z',face:1},{iX:1,iY:1,iZ:0,axis:'z',face:1},{iX:1,iY:2,iZ:0,axis:'z',face:1},{iX:2,iY:0,iZ:0,axis:'z',face:1},{iX:2,iY:1,iZ:0,axis:'z',face:1},{iX:2,iY:2,iZ:0,axis:'z',face:1},{iX:0,iY:0,iZ:2,axis:'z',face:2},{iX:0,iY:1,iZ:2,axis:'z',face:2},{iX:0,iY:2,iZ:2,axis:'z',face:2},{iX:1,iY:0,iZ:2,axis:'z',face:2},{iX:1,iY:1,iZ:2,axis:'z',face:2},{iX:1,iY:2,iZ:2,axis:'z',face:2},{iX:2,iY:0,iZ:2,axis:'z',face:2},{iX:2,iY:1,iZ:2,axis:'z',face:2},{iX:2,iY:2,iZ:2,axis:'z',face:2},{iX:0,iY:0,iZ:0,axis:'x',face:3},{iX:0,iY:0,iZ:1,axis:'x',face:3},{iX:0,iY:0,iZ:2,axis:'x',face:3},{iX:0,iY:1,iZ:0,axis:'x',face:3},{iX:0,iY:1,iZ:1,axis:'x',face:3},{iX:0,iY:1,iZ:2,axis:'x',face:3},{iX:0,iY:2,iZ:0,axis:'x',face:3},{iX:0,iY:2,iZ:1,axis:'x',face:3},{iX:0,iY:2,iZ:2,axis:'x',face:3},{iX:2,iY:0,iZ:0,axis:'x',face:4},{iX:2,iY:0,iZ:1,axis:'x',face:4},{iX:2,iY:0,iZ:2,axis:'x',face:4},{iX:2,iY:1,iZ:0,axis:'x',face:4},{iX:2,iY:1,iZ:1,axis:'x',face:4},{iX:2,iY:1,iZ:2,axis:'x',face:4},{iX:2,iY:2,iZ:0,axis:'x',face:4},{iX:2,iY:2,iZ:1,axis:'x',face:4},{iX:2,iY:2,iZ:2,axis:'x',face:4},{iX:0,iY:0,iZ:0,axis:'y',face:5},{iX:0,iY:0,iZ:1,axis:'y',face:5},{iX:0,iY:0,iZ:2,axis:'y',face:5},{iX:1,iY:0,iZ:0,axis:'y',face:5},{iX:1,iY:0,iZ:1,axis:'y',face:5},{iX:1,iY:0,iZ:2,axis:'y',face:5},{iX:2,iY:0,iZ:0,axis:'y',face:5},{iX:2,iY:0,iZ:1,axis:'y',face:5},{iX:2,iY:0,iZ:2,axis:'y',face:5},{iX:0,iY:2,iZ:0,axis:'y',face:6},{iX:0,iY:2,iZ:1,axis:'y',face:6},{iX:0,iY:2,iZ:2,axis:'y',face:6},{iX:1,iY:2,iZ:0,axis:'y',face:6},{iX:1,iY:2,iZ:1,axis:'y',face:6},{iX:1,iY:2,iZ:2,axis:'y',face:6},{iX:2,iY:2,iZ:0,axis:'y',face:6},{iX:2,iY:2,iZ:1,axis:'y',face:6},{iX:2,iY:2,iZ:2,axis:'y',face:6}]", "as":"iX" }, { "type":"flatten", "fields":["iX"] }, { "type":"project", "fields":["iX.iX","iX.iY","iX.iZ","iX.axis","iX.face"], "as":["iX","iY","iZ","axis","face"] }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:datum.iX===0?-1:1, y:0,z:0}: datum.axis === 'y' ? {x:0, y:datum.iY === 0 ? -1:1, z:0}: {x:0,y:0, z:datum.iZ ===0?-1:1}", "as":"normal" }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:(datum.iX === cube_size - 1 ? cube_size : 0) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}: datum.axis === 'y' ? {x:(1/2 + datum.iX)-cube_size/2, y: (datum.iY === cube_size - 1 ? cube_size:0) -cube_size/2, z:( 1/2 + datum.iZ)-cube_size/2} : {x:(1/2 + datum.iX)-cube_size/2, y: (1/2 + datum.iY)-cube_size/2, z: (datum.iZ === cube_size - 1 ? cube_size : 0)-cube_size/2}", "as":"center" }, { "type":"formula", "expr":"datum.axis === 'x' ? [{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2}] : datum.axis === 'y' ? [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2}] : [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z}]", "as":"points" }, { "type":"formula", "expr":"{x:(datum.iX+1/2) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}", "as":"center" }, { "type":"flatten", "fields":["points"] } ] }, { "name":"projections", "source":"points", "transform":[ { "type":"formula", "expr":"{x:q.w * datum.normal.x + q.y*datum.normal.z- q.z * datum.normal.y, y:q.w * datum.normal.y - q.x * datum.normal.z + q.z*datum.normal.x, z:q.w * datum.normal.z + q.x*datum.normal.y - q.y * datum.normal.x, w: -q.x * datum.normal.x - q.y * datum.normal.y - q.z * datum.normal.z}", "as":"q1" }, { "type":"formula", "expr":"{z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"nq2" }, { "type":"filter", "expr":"datum.nq2.z>0" }, { "type":"formula", "expr":"{x:q.w * datum.center.x + q.y*datum.center.z- q.z * datum.center.y, y:q.w * datum.center.y - q.x * datum.center.z + q.z*datum.center.x, z:q.w * datum.center.z + q.x*datum.center.y - q.y * datum.center.x, w: -q.x * datum.center.x - q.y * datum.center.y - q.z * datum.center.z}", "as":"q1" }, { "type":"formula", "expr":"datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w", "as":"cq2_z" }, { "type":"collect", "sort":{"field":["cq2_z"]} }, { "type":"formula", "expr":"{x:q.w * datum.points.x + q.y*datum.points.z- q.z * datum.points.y, y:q.w * datum.points.y - q.x * datum.points.z + q.z*datum.points.x, z:q.w * datum.points.z + q.x*datum.points.y - q.y * datum.points.x, w: -q.x * datum.points.x - q.y * datum.points.y - q.z * datum.points.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:((datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w) - 1.5*sqrt(3))/(3*sqrt(3))}", "as":"pq2" }, { "type":"extent", "field":"pq2.z", "signal": "z_value" }, { "type":"formula", "expr":"(datum.pq2.x)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.pq2.y)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z)+ height/2", "as":"y" }, { "type":"formula", "expr":"false", "as":"isProcessing" } ] } ], "marks":[ { "type": "group", "from": { "facet": { "name": "area", "data": "projections", "groupby": [ "iX", "iY", "iZ", "face", "cq2_z" ] } }, "marks": [ { "type": "line", "name":"face", "from": { "data": "area" }, "encode": { "update": { "x": { "field": "x" }, "y": { "field": "y" }, "y2": { "value": 0 }, "fill": [{ "field": "face", "scale": "color" }], "strokeWidth":[{"value":1}], "stroke":[{"value":"black"}] } } } ] } ] })34:T687,md`**NOTES:** - Most of the signals are exactly the same as previous 3D experiments and won't be detailed here - You can see the projections formula in the x an y formula at the end of the projections table - I reverted the cube rotation when rotation_VER is between 180 and 360: this because once the cube will be mixed, you won't know what is the top or bottom face and it become confusing - When raising up the perspective factor, you'll notice some clipping issues (areas that should be hidden, that are drawn over areas that shouldn't be hidden): this is because the areas are grouped by face when rendering so the z axis faces will be drawn first, then the x axis faces and finally the y axis faces. Life being too short, that issue won't be solved in that experiment ## Manipulating the cube Now that we have our game platform, we need to be able to interact with it. That part seemed challenging at first glance, but is in fact quite easy and straight forward. For the moment, we ha ve one table containing the points definitions and another that project them on the screen after applying rotation and perspective. We want a third table taking from points and serving projections. We will also create a new quaternion representing a modification of the cube. That quaternion will be used to modify the points of our intermediary table. Not all points: We need to be able to select: one axis to rotate and one index of rotation (you have 3 possibilities per axis). ### Selecting We will first focus on the selection part: - We add 2 signals \`\`selected\`\` and \`\`cube_changing\`\`:`35:T2f8c,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "background":"black", "signals":[ { "name":"size", "init":"40*(min (width,height)/400)" }, { "name":"cube_padding", "value":0.02 }, { "name":"cube_size", "value":3 }, { "name":"scale", "value":1, "bind":{"input":"range","min": 0, "max": 2, "step": 0.1}, "on":[{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (cube_changing ? 0 : ((event.movementX < 0) ^ (rotation_VER > 180) ? 5 : (event.movementX > 0) ^(rotation_VER > 180) ? -5 : 0))"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + ( cube_changing ? 0 :(event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0))"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":45, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"qrAngle_HOR", "init":"PI*(rotation_HOR)/360", "on": [{"events":{"signal":"-rotation_HOR"}, "update":"PI*(rotation_HOR)/360"}] }, { "name":"qrAngle_VER", "init":"PI*(rotation_VER)/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*(rotation_VER)/360"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"perspective", "value":0.5, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.05} }, { "name":"cube_changing", "init":"false", "on":[{"events":"view:mousedown", "update":"selected!=null"},{"events":"view:mouseup", "update":"false"}] }, { "name":"selected", "init":"null", "on":[ {"events":"@face:mousemove", "update":"event.buttons === 0 ?{iX:datum.iX, iY:datum.iY, iZ:datum.iZ, axis: (datum.iZ < cube_size - 1 && rotation_VER <= 180) || (datum.iZ !== 0 && rotation_VER > 180) ? 'z' : datum.axis} : selected"}, {"events":"@face:mouseout", "update":"cube_changing ? selected : null"}, {"events":"view:mouseup", "update":"null"} ] } ], "scales":[ { "name":"color", "type":"ordinal", "domain":[1,2,3,4,5,6], "range":["darkorange","red","yellow","white","green","blue"] } ], "data":[ { "name":"points", "values":[{"iX":[]}], "transform":[ { "type":"formula", "expr":"[{iX:0,iY:0,iZ:0,axis:'z',face:1},{iX:0,iY:1,iZ:0,axis:'z',face:1},{iX:0,iY:2,iZ:0,axis:'z',face:1},{iX:1,iY:0,iZ:0,axis:'z',face:1},{iX:1,iY:1,iZ:0,axis:'z',face:1},{iX:1,iY:2,iZ:0,axis:'z',face:1},{iX:2,iY:0,iZ:0,axis:'z',face:1},{iX:2,iY:1,iZ:0,axis:'z',face:1},{iX:2,iY:2,iZ:0,axis:'z',face:1},{iX:0,iY:0,iZ:2,axis:'z',face:2},{iX:0,iY:1,iZ:2,axis:'z',face:2},{iX:0,iY:2,iZ:2,axis:'z',face:2},{iX:1,iY:0,iZ:2,axis:'z',face:2},{iX:1,iY:1,iZ:2,axis:'z',face:2},{iX:1,iY:2,iZ:2,axis:'z',face:2},{iX:2,iY:0,iZ:2,axis:'z',face:2},{iX:2,iY:1,iZ:2,axis:'z',face:2},{iX:2,iY:2,iZ:2,axis:'z',face:2},{iX:0,iY:0,iZ:0,axis:'x',face:3},{iX:0,iY:0,iZ:1,axis:'x',face:3},{iX:0,iY:0,iZ:2,axis:'x',face:3},{iX:0,iY:1,iZ:0,axis:'x',face:3},{iX:0,iY:1,iZ:1,axis:'x',face:3},{iX:0,iY:1,iZ:2,axis:'x',face:3},{iX:0,iY:2,iZ:0,axis:'x',face:3},{iX:0,iY:2,iZ:1,axis:'x',face:3},{iX:0,iY:2,iZ:2,axis:'x',face:3},{iX:2,iY:0,iZ:0,axis:'x',face:4},{iX:2,iY:0,iZ:1,axis:'x',face:4},{iX:2,iY:0,iZ:2,axis:'x',face:4},{iX:2,iY:1,iZ:0,axis:'x',face:4},{iX:2,iY:1,iZ:1,axis:'x',face:4},{iX:2,iY:1,iZ:2,axis:'x',face:4},{iX:2,iY:2,iZ:0,axis:'x',face:4},{iX:2,iY:2,iZ:1,axis:'x',face:4},{iX:2,iY:2,iZ:2,axis:'x',face:4},{iX:0,iY:0,iZ:0,axis:'y',face:5},{iX:0,iY:0,iZ:1,axis:'y',face:5},{iX:0,iY:0,iZ:2,axis:'y',face:5},{iX:1,iY:0,iZ:0,axis:'y',face:5},{iX:1,iY:0,iZ:1,axis:'y',face:5},{iX:1,iY:0,iZ:2,axis:'y',face:5},{iX:2,iY:0,iZ:0,axis:'y',face:5},{iX:2,iY:0,iZ:1,axis:'y',face:5},{iX:2,iY:0,iZ:2,axis:'y',face:5},{iX:0,iY:2,iZ:0,axis:'y',face:6},{iX:0,iY:2,iZ:1,axis:'y',face:6},{iX:0,iY:2,iZ:2,axis:'y',face:6},{iX:1,iY:2,iZ:0,axis:'y',face:6},{iX:1,iY:2,iZ:1,axis:'y',face:6},{iX:1,iY:2,iZ:2,axis:'y',face:6},{iX:2,iY:2,iZ:0,axis:'y',face:6},{iX:2,iY:2,iZ:1,axis:'y',face:6},{iX:2,iY:2,iZ:2,axis:'y',face:6}]", "as":"iX" }, { "type":"flatten", "fields":["iX"] }, { "type":"project", "fields":["iX.iX","iX.iY","iX.iZ","iX.axis","iX.face"], "as":["iX","iY","iZ","axis","face"] }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:datum.iX===0?-1:1, y:0,z:0}: datum.axis === 'y' ? {x:0, y:datum.iY === 0 ? -1:1, z:0}: {x:0,y:0, z:datum.iZ ===0?-1:1}", "as":"normal" }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:(datum.iX === cube_size - 1 ? cube_size : 0) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}: datum.axis === 'y' ? {x:(1/2 + datum.iX)-cube_size/2, y: (datum.iY === cube_size - 1 ? cube_size:0) -cube_size/2, z:( 1/2 + datum.iZ)-cube_size/2} : {x:(1/2 + datum.iX)-cube_size/2, y: (1/2 + datum.iY)-cube_size/2, z: (datum.iZ === cube_size - 1 ? cube_size : 0)-cube_size/2}", "as":"center" }, { "type":"formula", "expr":"datum.axis === 'x' ? [{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2}] : datum.axis === 'y' ? [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2}] : [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z}]", "as":"points" }, { "type":"formula", "expr":"{x:(datum.iX+1/2) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}", "as":"center" }, { "type":"flatten", "fields":["points"] } ] }, { "name":"projections", "source":"points", "transform":[ { "type":"formula", "expr":"{x:q.w * datum.normal.x + q.y*datum.normal.z- q.z * datum.normal.y, y:q.w * datum.normal.y - q.x * datum.normal.z + q.z*datum.normal.x, z:q.w * datum.normal.z + q.x*datum.normal.y - q.y * datum.normal.x, w: -q.x * datum.normal.x - q.y * datum.normal.y - q.z * datum.normal.z}", "as":"q1" }, { "type":"formula", "expr":"{z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"nq2" }, { "type":"filter", "expr":"datum.nq2.z>0" }, { "type":"formula", "expr":"{x:q.w * datum.center.x + q.y*datum.center.z- q.z * datum.center.y, y:q.w * datum.center.y - q.x * datum.center.z + q.z*datum.center.x, z:q.w * datum.center.z + q.x*datum.center.y - q.y * datum.center.x, w: -q.x * datum.center.x - q.y * datum.center.y - q.z * datum.center.z}", "as":"q1" }, { "type":"formula", "expr":"datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w", "as":"cq2_z" }, { "type":"collect", "sort":{"field":["cq2_z"]} }, { "type":"formula", "expr":"{x:q.w * datum.points.x + q.y*datum.points.z- q.z * datum.points.y, y:q.w * datum.points.y - q.x * datum.points.z + q.z*datum.points.x, z:q.w * datum.points.z + q.x*datum.points.y - q.y * datum.points.x, w: -q.x * datum.points.x - q.y * datum.points.y - q.z * datum.points.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:((datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w) - 1.5*sqrt(3))/(3*sqrt(3))}", "as":"pq2" }, { "type":"extent", "field":"pq2.z", "signal": "z_value" }, { "type":"formula", "expr":"(datum.pq2.x)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.pq2.y)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z)+ height/2", "as":"y" }, { "type":"formula", "expr":"false", "as":"isProcessing" } ] } ], "marks":[ { "type": "group", "from": { "facet": { "name": "area", "data": "projections", "groupby": [ "iX", "iY", "iZ", "face", "cq2_z" ] } }, "marks": [ { "type": "line", "name":"face", "from": { "data": "area" }, "encode": { "update": { "x": { "field": "x" }, "y": { "field": "y" }, "y2": { "value": 0 }, "fill": [{ "field": "face", "scale": "color" }], "strokeWidth":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":3},{"value":1}], "stroke":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":"steelblue"},{"value":"black"}] } } } ] } ] },{"renderer":"svg"})36:T6e9,([{ "name":"angle_Line", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "force": true,"update":"rotation_Line.angle === 0 && selected !=null ? ((selected.axis === 'z' ? (event.movementX < 0 ^ (rotation_VER > 180) ? 1 : event.movementX === 0 ? 0 : -1) : (selected.axis === 'x' ? (event.movementY < 0 ^ isYZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : (selected.axis === 'y' ? (event.movementY < 0 ^ isXZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : 0)))*10) : 0"}] }, { "name":"rotation_Line", "value":{"angle":0, "axis":null, "iX":-1, "iY":-1, "iZ":-1}, "on":[{"events":{"signal":"angle_Line"}, "update":"selected !== null ? {angle:angle_Line, axis : selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}: {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"}] }, { "name":"qrAngle_Line", "init":"PI*(rotation_Line.angle)/360", "on": [{"events":{"signal":"rotation_Line"}, "update":"PI*(rotation_Line.angle)/360"}] }, { "name":"qLine", "update":"{x: (rotation_Line.axis === 'y' ? sin(qrAngle_Line) : 0), y:(rotation_Line.axis === 'x' ? sin(-qrAngle_Line) : 0), z:(rotation_Line.axis === 'z' ? sin(qrAngle_Line) : 0), w : (rotation_Line.axis !==null ? cos(qrAngle_Line) : 1)}" }, { "name":"qLine_1", "update":"{x: -qLine.x, y: -qLine.y, z: -qLine.z, w: qLine.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" }])37:T42f,md`- angle_Line is receiving the angle from the mouse move. The difference with the camera rotation is that we want to increase or decrease an existing value. The trick I used: If the rotation_Line angle is 0 is setting to a value to 10 or -10 according to the direction. If the angle is not 0 is setting the angle to 0. The quaternion will receive 0 then 10 or -10 the 0. And the points will be rotated from 10 to 10 - rotation_Line is creating a rotation object according to angle_line - qrAngle_Line is the rotation_angle in radians - qLine and qLine_1 are the line rotation quaternion and inverted. The quaternion parameters are changing accordingly to the rotation axis - isYZBack, isXZBack and isXYBack are telling if a face of a specific axis is backside. This is used to revert the angle of rotation accordingly to the position of the cube to have a uniform behavior Now we can add the points_dyn table tha will apply the line transformations:`38:T1260,({ "name":"points_dyn", "source":"points", "transform":[ { "type":"formula", "expr":"(rotation_Line.angle !== 0 && rotation_Line.axis !== null && ((rotation_Line.axis === 'x' && datum.iY === rotation_Line.iY) || (rotation_Line.axis === 'y' && datum.iX === rotation_Line.iX) || (rotation_Line.axis === 'z' && datum.iZ === rotation_Line.iZ)))", "as":"isTransformed" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.normal.x + qLine.y*datum.normal.z- qLine.z * datum.normal.y, y:qLine.w * datum.normal.y - qLine.x * datum.normal.z + qLine.z*datum.normal.x, z:qLine.w * datum.normal.z + qLine.x*datum.normal.y - qLine.y * datum.normal.x, w: -qLine.x * datum.normal.x - qLine.y * datum.normal.y - qLine.z * datum.normal.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.normal", "as":"normal" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.center.x + qLine.y*datum.center.z- qLine.z * datum.center.y, y:qLine.w * datum.center.y - qLine.x * datum.center.z + qLine.z*datum.center.x, z:qLine.w * datum.center.z + qLine.x*datum.center.y - qLine.y * datum.center.x, w: -qLine.x * datum.center.x - qLine.y * datum.center.y - qLine.z * datum.center.z}: {}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}: datum.center", "as":"center" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.points.x + qLine.y*datum.points.z- qLine.z * datum.points.y, y:qLine.w * datum.points.y - qLine.x * datum.points.z + qLine.z*datum.points.x, z:qLine.w * datum.points.z + qLine.x*datum.points.y - qLine.y * datum.points.x, w: -qLine.x * datum.points.x - qLine.y * datum.points.y - qLine.z * datum.points.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.points", "as":"points" }, { "type":"formula", "expr":"datum.isTransformed ? {r:rotation_Line.axis, a: ((isDefined(datum.rotation) ? datum.rotation.a: 0) + rotation_Line.angle)} : datum.rotation", "as":"rotation" }, { "type":"formula", "expr":"!cube_changing && isValid(datum.rotation) && datum.rotation.a!==0", "as":"isUpdated" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? (datum.rotation.a % 180 === 0 ? datum.axis : (datum.rotation.r === 'x' && datum.axis !== 'y') ? (datum.axis !== 'z'?'z':'x'): (datum.rotation.r === 'y' && datum.axis !== 'x') ? (datum.axis !== 'z'?'z':'y'): (datum.rotation.r === 'z' && datum.axis !== 'z') ? (datum.axis!=='y'?'y':'x') : datum.axis) : datum.axis", "as":"axis" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.x) < 0 ? 0 : round(datum.center.x)> 0 ? 2 : 1 : datum.iX", "as":"iX" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.y) < 0 ? 0 : round(datum.center.y)> 0 ? 2 : 1 : datum.iY", "as":"iY" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.z) < 0 ? 0 : round(datum.center.z)> 0 ? 2 : 1 : datum.iZ", "as":"iZ" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? {a:0} : datum.rotation", "as":"rotation" } ] })39:T56b,md` - The first (0) tranform check which points will be transformed the rotation_Line object as reference for the selection - Transform 1 to 6 are transforming the normal, the center and the point only for the transofrmed points - Transform 7 is updating the rotation applied to a line during one drag - Transform 8 is checking if the rotation is finished and has a change. This will trigger the data table when the user stop to drag a line and perform some extra actions only at that moment - Transform 9 to 12 are updating the cube index only if a rotation is a multiple of an angle of 90 degrees. If we don't do that the selection algorithm won't work for the next transformation - Transform 13 reset the rotation information if the angle of rotation was a multiple of 90 degrees. This will allow to know if a rotation was completed or not (used later) **NOTE**: Update the new position of the cube is crucial. I used the following algorithm: after to have rotated the center, knowing the the cube mesures 3 units we can tell the new index rounding the value of the center. If it's negative this is the back side, if positive this is the front side, otherwise the middle side. We also need to update the new axis of each face. This done checking the rotation axis. When rotating on z by example, the axis will switch from x to y every 90 degrees. And here's the transformation test:`3a:T4f1e,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "background":"black", "signals":[ { "name":"size", "init":"40*(min (width,height)/400)" }, { "name":"cube_padding", "value":0.02 }, { "name":"cube_size", "value":3 }, { "name":"btn_reset_pressed", "on":[{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"true"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"false"}] }, { "name":"reset", "on": [{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"setdata('points',[{iX:[]}])"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"0"}] }, { "name":"scale", "value":1, "bind":{"input":"range","min": 0, "max": 2, "step": 0.1}, "on":[{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (cube_changing ? 0 : ((event.movementX < 0) ^ (rotation_VER > 180) ? 5 : (event.movementX > 0) ^(rotation_VER > 180) ? -5 : 0))"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + ( cube_changing ? 0 :(event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0))"}] }, { "name":"angle_Line", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "force": true,"update":"rotation_Line.angle === 0 && selected !=null ? ((selected.axis === 'z' ? (event.movementX < 0 ^ (rotation_VER > 180) ? 1 : event.movementX === 0 ? 0 : -1) : (selected.axis === 'x' ? (event.movementY < 0 ^ isYZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : (selected.axis === 'y' ? (event.movementY < 0 ^ isXZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : 0)))*10) : 0"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":45, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"rotation_Line", "value":{"angle":0, "axis":null, "iX":-1, "iY":-1, "iZ":-1}, "on":[{"events":{"signal":"angle_Line"}, "update":"selected !== null ? {angle:angle_Line, axis : selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}: {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"}] }, { "name":"qrAngle_HOR", "init":"PI*(rotation_HOR)/360", "on": [{"events":{"signal":"-rotation_HOR"}, "update":"PI*(rotation_HOR)/360"}] }, { "name":"qrAngle_VER", "init":"PI*(rotation_VER)/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*(rotation_VER)/360"}] }, { "name":"qrAngle_Line", "init":"PI*(rotation_Line.angle)/360", "on": [{"events":{"signal":"rotation_Line"}, "update":"PI*(rotation_Line.angle)/360"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"qLine", "update":"{x: (rotation_Line.axis === 'y' ? sin(qrAngle_Line) : 0), y:(rotation_Line.axis === 'x' ? sin(-qrAngle_Line) : 0), z:(rotation_Line.axis === 'z' ? sin(qrAngle_Line) : 0), w : (rotation_Line.axis !==null ? cos(qrAngle_Line) : 1)}" }, { "name":"qLine_1", "update":"{x: -qLine.x, y: -qLine.y, z: -qLine.z, w: qLine.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" }, { "name":"perspective", "value":0.5, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.05} }, { "name":"cube_changing", "init":"false", "on":[{"events":"view:mousedown", "update":"selected!=null"},{"events":"view:mouseup", "update":"false"}] }, { "name":"selected", "init":"null", "on":[ {"events":"@face:mousemove", "update":"event.buttons === 0 ?{iX:datum.iX, iY:datum.iY, iZ:datum.iZ, axis: (datum.iZ < cube_size - 1 && rotation_VER <= 180) || (datum.iZ !== 0 && rotation_VER > 180) ? 'z' : datum.axis} : selected"}, {"events":"@face:mouseout", "update":"cube_changing ? selected : null"}, {"events":"view:mouseup", "update":"null"} ] } ], "scales":[ { "name":"color", "type":"ordinal", "domain":[1,2,3,4,5,6], "range":["darkorange","red","yellow","white","green","blue"] } ], "data":[ { "name":"points", "values":[{"iX":[]}], "transform":[ { "type":"formula", "expr":"[{iX:0,iY:0,iZ:0,axis:'z',face:1},{iX:0,iY:1,iZ:0,axis:'z',face:1},{iX:0,iY:2,iZ:0,axis:'z',face:1},{iX:1,iY:0,iZ:0,axis:'z',face:1},{iX:1,iY:1,iZ:0,axis:'z',face:1},{iX:1,iY:2,iZ:0,axis:'z',face:1},{iX:2,iY:0,iZ:0,axis:'z',face:1},{iX:2,iY:1,iZ:0,axis:'z',face:1},{iX:2,iY:2,iZ:0,axis:'z',face:1},{iX:0,iY:0,iZ:2,axis:'z',face:2},{iX:0,iY:1,iZ:2,axis:'z',face:2},{iX:0,iY:2,iZ:2,axis:'z',face:2},{iX:1,iY:0,iZ:2,axis:'z',face:2},{iX:1,iY:1,iZ:2,axis:'z',face:2},{iX:1,iY:2,iZ:2,axis:'z',face:2},{iX:2,iY:0,iZ:2,axis:'z',face:2},{iX:2,iY:1,iZ:2,axis:'z',face:2},{iX:2,iY:2,iZ:2,axis:'z',face:2},{iX:0,iY:0,iZ:0,axis:'x',face:3},{iX:0,iY:0,iZ:1,axis:'x',face:3},{iX:0,iY:0,iZ:2,axis:'x',face:3},{iX:0,iY:1,iZ:0,axis:'x',face:3},{iX:0,iY:1,iZ:1,axis:'x',face:3},{iX:0,iY:1,iZ:2,axis:'x',face:3},{iX:0,iY:2,iZ:0,axis:'x',face:3},{iX:0,iY:2,iZ:1,axis:'x',face:3},{iX:0,iY:2,iZ:2,axis:'x',face:3},{iX:2,iY:0,iZ:0,axis:'x',face:4},{iX:2,iY:0,iZ:1,axis:'x',face:4},{iX:2,iY:0,iZ:2,axis:'x',face:4},{iX:2,iY:1,iZ:0,axis:'x',face:4},{iX:2,iY:1,iZ:1,axis:'x',face:4},{iX:2,iY:1,iZ:2,axis:'x',face:4},{iX:2,iY:2,iZ:0,axis:'x',face:4},{iX:2,iY:2,iZ:1,axis:'x',face:4},{iX:2,iY:2,iZ:2,axis:'x',face:4},{iX:0,iY:0,iZ:0,axis:'y',face:5},{iX:0,iY:0,iZ:1,axis:'y',face:5},{iX:0,iY:0,iZ:2,axis:'y',face:5},{iX:1,iY:0,iZ:0,axis:'y',face:5},{iX:1,iY:0,iZ:1,axis:'y',face:5},{iX:1,iY:0,iZ:2,axis:'y',face:5},{iX:2,iY:0,iZ:0,axis:'y',face:5},{iX:2,iY:0,iZ:1,axis:'y',face:5},{iX:2,iY:0,iZ:2,axis:'y',face:5},{iX:0,iY:2,iZ:0,axis:'y',face:6},{iX:0,iY:2,iZ:1,axis:'y',face:6},{iX:0,iY:2,iZ:2,axis:'y',face:6},{iX:1,iY:2,iZ:0,axis:'y',face:6},{iX:1,iY:2,iZ:1,axis:'y',face:6},{iX:1,iY:2,iZ:2,axis:'y',face:6},{iX:2,iY:2,iZ:0,axis:'y',face:6},{iX:2,iY:2,iZ:1,axis:'y',face:6},{iX:2,iY:2,iZ:2,axis:'y',face:6}]", "as":"iX" }, { "type":"flatten", "fields":["iX"] }, { "type":"project", "fields":["iX.iX","iX.iY","iX.iZ","iX.axis","iX.face"], "as":["iX","iY","iZ","axis","face"] }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:datum.iX===0?-1:1, y:0,z:0}: datum.axis === 'y' ? {x:0, y:datum.iY === 0 ? -1:1, z:0}: {x:0,y:0, z:datum.iZ ===0?-1:1}", "as":"normal" }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:(datum.iX === cube_size - 1 ? cube_size : 0) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}: datum.axis === 'y' ? {x:(1/2 + datum.iX)-cube_size/2, y: (datum.iY === cube_size - 1 ? cube_size:0) -cube_size/2, z:( 1/2 + datum.iZ)-cube_size/2} : {x:(1/2 + datum.iX)-cube_size/2, y: (1/2 + datum.iY)-cube_size/2, z: (datum.iZ === cube_size - 1 ? cube_size : 0)-cube_size/2}", "as":"center" }, { "type":"formula", "expr":"datum.axis === 'x' ? [{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2}] : datum.axis === 'y' ? [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2}] : [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z}]", "as":"points" }, { "type":"formula", "expr":"{x:(datum.iX+1/2) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}", "as":"center" }, { "type":"flatten", "fields":["points"] } ] }, { "name":"points_dyn", "source":"points", "transform":[ { "type":"formula", "expr":"(rotation_Line.angle !== 0 && rotation_Line.axis !== null && ((rotation_Line.axis === 'x' && datum.iY === rotation_Line.iY) || (rotation_Line.axis === 'y' && datum.iX === rotation_Line.iX) || (rotation_Line.axis === 'z' && datum.iZ === rotation_Line.iZ)))", "as":"isTransformed" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.normal.x + qLine.y*datum.normal.z- qLine.z * datum.normal.y, y:qLine.w * datum.normal.y - qLine.x * datum.normal.z + qLine.z*datum.normal.x, z:qLine.w * datum.normal.z + qLine.x*datum.normal.y - qLine.y * datum.normal.x, w: -qLine.x * datum.normal.x - qLine.y * datum.normal.y - qLine.z * datum.normal.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.normal", "as":"normal" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.center.x + qLine.y*datum.center.z- qLine.z * datum.center.y, y:qLine.w * datum.center.y - qLine.x * datum.center.z + qLine.z*datum.center.x, z:qLine.w * datum.center.z + qLine.x*datum.center.y - qLine.y * datum.center.x, w: -qLine.x * datum.center.x - qLine.y * datum.center.y - qLine.z * datum.center.z}: {}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}: datum.center", "as":"center" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.points.x + qLine.y*datum.points.z- qLine.z * datum.points.y, y:qLine.w * datum.points.y - qLine.x * datum.points.z + qLine.z*datum.points.x, z:qLine.w * datum.points.z + qLine.x*datum.points.y - qLine.y * datum.points.x, w: -qLine.x * datum.points.x - qLine.y * datum.points.y - qLine.z * datum.points.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.points", "as":"points" }, { "type":"formula", "expr":"datum.isTransformed ? {r:rotation_Line.axis, a: ((isDefined(datum.rotation) ? datum.rotation.a: 0) + rotation_Line.angle)} : datum.rotation", "as":"rotation" }, { "type":"formula", "expr":"!cube_changing && isValid(datum.rotation) && datum.rotation.a!==0", "as":"isUpdated" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? (datum.rotation.a % 180 === 0 ? datum.axis : (datum.rotation.r === 'x' && datum.axis !== 'y') ? (datum.axis !== 'z'?'z':'x'): (datum.rotation.r === 'y' && datum.axis !== 'x') ? (datum.axis !== 'z'?'z':'y'): (datum.rotation.r === 'z' && datum.axis !== 'z') ? (datum.axis!=='y'?'y':'x') : datum.axis) : datum.axis", "as":"axis" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.x) < 0 ? 0 : round(datum.center.x)> 0 ? 2 : 1 : datum.iX", "as":"iX" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.y) < 0 ? 0 : round(datum.center.y)> 0 ? 2 : 1 : datum.iY", "as":"iY" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.z) < 0 ? 0 : round(datum.center.z)> 0 ? 2 : 1 : datum.iZ", "as":"iZ" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? {a:0} : datum.rotation", "as":"rotation" } ] }, { "name":"projections", "source":"points_dyn", "transform":[ { "type":"formula", "expr":"{x:q.w * datum.normal.x + q.y*datum.normal.z- q.z * datum.normal.y, y:q.w * datum.normal.y - q.x * datum.normal.z + q.z*datum.normal.x, z:q.w * datum.normal.z + q.x*datum.normal.y - q.y * datum.normal.x, w: -q.x * datum.normal.x - q.y * datum.normal.y - q.z * datum.normal.z}", "as":"q1" }, { "type":"formula", "expr":"{z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"nq2" }, { "type":"filter", "expr":"datum.nq2.z>0" }, { "type":"formula", "expr":"{x:q.w * datum.center.x + q.y*datum.center.z- q.z * datum.center.y, y:q.w * datum.center.y - q.x * datum.center.z + q.z*datum.center.x, z:q.w * datum.center.z + q.x*datum.center.y - q.y * datum.center.x, w: -q.x * datum.center.x - q.y * datum.center.y - q.z * datum.center.z}", "as":"q1" }, { "type":"formula", "expr":"datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w", "as":"cq2_z" }, { "type":"collect", "sort":{"field":["cq2_z"]} }, { "type":"formula", "expr":"{x:q.w * datum.points.x + q.y*datum.points.z- q.z * datum.points.y, y:q.w * datum.points.y - q.x * datum.points.z + q.z*datum.points.x, z:q.w * datum.points.z + q.x*datum.points.y - q.y * datum.points.x, w: -q.x * datum.points.x - q.y * datum.points.y - q.z * datum.points.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:((datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w) - 1.5*sqrt(3))/(3*sqrt(3))}", "as":"pq2" }, { "type":"formula", "expr":"(datum.pq2.x)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.pq2.y)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z)+ height/2", "as":"y" } ] } ], "marks":[ { "type":"group", "marks":[ { "type":"rect", "name":"btn_reset", "encode":{ "enter":{ "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_reset_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":80}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":1}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_reset", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":40}, "y":{"value":15}, "text":{"value":"reset"}, "fontSize":{"value":20} } } }] }, { "type": "group", "from": { "facet": { "name": "area", "data": "projections", "groupby": [ "iX", "iY", "iZ", "face", "cq2_z" ] } }, "marks": [ { "type": "line", "name":"face", "from": { "data": "area" }, "encode": { "update": { "x": { "field": "x" }, "y": { "field": "y" }, "y2": { "value": 0 }, "fill": [{ "field": "face", "scale": "color" }], "strokeWidth":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":3},{"value":1}], "stroke":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":"steelblue"},{"value":"black"}] } } } ] } ] },{"renderer":"svg"})3b:T7f9,md`Trying to modify the cube, you can notice that everything is working fine only if you rotate the cube of a multiple of 90 degrees. If you don't do that, the cube positions are not updated and weird things begin to happen. **NOTE**: It's usefull at that point to have a reset button. The code is very simple. a signal is setting the points data to it's initial state which was an almost empty table (only one empty object). Doing that will make the points table to redo all the transforms, an recreate the points table (this is why the points data are in a formula). The points table being updated, it will recalculate the points_dynpoints_dyn table and the cube will be restored. ### Completing the uncompleted rotations As we don't want to force the user to do the perfect rotation, we want to complete the rotation so that when she releases the mouse, the rotation angle is always a multiple of 90. That kind of thing is quite tricky to achieve in Vega. This is because data changes propagation is done trough a graph. This is great to cascade the changes as we can see in these 3D experiments, but when you want to have a signal updating another without creating circle references it becomes a mind game. We won't complain about it because the goal of Vega is not to create games, but it's important to understand this. To be able to achieve the completion angle we have to: - Create a table unfinished with points_dyn as a source filtering the line that have a pending rotation - Create a variable last_Rotation that will react on mouse release and check if the unfinished table has any data. If there are data the variable will store the rotation information from the first object (all the object of the table have the same rotation at that point) - Create a variable completion_Angle that will listen to last_Rotation and create the completion_Angle accordingly - Modify the rotation_Line to listen to the completion_Angle Let's try this:`3c:T53de,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "background":"black", "signals":[ { "name":"size", "init":"40*(min (width,height)/400)" }, { "name":"cube_padding", "value":0.02 }, { "name":"cube_size", "value":3 }, { "name":"btn_reset_pressed", "on":[{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"true"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"false"}] }, { "name":"reset", "on": [{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"setdata('points',[{iX:[]}])"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"0"}] }, { "name":"scale", "value":1, "bind":{"input":"range","min": 0, "max": 2, "step": 0.1}, "on":[{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (cube_changing ? 0 : ((event.movementX < 0) ^ (rotation_VER > 180) ? 5 : (event.movementX > 0) ^(rotation_VER > 180) ? -5 : 0))"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + ( cube_changing ? 0 :(event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0))"}] }, { "name":"angle_Line", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "force": true,"update":"rotation_Line.angle === 0 && selected !=null ? ((selected.axis === 'z' ? (event.movementX < 0 ^ (rotation_VER > 180) ? 1 : event.movementX === 0 ? 0 : -1) : (selected.axis === 'x' ? (event.movementY < 0 ^ isYZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : (selected.axis === 'y' ? (event.movementY < 0 ^ isXZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : 0)))*10) : 0"}] }, { "name":"completion_Angle", "on":[{"events":{"signal":"last_Rotation"}, "update":"last_Rotation !== null && last_Rotation.rotation.a % 90 !== 0? {angle: last_Rotation.rotation.a % 90 === 0 ? 0 : abs(last_Rotation.rotation.a) % 90 < 40 ? -(last_Rotation.rotation.a % 90) : (last_Rotation.rotation.a < 0 ? -90 : 90) - last_Rotation.rotation.a % 90, axis: last_Rotation.rotation.r, iX:last_Rotation.iX, iY: last_Rotation.iY, iZ: last_Rotation.iZ}:{angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":"view:mousedown", "update":"selected !=null ? {angle:0, axis: selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}:{angle:0, axis:null, iX: -1, iY: -1, iZ: -1}"}] }, { "name":"last_Rotation", "on":[{"events":{"signal":"cube_changing"}, "update":"cube_changing? null : length(data('unfinished'))>0 ? data('unfinished')[0] : null"},{"events":{"signal":"reset"},"update":"null"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":45, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"rotation_Line", "value":{"angle":0, "axis":null, "iX":-1, "iY":-1, "iZ":-1}, "on":[{"events":{"signal":"angle_Line"}, "update":"selected !== null ? {angle:angle_Line, axis : selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}: {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":{"signal":"completion_Angle"}, "update":"completion_Angle"}] }, { "name":"qrAngle_HOR", "init":"PI*(rotation_HOR)/360", "on": [{"events":{"signal":"-rotation_HOR"}, "update":"PI*(rotation_HOR)/360"}] }, { "name":"qrAngle_VER", "init":"PI*(rotation_VER)/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*(rotation_VER)/360"}] }, { "name":"qrAngle_Line", "init":"PI*(rotation_Line.angle)/360", "on": [{"events":{"signal":"rotation_Line"}, "update":"PI*(rotation_Line.angle)/360"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"qLine", "update":"{x: (rotation_Line.axis === 'y' ? sin(qrAngle_Line) : 0), y:(rotation_Line.axis === 'x' ? sin(-qrAngle_Line) : 0), z:(rotation_Line.axis === 'z' ? sin(qrAngle_Line) : 0), w : (rotation_Line.axis !==null ? cos(qrAngle_Line) : 1)}" }, { "name":"qLine_1", "update":"{x: -qLine.x, y: -qLine.y, z: -qLine.z, w: qLine.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" }, { "name":"perspective", "value":0.5, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.05} }, { "name":"cube_changing", "init":"false", "on":[{"events":"view:mousedown", "update":"selected!=null"},{"events":"view:mouseup", "update":"false"}] }, { "name":"selected", "init":"null", "on":[ {"events":"@face:mousemove", "update":"event.buttons === 0 ?{iX:datum.iX, iY:datum.iY, iZ:datum.iZ, axis: (datum.iZ < cube_size - 1 && rotation_VER <= 180) || (datum.iZ !== 0 && rotation_VER > 180) ? 'z' : datum.axis} : selected"}, {"events":"@face:mouseout", "update":"cube_changing ? selected : null"}, {"events":"view:mouseup", "update":"null"} ] } ], "scales":[ { "name":"color", "type":"ordinal", "domain":[1,2,3,4,5,6], "range":["darkorange","red","yellow","white","green","blue"] } ], "data":[ { "name":"points", "values":[{"iX":[]}], "transform":[ { "type":"formula", "expr":"[{iX:0,iY:0,iZ:0,axis:'z',face:1},{iX:0,iY:1,iZ:0,axis:'z',face:1},{iX:0,iY:2,iZ:0,axis:'z',face:1},{iX:1,iY:0,iZ:0,axis:'z',face:1},{iX:1,iY:1,iZ:0,axis:'z',face:1},{iX:1,iY:2,iZ:0,axis:'z',face:1},{iX:2,iY:0,iZ:0,axis:'z',face:1},{iX:2,iY:1,iZ:0,axis:'z',face:1},{iX:2,iY:2,iZ:0,axis:'z',face:1},{iX:0,iY:0,iZ:2,axis:'z',face:2},{iX:0,iY:1,iZ:2,axis:'z',face:2},{iX:0,iY:2,iZ:2,axis:'z',face:2},{iX:1,iY:0,iZ:2,axis:'z',face:2},{iX:1,iY:1,iZ:2,axis:'z',face:2},{iX:1,iY:2,iZ:2,axis:'z',face:2},{iX:2,iY:0,iZ:2,axis:'z',face:2},{iX:2,iY:1,iZ:2,axis:'z',face:2},{iX:2,iY:2,iZ:2,axis:'z',face:2},{iX:0,iY:0,iZ:0,axis:'x',face:3},{iX:0,iY:0,iZ:1,axis:'x',face:3},{iX:0,iY:0,iZ:2,axis:'x',face:3},{iX:0,iY:1,iZ:0,axis:'x',face:3},{iX:0,iY:1,iZ:1,axis:'x',face:3},{iX:0,iY:1,iZ:2,axis:'x',face:3},{iX:0,iY:2,iZ:0,axis:'x',face:3},{iX:0,iY:2,iZ:1,axis:'x',face:3},{iX:0,iY:2,iZ:2,axis:'x',face:3},{iX:2,iY:0,iZ:0,axis:'x',face:4},{iX:2,iY:0,iZ:1,axis:'x',face:4},{iX:2,iY:0,iZ:2,axis:'x',face:4},{iX:2,iY:1,iZ:0,axis:'x',face:4},{iX:2,iY:1,iZ:1,axis:'x',face:4},{iX:2,iY:1,iZ:2,axis:'x',face:4},{iX:2,iY:2,iZ:0,axis:'x',face:4},{iX:2,iY:2,iZ:1,axis:'x',face:4},{iX:2,iY:2,iZ:2,axis:'x',face:4},{iX:0,iY:0,iZ:0,axis:'y',face:5},{iX:0,iY:0,iZ:1,axis:'y',face:5},{iX:0,iY:0,iZ:2,axis:'y',face:5},{iX:1,iY:0,iZ:0,axis:'y',face:5},{iX:1,iY:0,iZ:1,axis:'y',face:5},{iX:1,iY:0,iZ:2,axis:'y',face:5},{iX:2,iY:0,iZ:0,axis:'y',face:5},{iX:2,iY:0,iZ:1,axis:'y',face:5},{iX:2,iY:0,iZ:2,axis:'y',face:5},{iX:0,iY:2,iZ:0,axis:'y',face:6},{iX:0,iY:2,iZ:1,axis:'y',face:6},{iX:0,iY:2,iZ:2,axis:'y',face:6},{iX:1,iY:2,iZ:0,axis:'y',face:6},{iX:1,iY:2,iZ:1,axis:'y',face:6},{iX:1,iY:2,iZ:2,axis:'y',face:6},{iX:2,iY:2,iZ:0,axis:'y',face:6},{iX:2,iY:2,iZ:1,axis:'y',face:6},{iX:2,iY:2,iZ:2,axis:'y',face:6}]", "as":"iX" }, { "type":"flatten", "fields":["iX"] }, { "type":"project", "fields":["iX.iX","iX.iY","iX.iZ","iX.axis","iX.face"], "as":["iX","iY","iZ","axis","face"] }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:datum.iX===0?-1:1, y:0,z:0}: datum.axis === 'y' ? {x:0, y:datum.iY === 0 ? -1:1, z:0}: {x:0,y:0, z:datum.iZ ===0?-1:1}", "as":"normal" }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:(datum.iX === cube_size - 1 ? cube_size : 0) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}: datum.axis === 'y' ? {x:(1/2 + datum.iX)-cube_size/2, y: (datum.iY === cube_size - 1 ? cube_size:0) -cube_size/2, z:( 1/2 + datum.iZ)-cube_size/2} : {x:(1/2 + datum.iX)-cube_size/2, y: (1/2 + datum.iY)-cube_size/2, z: (datum.iZ === cube_size - 1 ? cube_size : 0)-cube_size/2}", "as":"center" }, { "type":"formula", "expr":"datum.axis === 'x' ? [{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2}] : datum.axis === 'y' ? [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2}] : [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z}]", "as":"points" }, { "type":"formula", "expr":"{x:(datum.iX+1/2) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}", "as":"center" }, { "type":"flatten", "fields":["points"] } ] }, { "name":"points_dyn", "source":"points", "transform":[ { "type":"formula", "expr":"(rotation_Line.angle !== 0 && rotation_Line.axis !== null && ((rotation_Line.axis === 'x' && datum.iY === rotation_Line.iY) || (rotation_Line.axis === 'y' && datum.iX === rotation_Line.iX) || (rotation_Line.axis === 'z' && datum.iZ === rotation_Line.iZ)))", "as":"isTransformed" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.normal.x + qLine.y*datum.normal.z- qLine.z * datum.normal.y, y:qLine.w * datum.normal.y - qLine.x * datum.normal.z + qLine.z*datum.normal.x, z:qLine.w * datum.normal.z + qLine.x*datum.normal.y - qLine.y * datum.normal.x, w: -qLine.x * datum.normal.x - qLine.y * datum.normal.y - qLine.z * datum.normal.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.normal", "as":"normal" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.center.x + qLine.y*datum.center.z- qLine.z * datum.center.y, y:qLine.w * datum.center.y - qLine.x * datum.center.z + qLine.z*datum.center.x, z:qLine.w * datum.center.z + qLine.x*datum.center.y - qLine.y * datum.center.x, w: -qLine.x * datum.center.x - qLine.y * datum.center.y - qLine.z * datum.center.z}: {}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}: datum.center", "as":"center" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.points.x + qLine.y*datum.points.z- qLine.z * datum.points.y, y:qLine.w * datum.points.y - qLine.x * datum.points.z + qLine.z*datum.points.x, z:qLine.w * datum.points.z + qLine.x*datum.points.y - qLine.y * datum.points.x, w: -qLine.x * datum.points.x - qLine.y * datum.points.y - qLine.z * datum.points.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.points", "as":"points" }, { "type":"formula", "expr":"datum.isTransformed ? {r:rotation_Line.axis, a: ((isDefined(datum.rotation) ? datum.rotation.a: 0) + rotation_Line.angle)} : datum.rotation", "as":"rotation" }, { "type":"formula", "expr":"!cube_changing && isValid(datum.rotation) && datum.rotation.a!==0", "as":"isUpdated" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? (datum.rotation.a % 180 === 0 ? datum.axis : (datum.rotation.r === 'x' && datum.axis !== 'y') ? (datum.axis !== 'z'?'z':'x'): (datum.rotation.r === 'y' && datum.axis !== 'x') ? (datum.axis !== 'z'?'z':'y'): (datum.rotation.r === 'z' && datum.axis !== 'z') ? (datum.axis!=='y'?'y':'x') : datum.axis) : datum.axis", "as":"axis" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.x) < 0 ? 0 : round(datum.center.x)> 0 ? 2 : 1 : datum.iX", "as":"iX" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.y) < 0 ? 0 : round(datum.center.y)> 0 ? 2 : 1 : datum.iY", "as":"iY" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.z) < 0 ? 0 : round(datum.center.z)> 0 ? 2 : 1 : datum.iZ", "as":"iZ" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? {a:0} : datum.rotation", "as":"rotation" } ] }, { "name":"projections", "source":"points_dyn", "transform":[ { "type":"formula", "expr":"{x:q.w * datum.normal.x + q.y*datum.normal.z- q.z * datum.normal.y, y:q.w * datum.normal.y - q.x * datum.normal.z + q.z*datum.normal.x, z:q.w * datum.normal.z + q.x*datum.normal.y - q.y * datum.normal.x, w: -q.x * datum.normal.x - q.y * datum.normal.y - q.z * datum.normal.z}", "as":"q1" }, { "type":"formula", "expr":"{z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"nq2" }, { "type":"filter", "expr":"datum.nq2.z>0" }, { "type":"formula", "expr":"{x:q.w * datum.center.x + q.y*datum.center.z- q.z * datum.center.y, y:q.w * datum.center.y - q.x * datum.center.z + q.z*datum.center.x, z:q.w * datum.center.z + q.x*datum.center.y - q.y * datum.center.x, w: -q.x * datum.center.x - q.y * datum.center.y - q.z * datum.center.z}", "as":"q1" }, { "type":"formula", "expr":"datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w", "as":"cq2_z" }, { "type":"collect", "sort":{"field":["cq2_z"]} }, { "type":"formula", "expr":"{x:q.w * datum.points.x + q.y*datum.points.z- q.z * datum.points.y, y:q.w * datum.points.y - q.x * datum.points.z + q.z*datum.points.x, z:q.w * datum.points.z + q.x*datum.points.y - q.y * datum.points.x, w: -q.x * datum.points.x - q.y * datum.points.y - q.z * datum.points.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:((datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w) - 1.5*sqrt(3))/(3*sqrt(3))}", "as":"pq2" }, { "type":"formula", "expr":"(datum.pq2.x)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.pq2.y)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z)+ height/2", "as":"y" } ] }, { "name":"unfinished", "source":"points_dyn", "transform":[ { "type":"filter", "expr":"isDefined(datum.rotation) && datum.rotation.a !== 0" } ] } ], "marks":[ { "type":"group", "marks":[ { "type":"rect", "name":"btn_reset", "encode":{ "enter":{ "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_reset_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":80}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":1}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_reset", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":40}, "y":{"value":15}, "text":{"value":"reset"}, "fontSize":{"value":20} } } }] }, { "type": "group", "from": { "facet": { "name": "area", "data": "projections", "groupby": [ "iX", "iY", "iZ", "face", "cq2_z" ] } }, "marks": [ { "type": "line", "name":"face", "from": { "data": "area" }, "encode": { "update": { "x": { "field": "x" }, "y": { "field": "y" }, "y2": { "value": 0 }, "fill": [{ "field": "face", "scale": "color" }], "strokeWidth":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":3},{"value":1}], "stroke":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":"steelblue"},{"value":"black"}] } } } ] } ] },{"renderer":"svg"})3d:T6037,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "background":"black", "signals":[ { "name":"size", "init":"40*(min (width,height)/400)" }, { "name":"cube_padding", "value":0.02 }, { "name":"cube_size", "value":3 }, { "name":"btn_reset_pressed", "on":[{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"true"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"false"}] }, { "name":"btn_shuffle_pressed", "on":[{"events":"@btn_shuffle:mousedown,@txt_shuffle:mousedown", "update":"true"}, {"events":"@btn_shuffle:mouseup,@txt_shuffle:mouseup", "update":"false"}] }, { "name":"reset", "on": [{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"setdata('points',[{iX:[]}])"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"0"}] }, { "name":"shuffle", "init":"-1", "on":[{"events":"@btn_shuffle:mousedown,@txt_shuffle:mousedown", "update":"setdata('shuffle', [{id:[]}]) === 1 ? -1:-1"},{"events":"@btn_shuffle:mouseup,@txt_shuffle:mouseup", "update":"0"},{"events":"timer{50}", "update":"shuffle !== -1 && shuffle < 9 ? length(data('unfinished'))>0 ? shuffle : shuffle+1: -1"}] }, { "name":"shuffle_current", "on":[{"events":{"signal": "shuffle"}, "update":"shuffle <=9 ? data('shuffle')[shuffle]:null"}] }, { "name":"scale", "value":1, "bind":{"input":"range","min": 0, "max": 2, "step": 0.1}, "on":[{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (cube_changing ? 0 : ((event.movementX < 0) ^ (rotation_VER > 180) ? 5 : (event.movementX > 0) ^(rotation_VER > 180) ? -5 : 0))"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + ( cube_changing ? 0 :(event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0))"}] }, { "name":"angle_Line", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "force": true,"update":"rotation_Line.angle === 0 && selected !=null ? ((selected.axis === 'z' ? (event.movementX < 0 ^ (rotation_VER > 180) ? 1 : event.movementX === 0 ? 0 : -1) : (selected.axis === 'x' ? (event.movementY < 0 ^ isYZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : (selected.axis === 'y' ? (event.movementY < 0 ^ isXZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : 0)))*10) : 0"}] }, { "name":"completion_Angle", "on":[{"events":{"signal":"last_Rotation"}, "update":"last_Rotation !== null && last_Rotation.rotation.a % 90 !== 0? {angle: last_Rotation.rotation.a % 90 === 0 ? 0 : abs(last_Rotation.rotation.a) % 90 < 40 ? -(last_Rotation.rotation.a % 90) : (last_Rotation.rotation.a < 0 ? -90 : 90) - last_Rotation.rotation.a % 90, axis: last_Rotation.rotation.r, iX:last_Rotation.iX, iY: last_Rotation.iY, iZ: last_Rotation.iZ}:{angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":"view:mousedown", "update":"selected !=null ? {angle:0, axis: selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}:{angle:0, axis:null, iX: -1, iY: -1, iZ: -1}"}] }, { "name":"last_Rotation", "on":[{"events":{"signal":"cube_changing"}, "update":"cube_changing? null : length(data('unfinished'))>0 ? data('unfinished')[0] : null"},{"events":{"signal":"reset"},"update":"null"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":45, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"rotation_Line", "value":{"angle":0, "axis":null, "iX":-1, "iY":-1, "iZ":-1}, "on":[{"events":{"signal":"angle_Line"}, "update":"selected !== null ? {angle:angle_Line, axis : selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}: {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":{"signal":"completion_Angle"},"update":"completion_Angle"},{"events":{"signal":"shuffle_current"}, "update":"shuffle_current!=null ? shuffle_current.rotation : {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"}] }, { "name":"qrAngle_HOR", "init":"PI*(rotation_HOR)/360", "on": [{"events":{"signal":"-rotation_HOR"}, "update":"PI*(rotation_HOR)/360"}] }, { "name":"qrAngle_VER", "init":"PI*(rotation_VER)/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*(rotation_VER)/360"}] }, { "name":"qrAngle_Line", "init":"PI*(rotation_Line.angle)/360", "on": [{"events":{"signal":"rotation_Line"}, "update":"PI*(rotation_Line.angle)/360"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"qLine", "update":"{x: (rotation_Line.axis === 'y' ? sin(qrAngle_Line) : 0), y:(rotation_Line.axis === 'x' ? sin(-qrAngle_Line) : 0), z:(rotation_Line.axis === 'z' ? sin(qrAngle_Line) : 0), w : (rotation_Line.axis !==null ? cos(qrAngle_Line) : 1)}" }, { "name":"qLine_1", "update":"{x: -qLine.x, y: -qLine.y, z: -qLine.z, w: qLine.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" }, { "name":"perspective", "value":0.5, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.05} }, { "name":"cube_changing", "init":"false", "on":[{"events":"view:mousedown", "update":"selected!=null"},{"events":"view:mouseup", "update":"false"}] }, { "name":"selected", "init":"null", "on":[ {"events":"@face:mousemove", "update":"event.buttons === 0 ?{iX:datum.iX, iY:datum.iY, iZ:datum.iZ, axis: (datum.iZ < cube_size - 1 && rotation_VER <= 180) || (datum.iZ !== 0 && rotation_VER > 180) ? 'z' : datum.axis} : selected"}, {"events":"@face:mouseout", "update":"cube_changing ? selected : null"}, {"events":"view:mouseup", "update":"null"} ] } ], "scales":[ { "name":"color", "type":"ordinal", "domain":[1,2,3,4,5,6], "range":["darkorange","red","yellow","white","green","blue"] } ], "data":[ { "name":"points", "values":[{"iX":[]}], "transform":[ { "type":"formula", "expr":"[{iX:0,iY:0,iZ:0,axis:'z',face:1},{iX:0,iY:1,iZ:0,axis:'z',face:1},{iX:0,iY:2,iZ:0,axis:'z',face:1},{iX:1,iY:0,iZ:0,axis:'z',face:1},{iX:1,iY:1,iZ:0,axis:'z',face:1},{iX:1,iY:2,iZ:0,axis:'z',face:1},{iX:2,iY:0,iZ:0,axis:'z',face:1},{iX:2,iY:1,iZ:0,axis:'z',face:1},{iX:2,iY:2,iZ:0,axis:'z',face:1},{iX:0,iY:0,iZ:2,axis:'z',face:2},{iX:0,iY:1,iZ:2,axis:'z',face:2},{iX:0,iY:2,iZ:2,axis:'z',face:2},{iX:1,iY:0,iZ:2,axis:'z',face:2},{iX:1,iY:1,iZ:2,axis:'z',face:2},{iX:1,iY:2,iZ:2,axis:'z',face:2},{iX:2,iY:0,iZ:2,axis:'z',face:2},{iX:2,iY:1,iZ:2,axis:'z',face:2},{iX:2,iY:2,iZ:2,axis:'z',face:2},{iX:0,iY:0,iZ:0,axis:'x',face:3},{iX:0,iY:0,iZ:1,axis:'x',face:3},{iX:0,iY:0,iZ:2,axis:'x',face:3},{iX:0,iY:1,iZ:0,axis:'x',face:3},{iX:0,iY:1,iZ:1,axis:'x',face:3},{iX:0,iY:1,iZ:2,axis:'x',face:3},{iX:0,iY:2,iZ:0,axis:'x',face:3},{iX:0,iY:2,iZ:1,axis:'x',face:3},{iX:0,iY:2,iZ:2,axis:'x',face:3},{iX:2,iY:0,iZ:0,axis:'x',face:4},{iX:2,iY:0,iZ:1,axis:'x',face:4},{iX:2,iY:0,iZ:2,axis:'x',face:4},{iX:2,iY:1,iZ:0,axis:'x',face:4},{iX:2,iY:1,iZ:1,axis:'x',face:4},{iX:2,iY:1,iZ:2,axis:'x',face:4},{iX:2,iY:2,iZ:0,axis:'x',face:4},{iX:2,iY:2,iZ:1,axis:'x',face:4},{iX:2,iY:2,iZ:2,axis:'x',face:4},{iX:0,iY:0,iZ:0,axis:'y',face:5},{iX:0,iY:0,iZ:1,axis:'y',face:5},{iX:0,iY:0,iZ:2,axis:'y',face:5},{iX:1,iY:0,iZ:0,axis:'y',face:5},{iX:1,iY:0,iZ:1,axis:'y',face:5},{iX:1,iY:0,iZ:2,axis:'y',face:5},{iX:2,iY:0,iZ:0,axis:'y',face:5},{iX:2,iY:0,iZ:1,axis:'y',face:5},{iX:2,iY:0,iZ:2,axis:'y',face:5},{iX:0,iY:2,iZ:0,axis:'y',face:6},{iX:0,iY:2,iZ:1,axis:'y',face:6},{iX:0,iY:2,iZ:2,axis:'y',face:6},{iX:1,iY:2,iZ:0,axis:'y',face:6},{iX:1,iY:2,iZ:1,axis:'y',face:6},{iX:1,iY:2,iZ:2,axis:'y',face:6},{iX:2,iY:2,iZ:0,axis:'y',face:6},{iX:2,iY:2,iZ:1,axis:'y',face:6},{iX:2,iY:2,iZ:2,axis:'y',face:6}]", "as":"iX" }, { "type":"flatten", "fields":["iX"] }, { "type":"project", "fields":["iX.iX","iX.iY","iX.iZ","iX.axis","iX.face"], "as":["iX","iY","iZ","axis","face"] }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:datum.iX===0?-1:1, y:0,z:0}: datum.axis === 'y' ? {x:0, y:datum.iY === 0 ? -1:1, z:0}: {x:0,y:0, z:datum.iZ ===0?-1:1}", "as":"normal" }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:(datum.iX === cube_size - 1 ? cube_size : 0) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}: datum.axis === 'y' ? {x:(1/2 + datum.iX)-cube_size/2, y: (datum.iY === cube_size - 1 ? cube_size:0) -cube_size/2, z:( 1/2 + datum.iZ)-cube_size/2} : {x:(1/2 + datum.iX)-cube_size/2, y: (1/2 + datum.iY)-cube_size/2, z: (datum.iZ === cube_size - 1 ? cube_size : 0)-cube_size/2}", "as":"center" }, { "type":"formula", "expr":"datum.axis === 'x' ? [{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2}] : datum.axis === 'y' ? [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2}] : [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z}]", "as":"points" }, { "type":"formula", "expr":"{x:(datum.iX+1/2) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}", "as":"center" }, { "type":"flatten", "fields":["points"] } ] }, { "name":"points_dyn", "source":"points", "transform":[ { "type":"formula", "expr":"(rotation_Line.angle !== 0 && rotation_Line.axis !== null && ((rotation_Line.axis === 'x' && datum.iY === rotation_Line.iY) || (rotation_Line.axis === 'y' && datum.iX === rotation_Line.iX) || (rotation_Line.axis === 'z' && datum.iZ === rotation_Line.iZ)))", "as":"isTransformed" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.normal.x + qLine.y*datum.normal.z- qLine.z * datum.normal.y, y:qLine.w * datum.normal.y - qLine.x * datum.normal.z + qLine.z*datum.normal.x, z:qLine.w * datum.normal.z + qLine.x*datum.normal.y - qLine.y * datum.normal.x, w: -qLine.x * datum.normal.x - qLine.y * datum.normal.y - qLine.z * datum.normal.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.normal", "as":"normal" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.center.x + qLine.y*datum.center.z- qLine.z * datum.center.y, y:qLine.w * datum.center.y - qLine.x * datum.center.z + qLine.z*datum.center.x, z:qLine.w * datum.center.z + qLine.x*datum.center.y - qLine.y * datum.center.x, w: -qLine.x * datum.center.x - qLine.y * datum.center.y - qLine.z * datum.center.z}: {}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}: datum.center", "as":"center" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.points.x + qLine.y*datum.points.z- qLine.z * datum.points.y, y:qLine.w * datum.points.y - qLine.x * datum.points.z + qLine.z*datum.points.x, z:qLine.w * datum.points.z + qLine.x*datum.points.y - qLine.y * datum.points.x, w: -qLine.x * datum.points.x - qLine.y * datum.points.y - qLine.z * datum.points.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.points", "as":"points" }, { "type":"formula", "expr":"datum.isTransformed ? {r:rotation_Line.axis, a: ((isDefined(datum.rotation) ? datum.rotation.a: 0) + rotation_Line.angle)} : datum.rotation", "as":"rotation" }, { "type":"formula", "expr":"!cube_changing && isValid(datum.rotation) && datum.rotation.a!==0", "as":"isUpdated" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? (datum.rotation.a % 180 === 0 ? datum.axis : (datum.rotation.r === 'x' && datum.axis !== 'y') ? (datum.axis !== 'z'?'z':'x'): (datum.rotation.r === 'y' && datum.axis !== 'x') ? (datum.axis !== 'z'?'z':'y'): (datum.rotation.r === 'z' && datum.axis !== 'z') ? (datum.axis!=='y'?'y':'x') : datum.axis) : datum.axis", "as":"axis" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.x) < 0 ? 0 : round(datum.center.x)> 0 ? 2 : 1 : datum.iX", "as":"iX" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.y) < 0 ? 0 : round(datum.center.y)> 0 ? 2 : 1 : datum.iY", "as":"iY" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.z) < 0 ? 0 : round(datum.center.z)> 0 ? 2 : 1 : datum.iZ", "as":"iZ" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? {a:0} : datum.rotation", "as":"rotation" } ] }, { "name":"projections", "source":"points_dyn", "transform":[ { "type":"formula", "expr":"{x:q.w * datum.normal.x + q.y*datum.normal.z- q.z * datum.normal.y, y:q.w * datum.normal.y - q.x * datum.normal.z + q.z*datum.normal.x, z:q.w * datum.normal.z + q.x*datum.normal.y - q.y * datum.normal.x, w: -q.x * datum.normal.x - q.y * datum.normal.y - q.z * datum.normal.z}", "as":"q1" }, { "type":"formula", "expr":"{z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"nq2" }, { "type":"filter", "expr":"datum.nq2.z>0" }, { "type":"formula", "expr":"{x:q.w * datum.center.x + q.y*datum.center.z- q.z * datum.center.y, y:q.w * datum.center.y - q.x * datum.center.z + q.z*datum.center.x, z:q.w * datum.center.z + q.x*datum.center.y - q.y * datum.center.x, w: -q.x * datum.center.x - q.y * datum.center.y - q.z * datum.center.z}", "as":"q1" }, { "type":"formula", "expr":"datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w", "as":"cq2_z" }, { "type":"collect", "sort":{"field":["cq2_z"]} }, { "type":"formula", "expr":"{x:q.w * datum.points.x + q.y*datum.points.z- q.z * datum.points.y, y:q.w * datum.points.y - q.x * datum.points.z + q.z*datum.points.x, z:q.w * datum.points.z + q.x*datum.points.y - q.y * datum.points.x, w: -q.x * datum.points.x - q.y * datum.points.y - q.z * datum.points.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:((datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w) - 1.5*sqrt(3))/(3*sqrt(3))}", "as":"pq2" }, { "type":"formula", "expr":"(datum.pq2.x)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.pq2.y)*size*scale *(1+perspective)/(1 - perspective*datum.pq2.z)+ height/2", "as":"y" } ] }, { "name":"unfinished", "source":"points_dyn", "transform":[ { "type":"filter", "expr":"isDefined(datum.rotation) && datum.rotation.a !== 0" } ] }, { "name":"shuffle", "values":[{"id":[]}], "transform":[ { "type":"formula", "expr":"sequence(0,10,1)", "as": "id" }, { "type":"flatten", "fields":["id"] }, { "type":"formula", "expr":"[round(random()*100)%3, round(random()*100)%3, round(random()*100)%3,round(random()*100)%3,round(random()*100)%3]", "as":"rotation" }, { "type":"formula", "expr":"{iX:datum.rotation[0], iY:datum.rotation[1], iZ:datum.rotation[2]!==1 ? datum.rotation[2] : datum.rotation[0] !==1 || datum.rotation[1]!==1 ? datum.rotation[2] : 2, axis:datum.rotation[3] === 0 ? 'x' : datum.rotation[3] === 1 ? 'y':'z', angle: datum.rotation[4] === 0 ? 90 : datum.rotation[4] === 1 ? -90 : 180}", "as":"rotation" } ] } ], "marks":[ { "type":"group", "marks":[ { "type":"rect", "name":"btn_reset", "encode":{ "enter":{ "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_reset_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":80}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":1}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_reset", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":40}, "y":{"value":15}, "text":{"value":"reset"}, "fontSize":{"value":20} } } }, { "type":"rect", "name":"btn_shuffle", "encode":{ "enter":{ "x":{"value":85}, "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_shuffle_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":86}, "y":{"value":1}, "x2":{"value":165}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_shuffle_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":86}, "y":{"value":1}, "x2":{"value":86}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_shuffle_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_shuffle", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":125}, "y":{"value":15}, "text":{"value":"shuffle"}, "fontSize":{"value":20} } } }] }, { "type": "group", "from": { "facet": { "name": "area", "data": "projections", "groupby": [ "iX", "iY", "iZ", "face", "cq2_z" ] } }, "marks": [ { "type": "line", "name":"face", "from": { "data": "area" }, "encode": { "update": { "x": { "field": "x" }, "y": { "field": "y" }, "y2": { "value": 0 }, "fill": [{ "field": "face", "scale": "color" }], "strokeWidth":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":3},{"value":1}], "stroke":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":"steelblue"},{"value":"black"}] } } } ] } ] },{"renderer":"svg"})3e:T7505,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "background":"black", "signals":[ { "name":"size", "init":"40*(min(width,height)/400)" }, { "name":"cube_padding", "value":0.02 }, { "name":"cube_size", "value":3 }, { "name":"btn_reset_pressed", "on":[{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"true"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"false"}] }, { "name":"btn_shuffle_pressed", "on":[{"events":"@btn_shuffle:mousedown,@txt_shuffle:mousedown", "update":"true"}, {"events":"@btn_shuffle:mouseup,@txt_shuffle:mouseup", "update":"false"}] }, { "name":"btn_solve_pressed", "on":[{"events":"@btn_solve:mousedown,@txt_solve:mousedown", "update":"true"}, {"events":"@btn_solve:mouseup,@txt_solve:mouseup", "update":"false"}] }, { "name":"reset", "on": [{"events":"@btn_reset:mousedown,@txt_reset:mousedown", "update":"setdata('points',[{iX:[]}])"}, {"events":"@btn_reset:mouseup,@txt_reset:mouseup", "update":"0"}] }, { "name":"shuffle", "init":"-1", "on":[{"events":"@btn_shuffle:mousedown,@txt_shuffle:mousedown", "update":"setdata('shuffle', [{id:[]}]) === 1 ? -1:-1"},{"events":"@btn_shuffle:mouseup,@txt_shuffle:mouseup", "update":"solve_index === -1 ? 0 : -1"},{"events":"timer{50}", "update":"shuffle !== -1 && shuffle < 9 ? length(data('unfinished'))>0 ? shuffle : shuffle+1: -1"}] }, { "name":"shuffle_current", "on":[{"events":{"signal": "shuffle"}, "update":"shuffle !== -1 && shuffle <=9 ? data('shuffle')[shuffle]:null"}] }, { "name":"solve_index", "init":"-1", "on":[{"events":"@btn_solve:mouseup,@txt_solve:mouseup", "update":"length(data('history'))>0 ? solve_index === -1 ? length(data('history')) - 1 : solve_index : -1"},{"events":"timer{500}", "update":"solve_index >=0 && length(data('unfinished')) === 0 && solve_index !== -1 && solve_current_remaining === solve_current_completed ? solve_index - 1 : solve_index"},{"events":{"signal":"reset"},"update":"-1"}] }, { "name":"solve_current", "on":[{"events":{"signal":"solve_index"}, "update":"solve_index !==-1 ? data('history')[solve_index]: null"}] }, { "name":"solve_current_remaining", "on":[{"events":{"signal":"solve_current"}, "update":"solve_current !== null ? abs(round(solve_current.angle/90)): 0"}] }, { "name":"solve_current_rotation", "update":"solve_index !==-1 && solve_current!=null ? merge(solve_current,{angle:solve_current.angle < 0 ? 5 : -5}):{angle:0, axis:null, iX:-1, iY:-1, iZ:-1}", "on":[{"events":"timer{25}","update":"solve_index !==-1 && solve_current!=null && (length(data('unfinished'))> 0 || (solve_current_rotation.angle === 0 && solve_current_remaining > solve_current_completed)) ? merge(solve_current,{angle:solve_current.angle < 0 ? 5 : -5}):{angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"}] }, { "name":"solve_current_completed", "on":[{"events":{"signal":"solve_current"},"update":"0"},{"events":{"signal":"solve_current_rotation"}, "update":"solve_current_rotation.angle === 0 && solve_current_completed >=0 && solve_current_remaining > solve_current_completed? solve_current_completed + 1 : solve_current_completed"}] }, { "name":"scale", "value":1, "bind":{"input":"range","min": 0, "max": 2, "step": 0.1}, "on":[{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (cube_changing ? 0 : ((event.movementX < 0) ^ (rotation_VER > 180) ? 5 : (event.movementX > 0) ^(rotation_VER > 180) ? -5 : 0))"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + ( cube_changing ? 0 :(event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0))"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"angle_Line", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "force": true,"update":"rotation_Line.angle === 0 && selected !=null ? ((selected.axis === 'z' ? (event.movementX < 0 ^ (rotation_VER > 180) ? 1 : event.movementX === 0 ? 0 : -1) : (selected.axis === 'x' ? (event.movementY < 0 ^ isYZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : (selected.axis === 'y' ? (event.movementY < 0 ^ isXZBack ^ (rotation_VER > 180) ? 1 : event.movementY === 0 ? 0 : -1) : 0)))*10) : 0"}] }, { "name":"completion_Angle", "on":[{"events":{"signal":"last_Rotation"}, "update":"last_Rotation !== null && last_Rotation.rotation.a % 90 !== 0? {angle: last_Rotation.rotation.a % 90 === 0 ? 0 : abs(last_Rotation.rotation.a) % 90 < 40 ? -(last_Rotation.rotation.a % 90) : (last_Rotation.rotation.a < 0 ? -90 : 90) - last_Rotation.rotation.a % 90, axis: last_Rotation.rotation.r, iX:last_Rotation.iX, iY: last_Rotation.iY, iZ: last_Rotation.iZ}:{angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":"view:mousedown", "update":"selected !=null ? {angle:0, axis: selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}:{angle:0, axis:null, iX: -1, iY: -1, iZ: -1}"}] }, { "name":"last_Rotation", "on":[{"events":{"signal":"cube_changing"}, "update":"cube_changing? null : length(data('unfinished'))>0 ? data('unfinished')[0] : null"},{"events":{"signal":"reset"},"update":"null"}] }, { "name":"history_Rotation", "update":"shuffle === -1 ? null : history_Rotation", "on": [ {"events":{"signal":"solve_index"},"update":"solve_index === -1 ? null: history_Rotation"}, {"events":{"signal":"shuffle_current"}, "update":"isValid(shuffle_current) ? shuffle_current.rotation : history_Rotation"}, {"events":{"signal":"last_Rotation || completion_Angle"}, "update":"completion_Angle !=null && last_Rotation!=null ? completion_Angle.axis !== null ? merge(completion_Angle, {angle:completion_Angle.angle + last_Rotation.rotation.a}) : {angle:last_Rotation.rotation.a,axis: last_Rotation.rotation.r, iX: last_Rotation.iX, iY: last_Rotation.iY, iZ: last_Rotation.iZ} : history_Rotation"}, {"events":{"signal":"reset"},"update":"null"} ] }, { "name":"clear_history", "on":[{"events":{"signal":"reset"}, "update":"reset"}, { "events":{"signal":"solve_index"}, "update":"solve_index === -1" }] }, { "name":"rotation_Line", "value":{"angle":0, "axis":null, "iX":-1, "iY":-1, "iZ":-1}, "on":[{"events":{"signal":"angle_Line"}, "update":"selected !== null ? {angle:angle_Line, axis : selected.axis, iX: selected.iX, iY:selected.iY, iZ:selected.iZ}: {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":{"signal":"completion_Angle"}, "update":"completion_Angle"},{"events":{"signal":"shuffle_current"}, "update":"shuffle_current!=null ? shuffle_current.rotation : {angle:0, axis:null, iX:-1, iY:-1, iZ:-1}"},{"events":{"signal":"solve_current_rotation"}, "update":"solve_current_rotation", "force": true}] }, { "name":"rotation_HOR", "value":45, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"qrAngle_HOR", "init":"PI*(rotation_HOR)/360", "on": [{"events":{"signal":"-rotation_HOR"}, "update":"PI*(rotation_HOR)/360"}] }, { "name":"qrAngle_VER", "init":"PI*(rotation_VER)/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*(rotation_VER)/360"}] }, { "name":"qrAngle_Line", "init":"PI*(rotation_Line.angle)/360", "on": [{"events":{"signal":"rotation_Line"}, "update":"PI*(rotation_Line.angle)/360"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" }, { "name":"qLine", "update":"{x: (rotation_Line.axis === 'y' ? sin(qrAngle_Line) : 0), y:(rotation_Line.axis === 'x' ? sin(-qrAngle_Line) : 0), z:(rotation_Line.axis === 'z' ? sin(qrAngle_Line) : 0), w : (rotation_Line.axis !==null ? cos(qrAngle_Line) : 1)}" }, { "name":"qLine_1", "update":"{x: -qLine.x, y: -qLine.y, z: -qLine.z, w: qLine.w}" }, { "name":"cube_changing", "init":"false", "on":[{"events":"view:mousedown", "update":"selected!=null"},{"events":"view:mouseup", "update":"false"}] }, { "name":"selected", "init":"null", "on":[ {"events":"@face:mousemove", "update":"event.buttons === 0 && solve_index === -1 ?{iX:datum.iX, iY:datum.iY, iZ:datum.iZ, axis: (datum.iZ < cube_size - 1 && rotation_VER <= 180) || (datum.iZ !== 0 && rotation_VER > 180) ? 'z' : datum.axis} : selected"}, {"events":"@face:mouseout", "update":"cube_changing ? selected : null"}, {"events":"view:mouseup", "update":"null"} ] }, { "name":"perspective", "value":0.5, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.05} } ], "scales":[ { "name":"color", "type":"ordinal", "domain":[1,2,3,4,5,6], "range":["darkorange","red","yellow","white","green","blue"] } ], "data":[ { "name":"points", "values":[{"iX":[]}], "transform":[ { "type":"formula", "expr":"[{iX:0,iY:0,iZ:0,axis:'z',face:1},{iX:0,iY:1,iZ:0,axis:'z',face:1},{iX:0,iY:2,iZ:0,axis:'z',face:1},{iX:1,iY:0,iZ:0,axis:'z',face:1},{iX:1,iY:1,iZ:0,axis:'z',face:1},{iX:1,iY:2,iZ:0,axis:'z',face:1},{iX:2,iY:0,iZ:0,axis:'z',face:1},{iX:2,iY:1,iZ:0,axis:'z',face:1},{iX:2,iY:2,iZ:0,axis:'z',face:1},{iX:0,iY:0,iZ:2,axis:'z',face:2},{iX:0,iY:1,iZ:2,axis:'z',face:2},{iX:0,iY:2,iZ:2,axis:'z',face:2},{iX:1,iY:0,iZ:2,axis:'z',face:2},{iX:1,iY:1,iZ:2,axis:'z',face:2},{iX:1,iY:2,iZ:2,axis:'z',face:2},{iX:2,iY:0,iZ:2,axis:'z',face:2},{iX:2,iY:1,iZ:2,axis:'z',face:2},{iX:2,iY:2,iZ:2,axis:'z',face:2},{iX:0,iY:0,iZ:0,axis:'x',face:3},{iX:0,iY:0,iZ:1,axis:'x',face:3},{iX:0,iY:0,iZ:2,axis:'x',face:3},{iX:0,iY:1,iZ:0,axis:'x',face:3},{iX:0,iY:1,iZ:1,axis:'x',face:3},{iX:0,iY:1,iZ:2,axis:'x',face:3},{iX:0,iY:2,iZ:0,axis:'x',face:3},{iX:0,iY:2,iZ:1,axis:'x',face:3},{iX:0,iY:2,iZ:2,axis:'x',face:3},{iX:2,iY:0,iZ:0,axis:'x',face:4},{iX:2,iY:0,iZ:1,axis:'x',face:4},{iX:2,iY:0,iZ:2,axis:'x',face:4},{iX:2,iY:1,iZ:0,axis:'x',face:4},{iX:2,iY:1,iZ:1,axis:'x',face:4},{iX:2,iY:1,iZ:2,axis:'x',face:4},{iX:2,iY:2,iZ:0,axis:'x',face:4},{iX:2,iY:2,iZ:1,axis:'x',face:4},{iX:2,iY:2,iZ:2,axis:'x',face:4},{iX:0,iY:0,iZ:0,axis:'y',face:5},{iX:0,iY:0,iZ:1,axis:'y',face:5},{iX:0,iY:0,iZ:2,axis:'y',face:5},{iX:1,iY:0,iZ:0,axis:'y',face:5},{iX:1,iY:0,iZ:1,axis:'y',face:5},{iX:1,iY:0,iZ:2,axis:'y',face:5},{iX:2,iY:0,iZ:0,axis:'y',face:5},{iX:2,iY:0,iZ:1,axis:'y',face:5},{iX:2,iY:0,iZ:2,axis:'y',face:5},{iX:0,iY:2,iZ:0,axis:'y',face:6},{iX:0,iY:2,iZ:1,axis:'y',face:6},{iX:0,iY:2,iZ:2,axis:'y',face:6},{iX:1,iY:2,iZ:0,axis:'y',face:6},{iX:1,iY:2,iZ:1,axis:'y',face:6},{iX:1,iY:2,iZ:2,axis:'y',face:6},{iX:2,iY:2,iZ:0,axis:'y',face:6},{iX:2,iY:2,iZ:1,axis:'y',face:6},{iX:2,iY:2,iZ:2,axis:'y',face:6}]", "as":"iX" }, { "type":"flatten", "fields":["iX"] }, { "type":"project", "fields":["iX.iX","iX.iY","iX.iZ","iX.axis","iX.face"], "as":["iX","iY","iZ","axis","face"] }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:datum.iX===0?-1:1, y:0,z:0}: datum.axis === 'y' ? {x:0, y:datum.iY === 0 ? -1:1, z:0}: {x:0,y:0, z:datum.iZ ===0?-1:1}", "as":"normal" }, { "type":"formula", "expr":"datum.axis === 'x' ? {x:(datum.iX === cube_size - 1 ? cube_size : 0) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}: datum.axis === 'y' ? {x:(1/2 + datum.iX)-cube_size/2, y: (datum.iY === cube_size - 1 ? cube_size:0) -cube_size/2, z:( 1/2 + datum.iZ)-cube_size/2} : {x:(1/2 + datum.iX)-cube_size/2, y: (1/2 + datum.iY)-cube_size/2, z: (datum.iZ === cube_size - 1 ? cube_size : 0)-cube_size/2}", "as":"center" }, { "type":"formula", "expr":"datum.axis === 'x' ? [{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z - (1-cube_padding)/2}] : datum.axis === 'y' ? [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z + (1-cube_padding)/2},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y, z : datum.center.z - (1-cube_padding)/2}] : [{x:datum.center.x - (1-cube_padding)/2 , y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x + (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y + (1-cube_padding)/2, z : datum.center.z},{x:datum.center.x - (1-cube_padding)/2, y:datum.center.y - (1-cube_padding)/2, z : datum.center.z}]", "as":"points" }, { "type":"formula", "expr":"{x:(datum.iX+1/2) - cube_size/2, y: (1/2 + datum.iY) - cube_size/2, z: (1/2 + datum.iZ) - cube_size/2}", "as":"center" }, { "type":"flatten", "fields":["points"] } ] }, { "name":"points_dyn", "source":"points", "transform":[ { "type":"formula", "expr":"(rotation_Line.angle !== 0 && rotation_Line.axis !== null && ((rotation_Line.axis === 'x' && datum.iY === rotation_Line.iY) || (rotation_Line.axis === 'y' && datum.iX === rotation_Line.iX) || (rotation_Line.axis === 'z' && datum.iZ === rotation_Line.iZ)))", "as":"isTransformed" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.normal.x + qLine.y*datum.normal.z- qLine.z * datum.normal.y, y:qLine.w * datum.normal.y - qLine.x * datum.normal.z + qLine.z*datum.normal.x, z:qLine.w * datum.normal.z + qLine.x*datum.normal.y - qLine.y * datum.normal.x, w: -qLine.x * datum.normal.x - qLine.y * datum.normal.y - qLine.z * datum.normal.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.normal", "as":"normal" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.center.x + qLine.y*datum.center.z- qLine.z * datum.center.y, y:qLine.w * datum.center.y - qLine.x * datum.center.z + qLine.z*datum.center.x, z:qLine.w * datum.center.z + qLine.x*datum.center.y - qLine.y * datum.center.x, w: -qLine.x * datum.center.x - qLine.y * datum.center.y - qLine.z * datum.center.z}: {}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}: datum.center", "as":"center" }, { "type":"formula", "expr":"datum.isTransformed?{x:qLine.w * datum.points.x + qLine.y*datum.points.z- qLine.z * datum.points.y, y:qLine.w * datum.points.y - qLine.x * datum.points.z + qLine.z*datum.points.x, z:qLine.w * datum.points.z + qLine.x*datum.points.y - qLine.y * datum.points.x, w: -qLine.x * datum.points.x - qLine.y * datum.points.y - qLine.z * datum.points.z}:{}", "as":"q1" }, { "type":"formula", "expr":"datum.isTransformed?{x:datum.q1.w * qLine_1.x + datum.q1.x * qLine_1.w + datum.q1.y * qLine_1.z - datum.q1.z * qLine_1.y, y:datum.q1.w * qLine_1.y - datum.q1.x * qLine_1.z + datum.q1.y * qLine_1.w + datum.q1.z * qLine_1.x,z:datum.q1.w * qLine_1.z + datum.q1.x * qLine_1.y - datum.q1.y * qLine_1.x + datum.q1.z * qLine_1.w}:datum.points", "as":"points" }, { "type":"formula", "expr":"datum.isTransformed ? {r:rotation_Line.axis, a: ((isDefined(datum.rotation) ? datum.rotation.a: 0) + rotation_Line.angle)} : datum.rotation", "as":"rotation" }, { "type":"formula", "expr":"!cube_changing && isValid(datum.rotation) && datum.rotation.a!==0", "as":"isUpdated" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? (datum.rotation.a % 180 === 0 ? datum.axis : (datum.rotation.r === 'x' && datum.axis !== 'y') ? (datum.axis !== 'z'?'z':'x'): (datum.rotation.r === 'y' && datum.axis !== 'x') ? (datum.axis !== 'z'?'z':'y'): (datum.rotation.r === 'z' && datum.axis !== 'z') ? (datum.axis!=='y'?'y':'x') : datum.axis) : datum.axis", "as":"axis" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.x) < 0 ? 0 : round(datum.center.x)> 0 ? 2 : 1 : datum.iX", "as":"iX" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.y) < 0 ? 0 : round(datum.center.y)> 0 ? 2 : 1 : datum.iY", "as":"iY" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? round(datum.center.z) < 0 ? 0 : round(datum.center.z)> 0 ? 2 : 1 : datum.iZ", "as":"iZ" }, { "type":"formula", "expr":"datum.isUpdated && datum.rotation.a % 90 === 0 ? {a:0} : datum.rotation", "as":"rotation" } ] }, { "name":"projections", "source":"points_dyn", "transform":[ { "type":"formula", "expr":"{x:q.w * datum.normal.x + q.y*datum.normal.z- q.z * datum.normal.y, y:q.w * datum.normal.y - q.x * datum.normal.z + q.z*datum.normal.x, z:q.w * datum.normal.z + q.x*datum.normal.y - q.y * datum.normal.x, w: -q.x * datum.normal.x - q.y * datum.normal.y - q.z * datum.normal.z}", "as":"q1" }, { "type":"formula", "expr":"{z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"nq2" }, { "type":"filter", "expr":"datum.nq2.z>0" }, { "type":"formula", "expr":"{x:q.w * datum.center.x + q.y*datum.center.z- q.z * datum.center.y, y:q.w * datum.center.y - q.x * datum.center.z + q.z*datum.center.x, z:q.w * datum.center.z + q.x*datum.center.y - q.y * datum.center.x, w: -q.x * datum.center.x - q.y * datum.center.y - q.z * datum.center.z}", "as":"q1" }, { "type":"formula", "expr":"datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w", "as":"cq2_z" }, { "type":"formula", "expr":"{x:q.w * datum.points.x + q.y*datum.points.z- q.z * datum.points.y, y:q.w * datum.points.y - q.x * datum.points.z + q.z*datum.points.x, z:q.w * datum.points.z + q.x*datum.points.y - q.y * datum.points.x, w: -q.x * datum.points.x - q.y * datum.points.y - q.z * datum.points.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:((datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w) - 1.5*sqrt(3))/(3*sqrt(3))}", "as":"pq2" }, { "type":"collect", "sort":{"field":["cq2_z"], "order": ["ascending"]} }, { "type":"formula", "expr":"(datum.pq2.x)*size*scale*(1+perspective)/(1 - perspective*datum.pq2.z) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.pq2.y)*size*scale*(1+perspective)/(1 - perspective*datum.pq2.z) + height/2", "as":"y" } ] }, { "name":"shuffle", "values":[{"id":[]}], "transform":[ { "type":"formula", "expr":"sequence(0,10,1)", "as": "id" }, { "type":"flatten", "fields":["id"] }, { "type":"formula", "expr":"[round(random()*100)%3, round(random()*100)%3, round(random()*100)%3,round(random()*100)%3,round(random()*100)%3]", "as":"rotation" }, { "type":"formula", "expr":"{iX:datum.rotation[0], iY:datum.rotation[1], iZ:datum.rotation[2]!==1 ? datum.rotation[2] : datum.rotation[0] !==1 || datum.rotation[1]!==1 ? datum.rotation[2] : 2, axis:datum.rotation[3] === 0 ? 'x' : datum.rotation[3] === 1 ? 'y':'z', angle: datum.rotation[4] === 0 ? 90 : datum.rotation[4] === 1 ? -90 : 180}", "as":"rotation" } ] }, { "name":"unfinished", "source":"points_dyn", "transform":[ { "type":"filter", "expr":"isDefined(datum.rotation) && datum.rotation.a !== 0" } ] }, { "name":"history", "values":[], "on":[ { "trigger":"isValid(history_Rotation) && history_Rotation.axis !== null && history_Rotation.angle % 360 !== 0 && solve_index === -1", "insert": "merge(history_Rotation, {angle:history_Rotation.angle % 360 < -180 ? 360 + (history_Rotation.angle % 360) : history_Rotation.angle % 360})" }, { "trigger":"clear_history", "remove":"clear_history" } ], "transform":[ { "type":"filter", "expr":"true" } ] } ], "marks":[ { "type":"group", "marks":[ { "type":"rect", "name":"btn_reset", "encode":{ "enter":{ "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_reset_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":80}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":1}, "y":{"value":1}, "x2":{"value":1}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_reset_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_reset", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":40}, "y":{"value":15}, "text":{"value":"reset"}, "fontSize":{"value":20} } } }, { "type":"rect", "name":"btn_shuffle", "encode":{ "enter":{ "x":{"value":85}, "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_shuffle_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":86}, "y":{"value":1}, "x2":{"value":165}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_shuffle_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":86}, "y":{"value":1}, "x2":{"value":86}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_shuffle_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_shuffle", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":125}, "y":{"value":15}, "text":{"value":"shuffle"}, "fontSize":{"value":20} } } }, { "type":"rect", "name":"btn_solve", "encode":{ "enter":{ "x":{"value":170}, "width":{"value":80}, "height":{"value":30} }, "update":{ "stroke":[{"test":"btn_solve_pressed", "value":"white"},{"value":"grey"}], "fill":{"value":"lightgrey"} } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":171}, "y":{"value":1}, "x2":{"value":250}, "y2":{"value":1} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_solve_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"rule", "encode":{ "enter":{ "x":{"value":171}, "y":{"value":1}, "x2":{"value":171}, "y2":{"value":30} }, "update":{ "strokeWidth":{"value":1}, "stroke":[{"test":"btn_solve_pressed", "value":"grey"},{"value":"white"}] } } }, { "type":"text", "name":"txt_solve", "encode":{ "enter":{ "align":{"value":"center"}, "baseline":{"value":"middle"}, "x":{"value":210}, "y":{"value":15}, "text":{"value":"solve"}, "fontSize":{"value":20} } } }] }, { "type": "group", "from": { "facet": { "name": "area", "data": "projections", "groupby": [ "cq2_z", "iX", "iY", "iZ", "face" ] } }, "marks": [ { "type": "line", "name":"face", "from": { "data": "area" }, "encode": { "update": { "x": { "field": "x" }, "y": { "field": "y" }, "y2": { "signal":"0" }, "fill": [{ "field": "face", "scale": "color" }], "opacity":[{"test":"cube_changing && (selected !== null && ((selected.axis === 'x' && datum.iY !== selected.iY) || (selected.axis === 'y' && datum.iX !== selected.iX) || (selected.axis === 'z' && datum.iZ !== selected.iZ)))", "value": 0.5},{"value":1}], "strokeWidth":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":3},{"value":1}], "stroke":[{"test":"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))", "value":"steelblue"},{"value":"black"}] } } } ] } ] },{"renderer":"svg"})3f:T519,md`**NOTE**: I face several issues with the use of timer. The main problem is that the index is changing while the data are still processing and it creates a lot of trouble. I solved this sending 5 degreed then 0 rotations and wait that the unfinished table to be empty to switch the index. Then I had still one issue. Rotations of 180 were not taken in account. I used a counter based on rotation angle divided by 90 to ensure not to change the index while the counter was not reached. It seems a little complicate, but I didn't found other solution to make it work... ## Known issues - The stroke lines are not perfect - There are some clipping issues when the perspective factor is increasing - There are some clipping issues when rotating a line - Sometimes the history won't get the event, and the solving system fails miserabily ## Conslusion This was clearly my most complicated challenge in Vega and I'm really to not have given up trying to find solutions. During the process, I was asking to my self and you probably had the same thoughts reading this: > Why I'm doing this? Well, I think the most honnest answer is: I can't help myself. Another answer is that I love the spirit of Vega, so I love to challenge it. I also think that we really learn something trying to achieve crazy things...`40:[] 2d:{"id":"e9e885fe29b9a4c6","slug":"how-to-create-the-rubiks-cube-game-using-vega","title":"How to create the Rubik's cube game using Vega","thumbnail":"516c1286438b2da5b57679e68cdb4880468b7e430a35f8d76b8290e45e5dba77","access_level":"public","create_time":"$D2020-03-12T14:50:09.691Z","update_time":"$D2020-03-19T13:19:56.013Z","view_time":null,"first_public_time":"$D2020-03-13T18:36:14.327Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"1ab1463344b266e0","login":"mathiastiberghien","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/a16241a634f3076e093beeb4c0c0a672737bd033a393f97b3242b427679fc82e","tier":"starter_2024"},"version":200,"publish_version":200,"role":null,"authored":false,"authors":[{"type":"individual","id":"0161860a595b9637","login":"mathiastiberghien","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/a16241a634f3076e093beeb4c0c0a672737bd033a393f97b3242b427679fc82e","tier":null}],"members":[{"type":"individual","id":"0161860a595b9637","login":"mathiastiberghien","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/a16241a634f3076e093beeb4c0c0a672737bd033a393f97b3242b427679fc82e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"0bfa1471ddeaa408","slug":"vega","title":"Vega","owner":{"id":"1ab1463344b266e0","login":"mathiastiberghien","name":"Mathias Tiberghien"}},"type":"notebook","body":{"title":"How to create the Rubik's cube game using Vega","cells":[{"id":0,"value":"md`# How to create the Rubik's cube game using Vega\nA game seems a nice way to end the 3D exploration using Vega. This is also a great opportunity to have a deeper understanding of the way the data can be transformed using vega datasources.\nThis post use the knowledges of previous publications here and here and supposes that you are familiarized with Vega documentation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`*Drag the view outside the cube to rotate it and, drag into the cube to rotate a face. You can also use the mouse wheel to change the scale of the cube*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## Let's create the cube\nThat part coming from previous experiments it's really straight forward when you come from previous 3D experiments. The rubik's cube has 9 faces per side. Considering the x,y ans z axis, we can say that it has 18 faces by axis. We will first create a data representing the cube indexes (iX,iY and iZ), the axis and the identifier of the face (to have the right color). We will create 54 lines (9 lines per face, multiply by 3 axis, multiply by 2 (each axis has 2 faces)). From these lines, we will create the center of each cube, the normal and the 5 points of each area of each cube. Below is the data object named points:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`You maybe have noticed that the initial dat is not defined in the values but in an array as a formula. This is not a mistake, it will be useful later and be explained then.\nHere's now the projections table which is the same than in other 3D samples. It basically mutliplies the center, the normal and the area points by the rotation quaternion. It filter the rendered areas using the normal, it orders the areas using the center, and retrieve the screen coordinates for the area points:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"embed(spec,{\"renderer\":\"svg\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`Here's the scale for faces color:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"({\n \"name\":\"color\",\n \"type\":\"ordinal\",\n \"domain\":[1,2,3,4,5,6],\n \"range\":[\"darkorange\",\"red\",\"yellow\",\"white\",\"green\",\"blue\"]\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`And the marks:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"(\n {\n \"type\": \"group\",\n \"from\": {\n \"facet\": {\n \"name\": \"area\",\n \"data\": \"projections\",\n \"groupby\": [\n \"iX\",\n \"iY\",\n \"iZ\",\n \"face\",\n \"cq2_z\"\n ]\n }\n },\n \"marks\": [\n {\n \"type\": \"area\",\n \"name\":\"face\",\n \"from\": {\n \"data\": \"area\"\n },\n \"encode\": {\n \"update\": {\n \"x\": {\n \"field\": \"x\"\n },\n \"y\": {\n \"field\": \"y\"\n },\n \"y2\": {\n \"value\": 0\n },\n \"fill\": [{\n \"field\": \"face\",\n \"scale\": \"color\"\n }]\n }\n }\n },\n {\n \"type\":\"line\",\n \"from\":{\"data\":\"area\"},\n \"encode\":{\n \"update\":{\n \"x\":{\"field\":\"x\"},\n \"y\":{\"field\":\"y\"},\n \"strokeWidth\":[{\"value\":1}],\n \"stroke\":[{\"value\":\"black\"}]\n }\n }\n }\n ]\n}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"([{\n \"name\":\"cube_changing\",\n \"init\":\"false\",\n \"on\":[{\"events\":\"view:mousedown\", \"update\":\"selected!=null\"},{\"events\":\"view:mouseup\", \"update\":\"false\"}]\n },\n {\n \"name\":\"selected\",\n \"init\":\"null\",\n \"on\":[\n {\"events\":\"@face:mousemove\", \"update\":\"event.buttons === 0 ?{iX:datum.iX, iY:datum.iY, iZ:datum.iZ, axis: (datum.iZ < cube_size - 1 && rotation_VER <= 180) || (datum.iZ !== 0 && rotation_VER > 180) ? 'z' : datum.axis} : selected\"},\n {\"events\":\"@face:mouseout\", \"update\":\"cube_changing ? selected : null\"},\n {\"events\":\"view:mouseup\", \"update\":\"null\"}\n ]\n } \n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`\\`\\`selected\\`\\` will be activated on mousemove over a cube area: it will be set with an object containing the iX, iY and iZ (cube coordinates) parameters of the face and the rotation axis. I decided to use x and y axis on the x and y faces of the highest row (in z axis) of the cube, and the z axis is selected when moving over the top of the cube or the 2 downest lines (in z axis). This allows to select any rotation without having to move the cube. Note that the vary when the cube is upside down so that the user will always have the same selection behavior whatever the position of the cube\n- We modify the marks as following:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"({\n \"type\": \"line\",\n \"name\":\"face\",\n \"from\": {\n \"data\": \"area\"\n },\n \"encode\": {\n \"update\": {\n \"x\": {\n \"field\": \"x\"\n },\n \"y\": {\n \"field\": \"y\"\n },\n \"y2\": {\n \"value\": 0\n },\n \"fill\": [{\n \"field\": \"face\",\n \"scale\": \"color\"\n }],\n \"strokeWidth\":[{\"test\":\"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))\", \"value\":3},{\"value\":1}],\n \"stroke\":[{\"test\":\"selected !== null && ((selected.axis === 'x' && datum.iY === selected.iY) || (selected.axis === 'y' && datum.iX === selected.iX) || (selected.axis === 'z' && datum.iZ === selected.iZ))\", \"value\":\"steelblue\"},{\"value\":\"black\"}]\n }\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`stroke property is updated when selection changes: according to the selected rotation axis the appropriate cubes are selected using the cube indexes\n- Finally we update the angle_HOR and angle_VER signal to disable any modification of the camera when dragging a selected part of the cube:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"([{\n \"name\":\"angle_HOR\",\n \"on\":[{\"events\":{\"source\":\"view\", \"type\": \"mousemove\", \"filter\":\"event.buttons === 1\"}, \"update\":\"rotation_HOR + (cube_changing ? 0 : ((event.movementX < 0) ^ (rotation_VER > 180) ? 5 : (event.movementX > 0) ^(rotation_VER > 180) ? -5 : 0))\"}]\n },\n {\n \"name\":\"validAngle_HOR\",\n \"update\":\"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360\"\n },\n {\n \"name\":\"angle_VER\",\n \"on\":[{\"events\":{\"source\":\"view\", \"type\": \"mousemove\", \"filter\":\"event.buttons === 1\"}, \"update\":\"rotation_VER + ( cube_changing ? 0 :(event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0))\"}]\n }])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`Width the following result:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`### Transforming\nNow we can start to add the cube transformation. We first creates the signals that will stores the transformation quaternion. We have one variable for the angle, then the quaternion parameters are calculated according to the transformation axis. We need then to create a points_dyn table that will perform the transformations on the areas. We need to modify, the center, the normal and each point that was selected.\n- The signals:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`### Shuffle the cube\nAt that point, I was already satisfied, but one my kids look at it and told me:\n> You should add a shuffle button.\n\nChallenged accepted, let's do this with the following:\n- A shuffle table containing some random rotations\n- A shuffle variable that will contain a shuffle rotation\n- A shuffle_current variable that will indicates which rotation to apply\n- Make the rotation_Line listen to the shuffle_current to modify the cube\n\nIt seemed easy, but I didn't find a satisfying solution for that problem. With the transform you can modify a data table. An iterating workflow like this always ends with a cycle reference... Maybe there's another solution and I'd be happy to know it, but I had to use timer to iterate (shame on me)...\nHere's my solution:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`- The signals suffle and suffle_current are using the suffle table to set rotation_Line. Trick is to wait tha unfinished table is empty to iterate. And avoid issues\n\n### Adding a solver\n\nFor the solver, I became very lazy (well this is after work job after all). I first added a history_Rotation signal listen for shuffle rotations and manual rotations. A history table is adding one entry each time history_Rotation changes with a non zero rotation. When the user clicks the solve button, the process is the same that for the shuffle, reverting the angle. I changed the angle from 5 degrees to enable animation. And here's the final result:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1","titling":"auto"}} 2e:"$2d:body"