<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<title>Cube stuff</title>
</head>
<body style="background-color:#ccc">
<script>
// Choose colors
var nd_color = '#f00';
var ld_color = '#00f';
var td_color = '#aa0';
//
// DON'T CHANGE STUFF FROM HERE ON
// UNLESS YOU KNOW WHAT YOU ARE DOING
//
var body = document.getElementsByTagName("body")[0];
var mobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
mobile = true;
}
var CanvasPosition = 400;
var CanvasPositionTop = 800;
var window_size = Math.min((window.innerWidth-CanvasPosition)*0.5-10, window.innerHeight-30);
if(mobile){window_size = window.innerWidth-20;}
var CanvasHeight = window_size;
var CanvasWidth = window_size;
var fontSize = CanvasHeight/30;
var Canvas;
var CanvasAngle, CanvasAngleBG;
var CanvasAngleRot, CanvasAngleRotBG;
var StartingPoint = CanvasHeight *0.1;
var orange_type = 1;
var arrow=false;
var dashed_length = 4;
var dashed_width = 1;
var schmid = [[],[],[],[],[],[]];
var a,b,c,e,f,g;
var el = CanvasHeight * 0.5; // edge length of the cube
var line_point = [ , , ];
var line_dir = [ , , ];
var normal_vector_nd = [,,];
var normal_vector_ld = [,,];
var normal_vector_td = [,,];
var origin = StartingPoint+0.5*el;
newCanvas();
DrawCube();
function newCanvas(){
if(!mobile){
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = CanvasPosition + "px";
newCanvas.style.border = "2px solid";
newCanvas.style.background = "#fff";
body.appendChild(newCanvas);
Canvas = newCanvas;
ctx = Canvas.getContext("2d");
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = CanvasPosition + 10 + CanvasWidth+ "px";
newCanvas.style.border = "2px solid";
newCanvas.style.background = "#fff";
body.appendChild(newCanvas);
CanvasAngleBG = newCanvas;
ctxAngleBG = CanvasAngleBG.getContext("2d");
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = CanvasPosition + 10 + CanvasWidth+ "px";
newCanvas.style.border = "2px solid";
body.appendChild(newCanvas);
CanvasAngle = newCanvas;
ctxAngle = CanvasAngle.getContext("2d");
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = CanvasPosition + 20 + 2*CanvasWidth+ "px";
newCanvas.style.border = "2px solid";
newCanvas.style.background = "#fff";
body.appendChild(newCanvas);
CanvasAngleRotBG = newCanvas;
ctxAngleRotBG = CanvasAngleRotBG.getContext("2d");
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = CanvasPosition + 20 + 2*CanvasWidth+ "px";
newCanvas.style.border = "2px solid";
body.appendChild(newCanvas);
CanvasAngleRot = newCanvas;
ctxAngleRot = CanvasAngleRot.getContext("2d");
} else {
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = 10+ "px";
newCanvas.style.top = CanvasPositionTop + "px";
newCanvas.style.border = "2px solid";
newCanvas.style.background = "#fff";
body.appendChild(newCanvas);
Canvas = newCanvas;
ctx = Canvas.getContext("2d");
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = 10+ "px";
newCanvas.style.top = CanvasPositionTop +10 + window_size + "px";
newCanvas.style.border = "2px solid";
newCanvas.style.background = "#fff";
body.appendChild(newCanvas);
CanvasAngleBG = newCanvas;
ctxAngleBG = CanvasAngleBG.getContext("2d");
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = 10+ "px";
newCanvas.style.top = CanvasPositionTop + 10 + window_size + "px";
newCanvas.style.border = "2px solid";
body.appendChild(newCanvas);
CanvasAngle = newCanvas;
ctxAngle = CanvasAngle.getContext("2d");
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = 10+ "px";
newCanvas.style.top = CanvasPositionTop + 20 + 2*window_size + "px";
newCanvas.style.border = "2px solid";
newCanvas.style.background = "#fff";
body.appendChild(newCanvas);
CanvasAngleRotBG = newCanvas;
ctxAngleRotBG = CanvasAngleRotBG.getContext("2d");
var newCanvas = document.createElement('canvas');
newCanvas.id = "canvas";
newCanvas.width = CanvasWidth;
newCanvas.height = CanvasHeight;
newCanvas.style.height = CanvasHeight + 'px';
newCanvas.style.width = CanvasWidth + 'px';
newCanvas.style.zIndex = CanvasPosition + "px";
newCanvas.style.position = "absolute";
newCanvas.style.left = 10+ "px";
newCanvas.style.top = CanvasPositionTop + 20 + 2*window_size + "px";
newCanvas.style.border = "2px solid";
body.appendChild(newCanvas);
CanvasAngleRot = newCanvas;
ctxAngleRot = CanvasAngleRot.getContext("2d");
}
}
function clear_canvas(){
ctx.clearRect(0,0,Canvas.height,Canvas.width);
DrawCube();
}
function DrawCube(){
DrawLine(StartingPoint,StartingPoint,el,0,2,"#000", false)
DrawLine(StartingPoint,StartingPoint,0,el,2,"#000", false)
DrawLine(StartingPoint + el,StartingPoint,0,el,2,"#000", false)
DrawLine(StartingPoint + el,StartingPoint,0.5 * el,0.5 * el,2,"#000", false)
DrawLine(StartingPoint,StartingPoint + el,el,0,2,"#000", false)
DrawLine(StartingPoint,StartingPoint + el,0.5 * el,0.5 * el,2,"#000", false)
DrawLine(StartingPoint,StartingPoint,14 * el/20,14 * el/20,2,"#000", true)
DrawLine(StartingPoint + el,StartingPoint + el,0.5 * el,0.5 * el,2,"#000", false)
DrawLine(StartingPoint + 0.5*el,StartingPoint + 0.1*el,0,14*el/10,2,"#000", true)
DrawLine(StartingPoint + 0.1*el,StartingPoint + 0.5*el,14*el/10,0,2,"#000", true)
DrawLine(StartingPoint + 1.5*el,StartingPoint + 0.5*el,0,el,2,"#000", false)
DrawLine(StartingPoint + 0.5*el,StartingPoint + 1.5*el,el,0,2,"#000", false)
/*ctx.font = "12px Arial";
ctx.fillText('x',StartingPoint + el/10,CanvasHeight-StartingPoint - el/5);
ctx.fillText('y',StartingPoint + 14*el/10,CanvasHeight-StartingPoint - 6*el/10);
ctx.fillText('z',el/10,el/10); */
}
function DrawLine(start_x, start_y, length_x, length_y, width, color, dashed){
to_x = start_x + length_x;
to_y = CanvasHeight - start_y - length_y;
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.beginPath();
if(dashed){ctx.setLineDash([5,5]);}else{ctx.setLineDash([]);}
ctx.moveTo(start_x, CanvasHeight - start_y);
ctx.lineTo(to_x, to_y);
ctx.stroke();
if(arrow){
DrawArrow(ctx, [start_x,CanvasWidth-start_y], [to_x,to_y],10,color);
}
}
function DrawLineAngle(length_x, length_y, width, color, dashed){
start_x = CanvasWidth/4;
start_y = CanvasHeight/3;
to_x = start_x + length_x;
to_y = CanvasHeight - start_y - length_y;
ctxAngle.lineWidth = width;
ctxAngle.strokeStyle = color;
ctxAngle.beginPath();
ctxAngle.moveTo(start_x, CanvasWidth - start_y);
ctxAngle.lineTo(to_x, to_y);
ctxAngle.stroke();
//DrawArrow(ctxAngle, [start_x,start_y] , [to_x,to_y],10,color);
}
function DrawLineAngleRot(length_x, length_y, width, color, dashed){
start_x = CanvasWidth/4;
start_y = CanvasHeight/3;
to_x = start_x + length_x;
to_y = CanvasHeight - start_y - length_y;
ctxAngleRot.lineWidth = width;
ctxAngleRot.strokeStyle = color;
ctxAngleRot.beginPath();
ctxAngleRot.moveTo(start_x, CanvasWidth - start_y);
ctxAngleRot.lineTo(to_x, to_y);
ctxAngleRot.stroke();
//DrawArrow(ctxAngle, [start_x,start_y] , [to_x,to_y],10,color);
}
function DrawArrow(ctx,p1,p2,size,color){
ctx.save();
var dx = p2[0]-p1[0], dy=p2[1]-p1[1];
ctx.translate(p2[0],p2[1]);
ctx.rotate(Math.atan2(dy,dx));
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(-size,-size/3);
ctx.lineTo(-size, size/3);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
function draw(type, number, cube_nr){
var x,y,z,color;
if(type=="orange"){
color = "#fa0";
orange_type = number;
clear_canvas();
draw_orange(1, color, cube_nr);
} else {
if(type=="nd"){
x = document.getElementById("nd_x").value;
y = document.getElementById("nd_y").value;
z = document.getElementById("nd_z").value;
color = nd_color;
}
if(type=="ld"){
x = document.getElementById("ld_x").value;
y = document.getElementById("ld_y").value;
z = document.getElementById("ld_z").value;
color = ld_color;
}
if(type=="td"){
x = document.getElementById("td_x").value;
y = document.getElementById("td_y").value;
z = document.getElementById("td_z").value;
color = td_color;
}
draw_plane(x,y,z,color);
}
}
function draw_orange(type,color,caption) {
switch(orange_type){
case 1:
DrawLine(origin, origin, el/2,-el/2, 3, color,false);
DrawLine(origin, origin, 0,el, 3, color,false);
DrawLine(origin, origin+el, el/2,-el/2, 3, color,false);
DrawLine(origin+el/2, origin-el/2,0, el, 3, color,false);
break;
case 2:
DrawLine(origin-el/2, origin-el/2, 3*el/2,el/2, 3, color,false);
DrawLine(origin+el, origin, 0,el, 3, color,false);
DrawLine(origin+el, origin+el, -3*el/2,-el/2, 3, color,false);
DrawLine(origin-el/2, origin+el/2,0, -el, 3, color,false);
break;
case 3:
DrawLine(origin-el/2, origin-el/2, el,0, 3, color,false);
DrawLine(origin+el/2, origin-el/2, el/2,3*el/2, 3, color,false);
DrawLine(origin+el, origin+el, -el,0, 3, color,false);
DrawLine(origin, origin+el,-el/2, -3*el/2, 3, color,false);
break;
case 4:
DrawLine(origin, origin, el, 0, 3, color,false);
DrawLine(origin + el, origin, -el/2,el/2, 3, color,false);
DrawLine(origin + el/2, origin+el/2, -el, 0, 3, color,false);
DrawLine(origin-el/2, origin+el/2,el/2, -el/2, 3, color,false);
break;
case 5:
DrawLine(origin, origin, -el/2,-el/2, 3, color,false);
DrawLine(origin-el/2, origin-el/2, el, el, 3, color,false);
DrawLine(origin+el/2, origin+el/2, el/2,el/2, 3, color,false);
DrawLine(origin+el, origin-el,-el, -el, 3, color,false);
break;
case 6:
DrawLine(origin-el/2, origin+el/2, el,-el, 3, color,false);
DrawLine(origin+el/2, origin-el/2, el/2,el/2, 3, color,false);
DrawLine(origin+el, origin, -el,el, 3, color,false);
DrawLine(origin, origin+el,-el/2, -el/2, 3, color,false);
break;
}
ctx.font = fontSize + "px Arial";
ctx.fillText('Cube type: ' + caption,el/10,el/10);
}
function draw_plane(x,y,z,color){
if(y!=0){
if(z!=0){
DrawLine(origin+el/y,origin,-el/y,el/z,3,color,false);
if(color==nd_color){
DrawLine(origin+el/y,origin,dashed_length*dashed_length**dashed_length*el/y,-dashed_length*dashed_length**dashed_length*el/z,dashed_width,color,true);
DrawLine(origin,origin+el/z,-dashed_length*dashed_length**dashed_length*el/y,dashed_length*dashed_length**dashed_length*el/z,dashed_width,color,true);
}
if(x!=0){
DrawLine(origin,origin + el/z, -el/(2*x),-el/z - el/(2*x),3,color,false);
if(color == nd_color){
DrawLine(origin,origin + el/z, dashed_length*dashed_length**dashed_length*el/(2*x),dashed_length*dashed_length**dashed_length*el/z + dashed_length*dashed_length**dashed_length*el/(2*x),dashed_width,color,true);
DrawLine(origin-el/(2*x),origin - el/(2*x), -dashed_length*dashed_length**dashed_length*el/(2*x),-dashed_length*dashed_length**dashed_length*el/z - dashed_length*dashed_length**dashed_length*el/(2*x),dashed_width,color,true);
}
DrawLine(origin-el/(2*x),origin-el/(2*x), el/y +el/(2*x), el/(2*x),3,color,false);
if(color == nd_color){
DrawLine(origin-el/(2*x),origin-el/(2*x), -dashed_length*dashed_length**dashed_length*el/y -dashed_length*dashed_length**dashed_length*el/(2*x), -dashed_length*dashed_length**dashed_length*el/(2*x),dashed_width,color,true);
DrawLine(origin+el/y,origin, dashed_length*dashed_length**dashed_length*el/y +dashed_length*dashed_length**dashed_length*el/(2*x), dashed_length*dashed_length**dashed_length*el/(2*x),dashed_width,color,true);
}
} else {
DrawLine(origin,origin + el/z, -el/(2),-el/(2),3,color,false);
DrawLine(origin-el/2,origin - el/2 + el/z,el/y, -el/z,3,color,false);
DrawLine(origin-el/2+ el/y,origin-el/2 , el/2, el/2,3,color,false);
}
} else {
DrawLine(origin+el/y,origin,0,el,3,color,false);
if(x!=0){
DrawLine(origin+el/y,origin,-el/y - el/(2*x),-el/(2*x),3,color,false);
DrawLine(origin-el/(2*x),origin -el/(2*x), 0,el ,3,color,false);
DrawLine(origin-el/(2*x),origin + el -el/(2*x),el/y + el/(2*x),+el/(2*x),3,color,false);
} else {
DrawLine(origin+el/y,origin, -el/(2),-el/(2),3,color,false);
DrawLine(origin+el/y-el/(2),origin -el/(2), 0,el ,3,color,false);
DrawLine(origin+el/y-el/(2),origin + el -el/(2),el/(2),+el/(2),3,color,false);
}
}
} else {
if(z!=0){
DrawLine(origin+el,origin+el/z,-el,0,3,color,false);
if(x!=0){
DrawLine(origin,origin + el/z, -el/(2*x),-el/z - el/(2*x),3,color,false);
DrawLine(origin-el/(2*x),origin-el/(2*x) , el, 0,3,color,false);
DrawLine(origin-el/(2*x)+el,origin-el/(2*x), el/(2*x), el/(2*x) + el/z,3,color,false);
} else {
DrawLine(origin,origin + el/z, -el/(2),-el/(2),3,color,false);
DrawLine(origin-el/2,origin - el/2 + el/z,el, 0,3,color,false);
DrawLine(origin-el/2+ el,origin-el/2 + el/z, el/2, el/2,3,color,false);
}
} else {
DrawLine(origin-el/(2*x),origin-el/(2*x), 0,el ,3,color,false);
if(x!=0){
DrawLine(origin-el/(2*x),origin-el/(2*x),el,0,3,color,false);
DrawLine(origin-el/(2*x) + el, origin-el/(2*x), 0,el ,3,color,false);
DrawLine(origin-el/(2*x) + el, origin-el/(2*x)+ el, -el,0,3,color,false);
} else {
alert("Nanana.. irgendwas muss nicht 0 sein!!");
}
}
}
}
function intersect(){
diff_a = (a - parseFloat(document.getElementById("nd_x").value));
diff_b = (b - parseFloat(document.getElementById("nd_y").value));
diff_c = (c - parseFloat(document.getElementById("nd_z").value));
if(diff_a>1 || diff_a<-1) {;
a = parseFloat(document.getElementById("nd_x").value);
}
if(diff_b>1 || diff_b<-1) {;
b = parseFloat(document.getElementById("nd_y").value);
}
if(diff_c>1 || diff_c<-1) {;
c = parseFloat(document.getElementById("nd_z").value);
}
if(orange_type == 1) { intersect_type_1(a,b,c); }
if(orange_type == 2) { intersect_type_2(a,b,c); }
if(orange_type == 3) { intersect_type_3(a,b,c); }
if(orange_type == 4) { intersect_type_4(a,b,c); }
if(orange_type == 5) { intersect_type_5(a,b,c); }
if(orange_type == 6) { intersect_type_6(a,b,c); }
draw_arrow(line_point,line_dir, '#0a0');
line_point_approx = [,,];
line_dir_approx = [,,];
for(i=0;i<=2;i++){
line_point_approx[i] = Math.round(line_point[i]*100)/100;
line_dir_approx[i] = Math.round(line_dir[i]*100)/100;
}
document.getElementById("line_equation").innerHTML="(x,y,z) = (" + line_point_approx + ") + u * (" + line_dir_approx + ")";
}
function draw_arrow(v,r,color){
arrow=true;
DrawLine(origin - el*v[0]/2 + el*v[1], origin - el*v[0]/2 + el*v[2],el*(r[1]-r[0]/2),el*(r[2]-r[0]/2),3,color,false);
arrow=false;
}
function intersect_type_1(){
if(a!=0){
if(b!=0){
if(c!=0){
line_point = [0,0,1/c];
line_dir = [1/b,1/b,(-1/c - a/(b*c))];
//scaling
for(i=0;i<=2;i++){
line_dir[i]*=(b/(a+b));
}
} else {
line_point = [(1-b/(a+b))/a,1/(a+b),0];
line_dir = [0,0,1];
}
} else {
if(c!=0){
line_point = [1/a,1/a,0];
line_dir = [-1/a,-1/a,1/c];
} else {
line_point = [1/a,1/a,0];
line_dir = [0,0,1];
}
}
} else {
if(b!=0){
if(c!=0){
line_point = [1/b,1/b,0];
line_dir = [-1/b,-1/b,1/c];
} else {
line_point = [1/b,1/b,0];
line_dir = [0,0,1];
}
} else {
if(c!=0){
line_point = [0,0,1/c];
line_dir = [1,1,0];
} else {
alert("Nanana.. irgendwas muss nicht 0 sein!!");
}
}
}
}
function intersect_type_2(){
if(a!=0){
if(b!=0){
if(c!=0){
line_point = [1,0,(1-a)/c];
line_dir = [-1/b,1/b,(-1/c + a/(b*c))];
//scaling
for(i=0;i<=2;i++){
//line_dir[i]*=(b/(a+b));
}
} else {
line_point = [(1/a)*(1-((b-a*b)/(b-a))),(1-a)/(b-a),0];
line_dir = [0,0,1];
}
} else {
if(c!=0){
line_point = [1/a,1-1/a,0];
line_dir = [-1/a,1/a,1/c];
} else {
line_point = [1/a,1-1/a,0];
line_dir = [0,0,1];
}
}
} else {
if(b!=0){
if(c!=0){
line_point = [1-1/b,1/b,0];
line_dir = [1/b,-1/b,1/c];
} else {
line_point = [1-1/b,1/b,0];
line_dir = [0,0,1];
}
} else {
if(c!=0){
line_point = [0,1,1/c];
line_dir = [1,-1,0];
} else {
alert("Nanana.. irgendwas muss nicht 0 sein!!");
}
}
}
}
function intersect_type_3(){
if(a!=0){
if(b!=0){
if(c!=0){
line_point = [1/a - (1-a)*c/(a*c-a*a),0,(1-a)/(c-a)];
line_dir = [-1/a + c/(a*c-a*a),1/b,-1/(c - a)];
var norm_2=0;
for(i=0;i<=2;i++) { norm_2 += line_dir[i]*line_dir[i] }
alert(norm_2);
for(i=0;i<=2;i++) { line_dir[i] /= Math.sqrt(norm_2) }
} else {
line_point = [1/a,0,1-1/a];
line_dir = [-1/a,1/b,1/a];
}
} else {
if(c!=0){
line_point = [1/a*(1-((c*(a-1))/(-c+a))),0,(a-1)/(-c+a)];
line_dir =[0,1,0];
} else {
line_point = [1/a,0,1-1/a];
line_dir = [0,1,0];
}
}
} else {
if(b!=0){
if(c!=0){
line_point = [1,1/b,0];
line_dir = [-1/c,-1/b,1/c];
} else {
line_point = [1,1/b,0];
line_dir = [-1,0,1];
}
} else {
if(c!=0){
line_point = [1-1/c,0,1/c];
line_dir = [0,1,0];
} else {
alert("Nanana.. irgendwas muss nicht 0 sein!!");
}
}
}
}
function intersect_type_4(){
if(a!=0){
if(b!=0){
if(c!=0){
line_point = [1/a-c/(a*c + a*a),0,1/(c+a)];
line_dir = [-1/a+c/(a*c + a*a),1/b,-1/(a+c)];
} else {
line_point = [1/a,0,1/a];
line_dir = [-1/a,1/b,-1/a];
}
} else {
if(c!=0){
line_point = [1/a*(1-(c/(c+a))),0,1/(c+a)];
line_dir =[0,1,0];
} else {
line_point = [1/a,0,1/a];
line_dir = [0,1,0];
}
}
} else {
if(b!=0){
if(c!=0){
line_point = [0,1/b,0];
line_dir = [1/c,-1/b,1/c];
} else {
line_point = [0,1/b,0];
line_dir = [1,0,1];
}
} else {
if(c!=0){
line_point = [1/c,0,1/c];
line_dir = [0,1,0];
} else {
alert("Nanana.. irgendwas muss nicht 0 sein!!");
}
}
}
}
function intersect_type_5(){
if(a!=0){
if(b!=0){
if(c!=0){
line_point = [1/a,0,0];
line_dir = [1/a-c/(a*b),1/b,1/b];
//scaling
for(i=0;i<=2;i++){
//line_dir[i]*=(b/(a+b));
}
} else {
line_point = [1/a,0,0];
line_dir = [-1/a,1/b,1/b];
}
} else {
if(c!=0){
line_point = [1/a,0,0];
line_dir = [-1/a,1/c,1/c];
} else {
line_point = [1/a,0,0];
line_dir = [0,1,1];
}
}
} else {
if(b!=0){
if(c!=0){
line_point = [0,1/b*(1-(c/(c+b))),1/(b+c)];
line_dir = [1,0,0];
} else {
line_point = [0,1/b,1/b];
line_dir = [1,0,0];
}
} else {
if(c!=0){
line_point = [0,1/c,1/c];
line_dir = [1,0,0];
} else {
alert("Nanana.. irgendwas muss nicht 0 sein!!");
}
}
}
}
function intersect_type_6(){
if(a!=0){
if(b!=0){
if(c!=0){
line_point = [(1-c)/a,0,1];
line_dir = [-1/a + c/(a*b), 1/b, -1/b];
//scaling
for(i=0;i<=2;i++){
//line_dir[i]*=(b/(a+b));
}
} else {
line_point = [1/a,0,1];
line_dir = [-1/a,1/b,-1/b];
}
} else {
if(c!=0){
line_point = [1/a,1,0];
line_dir = [-1/a,-1/c,1/c];
} else {
line_point = [1/a,1,0];
line_dir = [0,-1,1];
}
}
} else {
if(b!=0){
if(c!=0){
line_point = [0,1/b*(1-((c*(b-1))/(b-c))),(b-1)/(b-c)];
line_dir = [1,0,0];
} else {
line_point = [0,1/b,1-1/b];
line_dir = [1,0,0];
}
} else {
if(c!=0){
line_point = [0,1-1/c,1/c];
line_dir = [1,0,0];
} else {
alert("Nanana.. irgendwas muss nicht 0 sein!!");
}
}
}
}
function angle(){
diff_e = e-parseInt(document.getElementById("ld_x").value);
diff_f = f-parseInt(document.getElementById("ld_y").value);
diff_g = g-parseInt(document.getElementById("ld_z").value);
if(diff_e > 1 || diff_e<-1) { e = parseInt(document.getElementById("ld_x").value); }
if(diff_f > 1 || diff_e<-1) { f = parseInt(document.getElementById("ld_y").value); }
if(diff_g > 1 || diff_e<-1) { g = parseInt(document.getElementById("ld_z").value); }
normal_vector = [e,f,g];
color='#aa0';
//document.getElementById("normal_vector").innerHTML="normal vector to ld-plane: (" + normal_vector + ")";
norm_dir = parseInt(0);
for(i=0;i<=2;i++){norm_dir+=line_dir[i] * line_dir[i];}
for(i=0;i<=2;i++){
normal_vector[i]/=Math.sqrt(e*e+f*f+g*g);
line_dir[i]/=Math.sqrt(norm_dir);
}
arrow=true;
draw_arrow([0,0,0],normal_vector, '#00a')
arrow=false;
ctxAngle.clearRect(0,0,CanvasHeight,CanvasWidth);
ctxAngleRot.clearRect(0,0,CanvasHeight,CanvasWidth);
num = 0;
den = 0;
for(i=0;i<=2;i++) {
num+=line_dir[i] * normal_vector[i];
}
x_komisch = num;
num *= num;
den=1-num;
x2 = num/den;
sign = 1;
if(compute_angle(normal_vector, line_dir)>=90) {sign = -1;}
x = sign*Math.sqrt(x2);
norm_x = Math.sqrt(1+x*x);
angle_approx = Math.round(compute_angle(normal_vector, line_dir)*100)/100;
angle_approx_neg = Math.round((180-compute_angle(normal_vector, line_dir))*100)/100;
DrawLineAngle(0,el,3,'#0a0',false);
DrawLineAngle(el/norm_x,x*el/norm_x,3,'#0a0',false);
DrawLineAngleRot(0,el,3,'#0a0',false);
DrawLineAngleRot(el/norm_x,-x*el/norm_x,3,'#0a0',false);
/* ctxAngle.beginPath();
ctxAngle.arc(CanvasWidth/5, CanvasHeight*9/10, el/3, Math.PI/180*(360-compute_angle(normal_vector, line_dir)),true)
ctxAngle.stroke(); */
ctxAngle.font = "30px Arial";
ctxAngle.fillText(angle_approx + '˚',el/10,CanvasHeight*29/30);
ctxAngleRot.font = "30px Arial";
ctxAngleRot.fillText(Math.round(100*(180-compute_angle(normal_vector, line_dir)))/100 + '˚',el/10,CanvasHeight*29/30);
document.getElementById("angle").innerHTML=angle_approx + " or " + angle_approx_neg;
}
function compute_angle(v,w){
num = 0;
den = 1;
norm_v=0;
norm_w=0;
for(i=0;i<=2;i++){
num += v[i]*w[i];
norm_v+=v[i]*v[i];
norm_w+=w[i]*w[i];
}
den=Math.sqrt(norm_v*norm_w)
result = 180*Math.acos(num/den)/Math.PI;
return result;
}
function handleImage(e){
dpr=1;
let reader = new FileReader();
reader.onload = function(event){
let img = new Image();
img.onload = function(){
let ratio = CanvasHeight/img.height;
let height_img = img.height*ratio;
let width_img = img.width*ratio;
ctxAngleBG.drawImage(img,0,0,CanvasWidth,CanvasHeight);
ctxAngleRotBG.drawImage(img,0,0,CanvasWidth,CanvasHeight);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
input.value = null;
}
function compute_schmid(type){
float_dir_1 = [
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
];
float_dir_2 = [
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
];
float_dir_3 = [
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
];
float_dir_4 = [
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
];
normal_vector_float = [
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
[ , , ],
]
;
normal_vector_float_computed = [ , , ];
float_dir_1[0] = [1,1,-1];
float_dir_3[0] = [1,1,1];
for(i=0;i<=2;i++){
float_dir_2[0][i] = -float_dir_1[0][i];
float_dir_4[0][i] = -float_dir_3[0][i];
}
normal_vector_float[0] = [1,-1,0];
float_dir_1[1] = [-1,1,1];
float_dir_3[1] = [-1,1,-1];
for(i=0;i<=2;i++){
float_dir_2[1][i] = -float_dir_1[1][i];
float_dir_4[1][i] = -float_dir_3[1][i];
}
normal_vector_float[1] = [1,1,0];
float_dir_1[2] = [-1,1,1];
float_dir_3[2] = [1,1,-1];
for(i=0;i<=2;i++){
float_dir_2[2][i] = -float_dir_1[2][i];
float_dir_4[2][i] = -float_dir_3[2][i];
}
normal_vector_float[2] = [1,0,1];
float_dir_1[3] = [1,1,1];
float_dir_3[3] = [-1,1,-1];
for(i=0;i<=2;i++){
float_dir_2[3][i] = -float_dir_1[3][i];
float_dir_4[3][i] = -float_dir_3[3][i];
}
normal_vector_float[3] = [1,0,-1];
float_dir_1[4] = [-1,1,1];
float_dir_3[4] = [1,1,1];
for(i=0;i<=2;i++){
float_dir_2[4][i] = -float_dir_1[4][i];
float_dir_4[4][i] = -float_dir_3[4][i];
}
normal_vector_float[4] = [0,-1,1];
float_dir_1[5] = [-1,-1,1];
float_dir_3[5] = [-1,1,-1];
for(i=0;i<=2;i++){
float_dir_2[5][i] = -float_dir_1[5][i];
float_dir_4[5][i] = -float_dir_3[5][i];
}
normal_vector_float[5] = [0,-1,-1];
normal_vector=[,,];
if(type == "nd") {normal_vector = normal_vector_nd}
if(type == "ld") {normal_vector = normal_vector_ld}
if(type == "td") {normal_vector = normal_vector_td}
var phi = [];
for(q=0;q<=5;q++){
phi[q] = Math.PI*compute_angle(normal_vector, normal_vector_float[q])/180;
}
var alpha = [
[,,,],
[,,,],
[,,,],
[,,,],
[,,,],
[,,,],
];
for(q=0;q<=5;q++){
alpha[q][0] = Math.PI*compute_angle(float_dir_1[q],normal_vector)/180;
alpha[q][1] = Math.PI*compute_angle(float_dir_2[q],normal_vector)/180;
alpha[q][2] = Math.PI*compute_angle(float_dir_3[q],normal_vector)/180;
alpha[q][3] = Math.PI*compute_angle(float_dir_4[q],normal_vector)/180;
}
ot = orange_type-1;
for(p=1;p<=4;p++){
for(q=1;q<=6;q++){
schmid[q-1][p-1] = Math.round(100*Math.cos(phi[q-1]) * Math.cos(alpha[q-1][p-1]))/100;
schmid_id = 'w'+q+'f'+p;
document.getElementById(schmid_id).innerHTML = schmid[q-1][p-1];
}
}
/* document.getElementById('schmid_1').innerHTML = schmid[orange_type][0];
document.getElementById('schmid_2').innerHTML = schmid[orange_type][1];
document.getElementById('schmid_3').innerHTML = schmid[orange_type][2];
document.getElementById('schmid_4').innerHTML = schmid[orange_type][3];
draw_arrow([0.5,0.5,0.5],normal_vector_float,'#000')
start = [0.5 + float_dir_2[0]/2,0.5 + float_dir_2[1]/2,0.5 + float_dir_2[2]/2];
draw_arrow(start,float_dir_1,'#fa0')
start = [0.5 + float_dir_4[0]/2,0.5 + float_dir_4[1]/2,0.5 + float_dir_4[2]/2];
draw_arrow(start,float_dir_3,'#fa0') */
}
function compute_planes() {
angles = [ , , ]
angles[0] = Math.PI*parseFloat(document.getElementById('angle_1').value)/180;
angles[1] = Math.PI*parseFloat(document.getElementById('angle_2').value)/180;
angles[2] = Math.PI*parseFloat(document.getElementById('angle_3').value)/180;
matrix = [
[Math.cos(angles[0])*Math.cos(angles[2]) - Math.sin(angles[0])*Math.sin(angles[2])*Math.cos(angles[1]),Math.sin(angles[0])*Math.cos(angles[2]) + Math.cos(angles[0])*Math.sin(angles[2])*Math.cos(angles[1]), Math.sin(angles[2])*Math.sin(angles[1])],
[-Math.cos(angles[0])*Math.sin(angles[2]) - Math.sin(angles[0])*Math.cos(angles[2])*Math.cos(angles[1]),-Math.sin(angles[0])*Math.sin(angles[2]) + Math.cos(angles[0])*Math.cos(angles[2])*Math.cos(angles[1]), Math.cos(angles[2])*Math.sin(angles[1])],
[Math.sin(angles[0])*Math.sin(angles[1]), -Math.cos(angles[0])*Math.sin(angles[1]), Math.cos(angles[1])]
]
a = 10*matrix[0][0];
b = 10*matrix[0][1];
c = 10*matrix[0][2];
e = 10*matrix[1][0];
f = 10*matrix[1][1];
g = 10*matrix[1][2];
h = 10*matrix[2][0];
i = 10*matrix[2][1];
j = 10*matrix[2][2];
normal_vector_td= [a,b,c];
normal_vector_ld= [e,f,g];
normal_vector_nd= [h,i,j];
document.getElementById("td_x").value = Math.round(100*matrix[2][0])/10;
document.getElementById("td_y").value = Math.round(100*matrix[2][1])/10;
document.getElementById("td_z").value = Math.round(100*matrix[2][2])/10;
document.getElementById("ld_x").value = Math.round(100*matrix[1][0])/10;
document.getElementById("ld_y").value = Math.round(100*matrix[1][1])/10;
document.getElementById("ld_z").value = Math.round(100*matrix[1][2])/10;
document.getElementById("nd_x").value = Math.round(100*matrix[0][0])/10;
document.getElementById("nd_y").value = Math.round(100*matrix[0][1])/10;
document.getElementById("nd_z").value = Math.round(100*matrix[0][2])/10;
//alert(matrix[0] + "\r\n" + matrix[1] + "\r\n" + matrix[2]);
}
function download_csv(){
angles = [ , , ]
angles[0] = parseFloat(document.getElementById('angle_1').value);
angles[1] = parseFloat(document.getElementById('angle_2').value);
angles[2] = parseFloat(document.getElementById('angle_3').value);
var name = 'euler_angles:' + angles[0] + ';' + angles[1] + ';' + angles[2];
let csvContent = "data:text/csv;charset=utf-8";
var text;
text=', ,[110], [-110],[101],[-101],[011],[0-10]\r\n';
text+='[-1 1 1], ' + schmid[1][0] + ', -, ' + schmid[2][0] + ',-,-,' + schmid[4][0] + '\r\n';
text+='[1 -1 -1],' + schmid[1][1] + ',-,' + schmid[2][1] + ',-,-,' + schmid[4][1] + '\r\n';
text+='[-1 1 -1],' + schmid[1][2] + ',-,' + schmid[2][2] + ',-,-,' + schmid[4][2] + '\r\n';
text+='[1 -1 1],' + schmid[1][3] + ',-,' + schmid[2][3] + ',-,-,' + schmid[4][3] + '\r\n';
text+='[1 1 -1],-,' + schmid[0][0] + ',-,' + schmid[3][0] + ',' + schmid[5][0] + ',-' + '\r\n';
text+='[-1 -1 1],-,' + schmid[0][1] + ',-,' + schmid[3][1] + ',' + schmid[5][1] + ',-' + '\r\n';
text+='[1 1 1],-,' + schmid[0][2] + ',-,' + schmid[3][2] + ',' + schmid[5][2] + ',-' + '\r\n';
text+='[-1 -1 -1],-,' + schmid[0][3] + ',-,' + schmid[3][3] + ',' + schmid[5][3] + ',-' + '\r\n';
csvContent+=text;
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "schmid_factors;" + name + ".csv");
document.body.appendChild(link);
link.click();
}
</script><canvas id="canvas" style="height: 670px; width: 670px; position: absolute; left: 400px; border: 2px solid; background: rgb(255, 255, 255);" width="670" height="670"></canvas><canvas id="canvas" style="height: 670px; width: 670px; position: absolute; left: 1080px; border: 2px solid; background: rgb(255, 255, 255);" width="670" height="670"></canvas><canvas id="canvas" style="height: 670px; width: 670px; position: absolute; left: 1080px; border: 2px solid;" width="670" height="670"></canvas><canvas id="canvas" style="height: 670px; width: 670px; position: absolute; left: 1760px; border: 2px solid; background: rgb(255, 255, 255);" width="670" height="670"></canvas><canvas id="canvas" style="height: 670px; width: 670px; position: absolute; left: 1760px; border: 2px solid;" width="670" height="670"></canvas>
Orange Ebene:<br>
<input type="button" style="width:5em" value="(110)" onclick="draw('orange',2,this.value)">
<input type="button" style="width:5em" value="(-110)" onclick="draw('orange',1,this.value)">
<input type="button" style="width:5em" value="(101)" onclick="draw('orange',3,this.value)"><br>
<input type="button" style="width:5em" value="(-101)" onclick="draw('orange',4,this.value)">
<input type="button" style="width:5em" value="(011)" onclick="draw('orange',6,this.value)">
<input type="button" style="width:5em" value="(0-11)" onclick="draw('orange',5,this.value)"><br>
Winkel:
<input style="width:3em" id="angle_1" value="221">
<input style="width:3em" id="angle_2" value="158">
<input style="width:3em" id="angle_3" value="18">
<input type="button" value="Compute Planes" onclick="compute_planes()"><br>
ND-Ebene (0 0 1):
<input style="width:4em" id="nd_x" value="-9.1">
<input style="width:4em" id="nd_y" value="-4.1">
<input style="width:4em" id="nd_z" value="1.2">
<input type="button" value="Draw" onclick="draw('nd')"><br>
LD-Ebene (0 1 0):
<input style="width:4em" id="ld_x" value="-3.5">
<input style="width:4em" id="ld_y" value="8.7">
<input style="width:4em" id="ld_z" value="3.6">
<input type="button" value="Draw" onclick="draw('ld')"><br>
TD-Ebene (1 0 0):
<input style="width:4em" id="td_x" value="-2.5">
<input style="width:4em" id="td_y" value="2.8">
<input style="width:4em" id="td_z" value="-9.3">
<input type="button" value="Draw" onclick="draw('td')"><br>
<input type="button" onclick="intersect()" value="intersection line of orange and nd:"><br> <span id="line_equation"></span><br>
<input type="button" onclick="angle()" value="compute normal vector and angle">
<table>
<tbody><tr>
<td> angle: </td>
<td align="center"><span id="angle"></span></td>
</tr>
</tbody></table>
<input type="file" id="selectedImage" value="Background Image"><br>
<input type="button" onclick="compute_schmid('ld')" value="Compute Schmidfaktor (LD)"><br>
<input type="button" onclick="compute_schmid('nd')" value="Compute Schmidfaktor (ND)"><br>
<input type="button" onclick="compute_schmid('td')" value="Compute Schmidfaktor (TD)"><br>
<!--
Faktor 1: <span id="schmid_1"></span><br/>
Faktor 2: <span id="schmid_2"></span><br/>
Faktor 3: <span id="schmid_3"></span><br/>
Faktor 4: <span id="schmid_4"></span><br/>-->
<style>
table,td {
border: 1px solid black;
}
td {
width:40px;
height:2em;
text-align:center;
}
</style>
<table>
<tbody><tr>
<td>
</td><td> (110)
</td><td> (<span style="text-decoration:overline">1</span>10)
</td><td> (101)
</td><td> (<span style="text-decoration:overline">1</span>01)
</td><td> (011)
</td><td> (0<span style="text-decoration:overline">1</span>1)
</td></tr>
<tr>
<td> [<span style="text-decoration:overline">1</span>11]
</td><td id="w2f1">
</td><td> -
</td><td id="w3f1">
</td><td> -
</td><td> -
</td><td id="w5f1">
</td></tr>
<tr>
<td> [1<span style="text-decoration:overline">1</span><span style="text-decoration:overline">1</span>]
</td><td id="w2f2">
</td><td> -
</td><td id="w3f2">
</td><td> -
</td><td> -
</td><td id="w5f2">
</td></tr>
<tr>
<td> [<span style="text-decoration:overline">1</span>1<span style="text-decoration:overline">1</span>]
</td><td id="w2f3">
</td><td> -
</td><td id="w3f3">
</td><td> -
</td><td> -
</td><td id="w5f3">
</td></tr>
<tr>
<td> [1<span style="text-decoration:overline">1</span>1]
</td><td id="w2f4">
</td><td> -
</td><td id="w3f4">
</td><td> -
</td><td> -
</td><td id="w5f4">
</td></tr>
<tr>
<td> [11<span style="text-decoration:overline">1</span>]
</td><td> -
</td><td id="w1f1">
</td><td> -
</td><td id="w4f1">
</td><td id="w6f1">
</td><td> -
</td></tr>
<tr>
<td> [<span style="text-decoration:overline">1</span><span style="text-decoration:overline">1</span>1]
</td><td> -
</td><td id="w1f2">
</td><td> -
</td><td id="w4f2">
</td><td id="w6f2">
</td><td> -
</td></tr>
<tr>
<td> [111]
</td><td> -
</td><td id="w1f3">
</td><td> -
</td><td id="w4f3">
</td><td id="w6f3">
</td><td> -
</td></tr>
<tr>
<td> [<span style="text-decoration:overline">1</span><span style="text-decoration:overline">1</span><span style="text-decoration:overline">1</span>]
</td><td> -
</td><td id="w1f4">
</td><td> -
</td><td id="w4f4">
</td><td id="w6f4">
</td><td> -
</td></tr>
</tbody></table>
<p>
<input type="button" value="Download table" onclick="download_csv()"><br>
<input type="button" value="Clear" onclick="clear_canvas()"><br>
<script>
var input = document.getElementById('selectedImage');
input.addEventListener('change', handleImage, false);
compute_planes();
</script>
</p>
</body></html>