プログラミングとイラストレーション » 二重振り子運動(擬似)|HTML5
プログラミングとイラストレーション > HTML5 > 二重振り子運動(擬似)|HTML5

二重振り子運動(擬似)|HTML5

二重振り子運動(擬似)|HTML5

二重振り子運動(擬似)|HTML5(HTML5, JavaScript, CSS3) : デモ

二重振り子運動(擬似)|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/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,
    g = 9.8,
    fl = 250,
    setCenterCz = 0,
    theCanvas,
    ctx,
    offsetX = 0,
    offsetY = 0,
    numBalls = 2,
    balls = [],
    radian = 45 * Math.PI / 180,
    radian2 = 85 * Math.PI / 180,
    velocity = 0,
    velocity2 = 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',''));
      
    var length1 = 70,
    length2 = 70;
      
    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[i] = ball;
    }
  
    balls[0].vpX = offsetX / 2;
    balls[0].vpY = 0;
     
    balls[1].vpX = offsetX / 2;
    balls[1].vpY = 0;
     
    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();
         
        balls[1].vpX = balls[0].x;
        balls[1].vpY = balls[0].y;
        ctx.fillStyle="#000000";
        ctx.beginPath();
        //context.arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) 
        ctx.arc(balls[1].x, balls[1].y, balls[1].r, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.stroke();
    }
     
    animation();
     
    function animation()
    {
        onEnter();
        requestAnimationFrame(animation);
    }
      
    function onEnter()
    {
        ctx.clearRect(0, 0, 300, 300);
        velocity += 0.1;
        velocity2 += 0.1;
         
        rotateZ(balls[0], length1, velocity, radian);
        perspective(balls[0], ctx);
        setBall();
        
        ctx.fillStyle = "#000000";
        ctx.moveTo(balls[0].x, balls[0].y);
        ctx.lineTo(offsetX / 2, 0);
        ctx.fill();
        ctx.stroke();
         
        rotateZ(balls[1], length2, velocity2, radian2);
        perspective(balls[1], ctx);
 
        ctx.fillStyle = "#000000";
        ctx.moveTo(balls[1].x, balls[1].y);
        ctx.lineTo(balls[0].x, balls[0].y);
        ctx.fill();
        ctx.stroke();
         
    }
          
    function rotateZ(ball, l, v, radian)
    {
        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;
    }
}
 
// 各ブラウザ対応
window.requestAnimationFrame = (function()
{
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback)
    {
        window.setTimeout(callback, 1000/60);
    };
}());

コメントを残す

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

コメントフィード

トラックバック URL : http://www.htmlcode.jp/%e4%ba%8c%e9%87%8d%e6%8c%af%e3%82%8a%e5%ad%90%e9%81%8b%e5%8b%95%ef%bc%88%e6%93%ac%e4%bc%bc%ef%bc%89%ef%bd%9chtml5/trackback/