振り子運動ver2|HTML5

振り子運動ver2|HTML5

振り子運動ver2|HTML5(HTML5, JavaScript, CSS3) : デモ

振り子運動ver2|HTML5(HTML5, JavaScript, CSS3) : ZIPファイル(4kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8" />
        <title>振り子運動</title>
        <link href="css/base.css" rel="stylesheet" type="text/css">
        <script src="js/devicecheck.js"></script>
        <script src="js/base.js"></script>
    </head>
    <body>
        <div id="contents">
            <canvas id="canvas" width="275" height="275"></canvas>
        </div>
    </body>
</html>

2.CSS

@charset "utf-8";
 
body
{
    margin:0;
    padding:0;
    background-color: #fff;
    font-family:Helvetica, HiraKakuProN-W3, sans-serif; 
    font-size:12px;
    color:#000;
}
 
#contents
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height:275px;
    border: 1px solid #000;
    overflow:hidden;
}
 
#canvas
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height:275px;
}

3.JavaScript

base.js

window.addEventListener("load", init, false);
 
function init()
{
    var ball,
    rad = 0,
    g = 9.8,
    v = 0,
    l = 0,
    offsetRadian = 90,
    fl = 250,
    setCenterCz = 0,
    theCanvas = null,
    ctx = null,
    offsetX = 0,
    offsetY = 0,
    numBalls = 1,
    balls = [],
    radian = 45 * Math.PI / 180,
    v = 0;
         
    theCanvas = document.getElementById("canvas");
    ctx = theCanvas.getContext("2d");
    offsetX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
    offsetX = Number(offsetX.replace('px',''));
 
    offsetY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
    offsetY = Number(offsetY.replace('px',''));
     
    l = offsetY / 2;
     
    for(var i = 0; i < numBalls; i++)
    {
        var ball =
        {
            red : Math.floor(Math.random() * 256),
            green : Math.floor(Math.random() * 256),
            blue : Math.floor(Math.random() * 256),
            xpos : 0,
            ypos: 0,
            zpos : 0,
            vpX : 0,
            vpY : 0,
            cX : 0,
            cY : 0,
            cZ : 0,
            vx : 0,
            vy : 0,
            vz : 0,
            x : 0,
            y : 0,
            z : 0,
            na : null,
            r : 10,
            d : 0,
            scaleX : 0,
            scaleY : 0
        };
         
        balls.push(ball);
    }
 
    balls[0].vpX = offsetX / 2;
    balls[0].vpY = 0;
    setBall();
    function setBall()
    {
        ctx.fillStyle="#000000";
        ctx.beginPath();
        //context.arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) 
        ctx.arc(balls[0].x, balls[0].y, balls[0].r, 0, Math.PI*2, true);
        ctx.fill();
        ctx.stroke();
    }
     
    setInterval(onEnter, 1000/30);
     
    function onEnter()
    {
        v += 0.3;
        //rotateX(balls[0]);
        rotateZ(balls[0]);
        perspective(balls[0],ctx);
        ctx.clearRect(0,0,300,300);
        setBall();
        ctx.fillStyle="#000000";
        ctx.moveTo(balls[0].x, balls[0].y);
        ctx.lineTo(offsetX / 2, 0);
        ctx.fill();
        ctx.stroke();
    }
     
    function rotateX(ball)
    {
        var rad = radian * Math.cos(Math.sqrt(g / l) * v);
        ball.zpos = l * Math.sin(rad);
        ball.ypos = l * Math.cos(rad);
    }
         
    function rotateZ(ball)
    {
        var rad = radian * Math.cos(Math.sqrt(g / l) * v);
        ball.xpos = l * Math.sin(rad);
        ball.ypos = l * Math.cos(rad);
    }
     
    function perspective(ball, ctx)
    {
        var scale = fl / (fl + ball.zpos + ball.cZ);
        ball.scaleX = ball.scaleY = scale;
        ball.x = ball.xpos * scale;
        ball.y = ball.ypos * scale;
        ball.x += ball.vpX;
        ball.y += ball.vpY;
        ball.r = scale * 10;
    }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です