add:add html port of First_Cube

5 years ago · 3e3c88e03e
1 changed files with 97 additions and 0 deletions
--- a/First_Cube/First_Cube.html
+++ b/First_Cube/First_Cube.html
@ -0,0 +1,97 @@
 <!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>