Browse Source

Trying to get curves to toggle

master
Pete Shadbolt 7 years ago
parent
commit
22ff74e8b8
5 changed files with 39 additions and 13 deletions
  1. +27
    -1
      static/scripts/editor.js
  2. +1
    -1
      static/scripts/graph.js
  3. +9
    -10
      static/scripts/materials.js
  4. +1
    -0
      templates/doc.md
  5. +1
    -1
      templates/index.html

+ 27
- 1
static/scripts/editor.js View File

@@ -115,11 +115,26 @@ editor.prepare = function() {
};

editor.onKey = function(evt) {
console.log(evt.keyCode);
if (evt.keyCode === 32) {
editor.setOrientation((editor.orientation + 1) % 3);
editor.gridTimeOut = 0;
}
if (evt.keyCode === 46 || evt.keyCode === 68) {
if (evt.keyCode === 38) {
editor.moveGridNormal(1);
editor.gridTimeOut = 0;
}
if (evt.keyCode === 40) {
editor.moveGridNormal(-1);
editor.gridTimeOut = 0;
}
if (evt.keyCode === 46) {
editor.deleteNode();
editor.gridTimeOut = 0;
}
if (evt.keyCode === 67) {
materials.curveProperties.splineDensity = materials.curveProperties.splineDensity == 10 ? 0 : 10;
gui.render();
}
};

@@ -134,6 +149,17 @@ editor.setOrientation = function(orientation) {
gui.render();
};

editor.moveGridNormal = function(delta) {
var orientation = editor.orientation;
var rotation = editor.orientations[orientation];
var normal = new THREE.Vector3(0, 1, 0);
normal.applyEuler(rotation);
editor.grid.position.addScaledVector(normal, delta);
editor.plane = new THREE.Plane();
editor.plane.setFromNormalAndCoplanarPoint(normal, editor.grid.position);
gui.render();
};

editor.makeGrid = function() {
editor.grid = new THREE.GridHelper(10, 1);
editor.grid.setColors(0xbbbbbb, 0xeeeeee);


+ 1
- 1
static/scripts/graph.js View File

@@ -50,7 +50,7 @@ graph.update = function(newState) {
if (editor.selection) {
var node = editor.selection;
if (Object.prototype.hasOwnProperty.call(abj.node, node)) {
editor.grid.position.copy(abj.node[node].position);
// Do nothing ...
gui.controls.target.copy(abj.node[node].position);
node_name.innerHTML = "Node " + node;
node_data.className = "visible";


+ 9
- 10
static/scripts/materials.js View File

@@ -1,37 +1,36 @@
var materials = {};

var curveProperties = {
splineDensity: 10,
curvature: 20
};

// Is called on boot
materials.prepare = function() {
var ballSprite = new THREE.Texture(document.getElementById("ball"));
ballSprite.needsUpdate = true;
materials.edge = new THREE.LineBasicMaterial({
color: "gray",
color: "black",
transparent: false,
linewidth: 3
linewidth: 1
});
materials.edge.depthTest = false;
materials.qubit = new THREE.PointsMaterial({
size: 0.6,
size: 0.4,
map: ballSprite,
alphaTest: 0.5,
transparent: true,
vertexColors: THREE.VertexColors
});
materials.curveProperties = {
splineDensity: 10,
curvature: 20
};
};


materials.makeCurve = function(a, b) {
var length = new THREE.Vector3().subVectors(a, b).length();
var bend = new THREE.Vector3(length / curveProperties.curvature, length / curveProperties.curvature, 0);
var bend = new THREE.Vector3(length / materials.curveProperties.curvature, length / materials.curveProperties.curvature, 0);
var mid = new THREE.Vector3().add(a).add(b).multiplyScalar(0.5).add(bend);
var spline = new THREE.CatmullRomCurve3([a, mid, b]);
var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(curveProperties.splineDensity);
var splinePoints = spline.getPoints(materials.curveProperties.splineDensity);
Array.prototype.push.apply(geometry.vertices, splinePoints);
return new THREE.Line(geometry, materials.edge);
};


+ 1
- 0
templates/doc.md View File

@@ -9,6 +9,7 @@ The state is initialized as a blank canvas without any qubits.
- Click on a qubit to view its properties
- Select a qubit, then <kbd>Shift</kbd>-click another node to act a CZ gate
- Press <kbd>Space</kbd> to rotate the grid
- Use the <kbd>Up</kbd> and <kbd>Down</kbd> arrow keys to move the grid normal to its plane.

Arbitrary 3D structures can be constructed by rotating the grid.



+ 1
- 1
templates/index.html View File

@@ -47,7 +47,7 @@
<li><a onclick="editor.raussendorf()">Raussendorf</a></li>
<li><a onclick="share()">Share</a></li>
<li><a href="/{{uuid}}/download">Download</a></li>
<li><a href="/doc" id=help>Help</a></li>
<li><a href="/doc" id=help>Documentation</a></li>
</ul>
</div>



Loading…
Cancel
Save