You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
7.6 KiB
267 lines
7.6 KiB
//p5 X --> Y
|
|
//p5 Y --> -Z
|
|
//p5 Z --> X
|
|
|
|
//line(y1, -z1, x1, y2, -z2, x2)
|
|
|
|
let debug = false,
|
|
viewPort = {x: 0, y: 0, z: 0},
|
|
arrows = [],
|
|
quads = [],
|
|
cuboids = [],
|
|
state = 0,
|
|
scale = 25,
|
|
grid = true;
|
|
|
|
let oldMouse = {x: 0, y: 0},
|
|
rotation = {x: 0, y: 0};
|
|
|
|
|
|
function setup() {
|
|
setFrameRate(60);
|
|
let c = createCanvas($("#canvasHolder").width(), $("#canvasHolder").height(), WEBGL);
|
|
c.parent("canvasHolder");
|
|
$("#cheatInput").css("display", "none");
|
|
}
|
|
|
|
function draw() {
|
|
background(20);
|
|
translate(-50, 50, 0);
|
|
rotateX(-PI / 16);
|
|
rotateY(-PI / 8);
|
|
myOrbitControl();
|
|
checkKeys();
|
|
drawCoordSystem();
|
|
for (let a of arrows) a.show();
|
|
for (let q of quads) q.show();
|
|
for (let c of cuboids) c.show();
|
|
}
|
|
|
|
let vectorA1 = () => new Arrow(2, 2, 2, 4, 0, 0, "#FFF", true);
|
|
let vectorB1 = () => new Arrow(2, 2, 2, 0, 6, 0, "#FFF");
|
|
let vectorC1 = () => new Arrow(2, 2, 2, 3, 0, 5, "#FFF");
|
|
let vectorA2 = () => new Arrow(2, 2, 2, 2, 3, -2, "#FFF", true);
|
|
let vectorB2 = () => new Arrow(2, 2, 2, 0, 3, 2, "#FFF");
|
|
let vectorC2 = () => new Arrow(2, 2, 2, 3, -1, 6, "#FFF");
|
|
let createCuboid = (a1, a2, a3, h) => new Cuboid(a1, a2, a3, color(100, 255, 255), h);
|
|
let createQuad = (a1, a2) => new Quad(a1, a2, color(255, 200, 100));
|
|
let crossVector = (a1, a2) => Arrow.cross(a1, a2, "#FE9");
|
|
|
|
function drawCoordSystem(){
|
|
|
|
strokeWeight(5);
|
|
|
|
let strong = 10,
|
|
weak = 150;
|
|
|
|
let longLength = 300;
|
|
let shortLength = longLength / 3;
|
|
|
|
let long = longLength - longLength % scale;
|
|
let short = shortLength - shortLength % scale;
|
|
|
|
//X
|
|
stroke(strong, strong, 255); //strong
|
|
line(0, 0, long, 0, 0, 0);
|
|
stroke(weak, weak, 255); //weak
|
|
line(0, 0, 0, 0, 0, -short);
|
|
|
|
//Y
|
|
stroke(255, strong, strong); //strong
|
|
line(long, 0, 0, 0, 0, 0);
|
|
stroke(255, weak, weak); //weak
|
|
line(0, 0, 0, -short, 0, 0);
|
|
|
|
//Z
|
|
stroke(strong, 255, strong); //strong
|
|
line(0, -long, 0, 0, 0, 0);
|
|
stroke(weak, 255, weak); //weak
|
|
line(0, 0, 0, 0, short, 0);
|
|
|
|
if (grid){
|
|
strokeWeight(1);
|
|
|
|
//Multiple for XY
|
|
stroke("rgba(255, " + weak + ", 255, 0.3)");
|
|
for (let y = -short; y <= longLength; y += scale) line(y, 0, long, y, 0, -short);
|
|
for (let x = -short; x <= longLength; x += scale) line(long, 0, x, -short, 0, x);
|
|
|
|
//Multiple for XZ
|
|
stroke("rgba(" + weak + ", 255, 255, 0.3)");
|
|
for (let z = -short; z <= longLength; z += scale) line(0, -z, long, 0, -z, -short);
|
|
for (let x = -short; x <= longLength; x += scale) line(0, -long, x, 0, short, x);
|
|
|
|
//Multiple for YZ
|
|
stroke("rgba(255, 255, " + weak + ", 0.3)");
|
|
for (let y = -short; y <= longLength; y += scale) line(y, -long, 0, y, short, 0);
|
|
for (let z = -short; z <= longLength; z += scale) line(long, -z, 0, -short, -z, 0);
|
|
}
|
|
|
|
}
|
|
|
|
function myOrbitControl(){
|
|
if (mouseIsPressed){
|
|
rotation.x -= map(mouseY - oldMouse.y, 0, height, 0, PI);
|
|
rotation.y += map(mouseX - oldMouse.x, 0, width, 0, PI);
|
|
}
|
|
rotateX(rotation.x);
|
|
rotateY(rotation.y);
|
|
oldMouse.x = mouseX;
|
|
oldMouse.y = mouseY;
|
|
}
|
|
|
|
function html(name, vector, first, second){
|
|
if (name == null){
|
|
$("#info").html("");
|
|
return;
|
|
}
|
|
let dir = vector.dir;
|
|
$("#info").append("<fieldset><table><tr><td></td><td><span></span></td><td></td><td><span></span></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td></tr></table></fieldset>");
|
|
$("#info fieldset").last().attr({
|
|
"class": "holder",
|
|
"id": name
|
|
});
|
|
$("#" + name + " table tr:eq(0) td:eq(0)").html("<sub>→</sub>");
|
|
$("#" + name + " table tr:eq(0) td:eq(0)").css({"text-align": "left", "-moz-transform": "translate(-2px, 30px) scale(1, 1)"});
|
|
$("#" + name + " table tr:eq(0) td:eq(1) span").html("(");
|
|
$("#" + name + " table tr:eq(0) td:eq(2)").html(dir.x);
|
|
$("#" + name + " table tr:eq(0) td:eq(3) span").html(")");
|
|
$("#" + name + " table tr:eq(0) td:eq(1), #" + name + " table tr:eq(0) td:eq(3)").attr({
|
|
"style": "font-size: 70px",
|
|
"rowspan": "3"
|
|
});
|
|
$("#" + name + " table tr:eq(1) td:eq(0)").html(name + " = ");
|
|
$("#" + name + " table tr:eq(1) td:eq(1)").html(dir.y);
|
|
$("#" + name + " table tr:eq(2) td:eq(1)").html(dir.z);
|
|
|
|
if (first){
|
|
$("#" + name + " table tr:eq(0) td:eq(5), #" + name + " table tr:eq(0) td:eq(7)").html("<sub>→</sub>");
|
|
$("#" + name + " table tr:eq(0) td:eq(5), #" + name + " table tr:eq(0) td:eq(7)").css("-moz-transform", "translateY(30px)");
|
|
$("#" + name + " table tr:eq(1) td:eq(2)").html(" = ");
|
|
$("#" + name + " table tr:eq(1) td:eq(3)").html(first);
|
|
$("#" + name + " table tr:eq(1) td:eq(4)").html("×");
|
|
$("#" + name + " table tr:eq(1) td:eq(5)").html(second);
|
|
}
|
|
}
|
|
|
|
function updater(){
|
|
arrows = [];
|
|
quads = [];
|
|
cuboids = [];
|
|
html(null);
|
|
switch(state){
|
|
case 1:
|
|
arrows.push(vectorA1());
|
|
html("a", vectorA1());
|
|
break;
|
|
case 2:
|
|
arrows.push(vectorA1());
|
|
arrows.push(vectorB1());
|
|
html("a", vectorA1());
|
|
html("b", vectorB1());
|
|
break;
|
|
case 3:
|
|
arrows.push(vectorA1());
|
|
arrows.push(vectorB1());
|
|
arrows.push(crossVector(vectorA1(), vectorB1()));
|
|
html("a", vectorA1());
|
|
html("b", vectorB1());
|
|
html("x", crossVector(vectorA1(), vectorB1()), "a", "b");
|
|
break;
|
|
case 4:
|
|
arrows.push(vectorA1());
|
|
arrows.push(vectorB1());
|
|
arrows.push(crossVector(vectorA1(), vectorB1()));
|
|
quads.push(createQuad(vectorA1(), vectorB1()));
|
|
html("a", vectorA1());
|
|
html("b", vectorB1());
|
|
html("x", crossVector(vectorA1(), vectorB1()), "a", "b");
|
|
break;
|
|
case 5:
|
|
arrows.push(vectorA1());
|
|
arrows.push(vectorB1());
|
|
html("a", vectorA1());
|
|
html("b", vectorB1());
|
|
break;
|
|
case 6:
|
|
arrows.push(vectorA1());
|
|
arrows.push(vectorB1());
|
|
arrows.push(vectorC1());
|
|
html("a", vectorA1());
|
|
html("b", vectorB1());
|
|
html("c", vectorC1());
|
|
break;
|
|
case 7:
|
|
arrows.push(vectorA1());
|
|
arrows.push(vectorB1());
|
|
arrows.push(vectorC1());
|
|
cuboids.push(createCuboid(vectorA1(), vectorB1(), vectorC1(), true));
|
|
html("a", vectorA1());
|
|
html("b", vectorB1());
|
|
html("c", vectorC1());
|
|
break;
|
|
case 8:
|
|
arrows.push(vectorA1());
|
|
arrows.push(vectorB1());
|
|
arrows.push(vectorC1());
|
|
arrows.push(crossVector(vectorA1(), vectorB1()));
|
|
cuboids.push(createCuboid(vectorA1(), vectorB1(), vectorC1(), true));
|
|
quads.push(createQuad(vectorA1(), vectorB1()));
|
|
html("a", vectorA1());
|
|
html("b", vectorB1());
|
|
html("c", vectorC1());
|
|
html("x", crossVector(vectorA1(), vectorB1()), "a", "b");
|
|
break;
|
|
case 9:
|
|
break;
|
|
case 10:
|
|
arrows.push(vectorA2());
|
|
html("a", vectorA2());
|
|
break;
|
|
case 11:
|
|
arrows.push(vectorA2());
|
|
arrows.push(vectorB2());
|
|
html("a", vectorA2());
|
|
html("b", vectorB2());
|
|
break;
|
|
case 12:
|
|
arrows.push(vectorA2());
|
|
arrows.push(vectorB2());
|
|
arrows.push(vectorC2());
|
|
html("a", vectorA2());
|
|
html("b", vectorB2());
|
|
html("c", vectorC2());
|
|
break;
|
|
case 13:
|
|
quads.push(createQuad(vectorA2(), vectorB2()));
|
|
arrows.push(vectorA2());
|
|
arrows.push(vectorB2());
|
|
arrows.push(vectorC2());
|
|
html("a", vectorA2());
|
|
html("b", vectorB2());
|
|
html("c", vectorC2());
|
|
break;
|
|
case 14:
|
|
cuboids.push(createCuboid(vectorA2(), vectorB2(), vectorC2(), false));
|
|
quads.push(createQuad(vectorA2(), vectorB2()));
|
|
arrows.push(vectorA2());
|
|
arrows.push(vectorB2());
|
|
arrows.push(vectorC2());
|
|
html("a", vectorA2());
|
|
html("b", vectorB2());
|
|
html("c", vectorC2());
|
|
break;
|
|
case 15:
|
|
cuboids.push(createCuboid(vectorA2(), vectorB2(), vectorC2(), false));
|
|
quads.push(createQuad(vectorA2(), vectorB2()));
|
|
arrows.push(crossVector(vectorA2(), vectorB2()));
|
|
arrows.push(vectorA2());
|
|
arrows.push(vectorB2());
|
|
arrows.push(vectorC2());
|
|
html("a", vectorA2());
|
|
html("b", vectorB2());
|
|
html("c", vectorC2());
|
|
html("x", crossVector(vectorA2(), vectorB2()), "a", "b");
|
|
break;
|
|
}
|
|
} |