Skip to content

Instantly share code, notes, and snippets.

@Holger-Will

Holger-Will/übergang.html

Created June 11, 2019 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Holger-Will/74e39162d42a3208a7b0b9b194da92a3 to your computer and use it in GitHub Desktop.
Save Holger-Will/74e39162d42a3208a7b0b9b194da92a3 to your computer and use it in GitHub Desktop.
Download ZIP
kanalübergang
Raw
übergang.html
<html>
<head>
<title></title>
<meta content="">
<style>
.r1{stroke:#999}
.r2{stroke:#333;}
</style>
</head>
<body>
<svg viewBox="0 0 1500 500" width="1000">
<rect x="0" y="0" width="500" height="500" fill="none" stroke="black"/>
<rect x="500" y="0" width="750" height="500" fill="none" stroke="black"/>
<g id="drawing" fill="none" stroke-width="4">
</g>
</svg>
width: <input onkeyup="refresh()" value="550" id="width"/>
height: <input onkeyup="refresh()" value="550" id="height"/>
width2: <input onkeyup="refresh()" value="610" id="width2"/>
height2: <input onkeyup="refresh()" value="305" id="height2"/>
offsetX: <input onkeyup="refresh()" value="0" id="offsetX"/>
offsetY: <input onkeyup="refresh()" value="122.5" id="offsetY"/>
length: <input onkeyup="refresh()" value="300" id="ll"/>
rahmen1: <input onkeyup="refresh()" value="P20" id="rahmen1"/>
rahmen2: <input onkeyup="refresh()" value="P20" id="rahmen2"/>
<script>
function refresh(){
//drawRed(Number(width.value),Number(height.value),Number(width2.value),Number(height2.value),Number(offsetX.value),Number(offsetY.value),Number(ll.value),rahmen1.value,rahmen2.value)
calcPoints(Number(width.value),Number(height.value),Number(width2.value),Number(height2.value),Number(offsetX.value),Number(offsetY.value),Number(ll.value))
}
function calcPoints(w,h,w2,h2,ox,oy,l){
var points = []
addRectPoints(w,h,--l/2,0,0,points)
addRectPoints(w,h,-l/2+50,0,0,points)
addRectPoints(w2,h2,l/2-50,ox,oy,points)
addRectPoints(w2,h2,l/2-50,ox,oy,points)
draw(points)
}
function addRectPoints(w,h,z,ox,oy,points){
points.push({x:-w/2-ox,y:-h/2-oy,z:z})
points.push({x:w/2-ox,y:-h/2-oy,z:z})
points.push({x:w/2-ox,y:h/2-oy,z:z})
points.push({x:-w/2-ox,y:h/2-oy,z:z})
}
function makeMin(f){
return (accu,item)=>item[f] < accu ? item.x : accu
}
function makeMax(f){
return (accu,item)=>item[f] > accu ? item.x : accu
}
function draw(points){
console.log(points)
var minX = points.reduce(makeMin("x"), Infinity)
var maxX = points.reduce(makeMax("x"), -Infinity)
var minY = points.reduce(makeMin("y"), Infinity)
var maxY = points.reduce(makeMax("y"), -Infinity)
var minZ = points.reduce(makeMin("z"), Infinity)
var maxZ = points.reduce(makeMax("z"), -Infinity)
drawing.innerHTML=""
// view1
var bw = (maxX-minX)
var bh = (maxY-minY)
var d1 = 300 / Math.max(bw,bh)
var w1 = points[1].x - points[0].x
var h1 = points[2].y - points[1].y
var rect1 = rect(250 + points[0].x*d1,250 + points[0].y*d1, w1*d1, h1*d1)
rect1.classList.add("r1")
var w2 = points[9].x - points[8].x
var h2 = points[10].y - points[9].y
var rect2 = rect(250 + points[8].x*d1,250 + points[8].y*d1, w2*d1, h2*d1)
rect2.classList.add("r2")
drawing.appendChild(rect1)
drawing.appendChild(rect2)
}
function drawRed(w,h,w2,h2,ox,oy,l,r1,r2){
var m1=Math.max(w,h)
var m2=Math.max(w2,h2)
var dx=300/Math.max(m1,m2)
console.log(w,h,w2,h2,ox,oy,l,r1,r2)
drawing.innerHTML=""
var rect1 = rect(250-(w/2)*dx,250-(h/2)*dx,w*dx,h*dx)
rect1.classList.add("r1")
var rect2 = rect(250-(w2/2)*dx-ox*dx,250-(h2/2)*dx-oy*dx,w2*dx,h2*dx)
rect2.classList.add("r2")
drawing.appendChild(rect1)
drawing.appendChild(rect2)
}
function rect(x,y,w,h){
var elem = document.createElementNS("http://www.w3.org/2000/svg","rect")
elem.setAttribute("x",x)
elem.setAttribute("y",y)
elem.setAttribute("width",w)
elem.setAttribute("height",h)
return elem
}
refresh()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment