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.
97 lines
2.6 KiB
97 lines
2.6 KiB
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>First Cube</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<button onclick="run()" style="position: fixed; top: 0px; right: 0px;">start</button>
|
||
|
|
<canvas id="fc-cv-0" style="z-index: 1; position: fixed; top: 0px; left: 0px"></canvas>
|
||
|
|
<canvas id="fc-cv-1" style="z-index: 0; position: fixed; top: 0px; left: 0px"></canvas>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
// 相似的注释在First_Cube.py里面都有,就不写了
|
||
|
|
var points = [[-1,1,-1],
|
||
|
|
[1,1,-1],
|
||
|
|
[-1,-1,-1],
|
||
|
|
[1,-1,-1],
|
||
|
|
[-1,1,1],
|
||
|
|
[1,1,1],
|
||
|
|
[-1,-1,1],
|
||
|
|
[1,-1,1]]
|
||
|
|
var pit = [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]
|
||
|
|
var angle = 0
|
||
|
|
var speed = 1
|
||
|
|
var fps = 60
|
||
|
|
var dist = [5,4]
|
||
|
|
var st = 1/fps*1000
|
||
|
|
var apf = Math.PI * speed / fps
|
||
|
|
// init canvas
|
||
|
|
var cvs = [document.getElementById('fc-cv-0'),document.getElementById('fc-cv-1')]
|
||
|
|
for(i in cvs){
|
||
|
|
cvs[i].width = 800;
|
||
|
|
cvs[i].height = 600;
|
||
|
|
}
|
||
|
|
var ctx = [cvs[0].getContext('2d'),cvs[1].getContext('2d')]
|
||
|
|
var offset = [400,600]
|
||
|
|
showingCv = 0
|
||
|
|
hiddenCv = 1
|
||
|
|
|
||
|
|
function drawLine(x1,y1,x2,y2,ctx) {
|
||
|
|
ctx.beginPath()
|
||
|
|
ctx.lineWidth='5'
|
||
|
|
ctx.color='black'
|
||
|
|
ctx.moveTo(x1,y1)
|
||
|
|
ctx.lineTo(x2,y2)
|
||
|
|
ctx.stroke()
|
||
|
|
}
|
||
|
|
|
||
|
|
function rotate() {
|
||
|
|
angle += apf
|
||
|
|
if (angle > 2*Math.PI){
|
||
|
|
angle -= 2*Math.PI
|
||
|
|
}
|
||
|
|
var radius = Math.sqrt(2)
|
||
|
|
var center = [0,0]
|
||
|
|
pairs = [[0,4,-Math.PI/4], [1,5,Math.PI/4], [2,6,-Math.PI*3/4], [3,7,Math.PI*3/4]]
|
||
|
|
for (pair in pairs){
|
||
|
|
center = [radius*Math.sin(angle+pairs[pair][2]),radius*Math.cos(angle+pairs[pair][2])]
|
||
|
|
// x
|
||
|
|
points[pairs[pair][0]][0] = center[0]
|
||
|
|
points[pairs[pair][1]][0] = center[0]
|
||
|
|
// y
|
||
|
|
points[pairs[pair][0]][1] = center[1]
|
||
|
|
points[pairs[pair][1]][1] = center[1]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw() {
|
||
|
|
for (pt in pit){
|
||
|
|
rate = dist[1]/(dist[0]+points[pt][1])
|
||
|
|
scale = 200
|
||
|
|
pit[pt][0] = points[pt][0]*rate*scale
|
||
|
|
pit[pt][1] = points[pt][2]*rate*scale
|
||
|
|
}
|
||
|
|
ctx[hiddenCv].clearRect(0, 0, cvs[hiddenCv].width, cvs[hiddenCv].height)
|
||
|
|
var dcps = [[1,[0,3,5]],[2,[0,3,6]],[4,[0,5,6]], [7,[3,5,6]]]
|
||
|
|
for (t in dcps){
|
||
|
|
var dcp=dcps[t][0]
|
||
|
|
var nps=dcps[t][1]
|
||
|
|
for (np in nps){
|
||
|
|
drawLine(pit[dcp][0]+400,pit[dcp][1]+300,pit[nps[np]][0]+400,pit[nps[np]][1]+300,ctx[hiddenCv])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
cvs[showingCv].style.zIndex = 0
|
||
|
|
cvs[hiddenCv].style.zIndex = 1
|
||
|
|
showingCv,hiddenCv = hiddenCv,showingCv
|
||
|
|
}
|
||
|
|
|
||
|
|
function run() {
|
||
|
|
document.intervals = []
|
||
|
|
t = setInterval(rotate,st)
|
||
|
|
document.intervals.push(t)
|
||
|
|
t = setInterval(draw,st)
|
||
|
|
document.intervals.push(t)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</html>
|