0

グリッド内に一連のほぼ正方形のポリゴンを生成するインタラクティブなデジタル キャンバスを作成したいと考えています。以下の jsFiddle は、ポリゴンの 2x2 グリッド システムを示しています。コードを調べるか、ページを更新すると、中央の頂点が、隣接する 4 つのポリゴンが共有する半ランダムに生成されたポイントであることがわかります。

このグリッドを 16x16 付近にスケーリングし、内側の各頂点を半ランダムに生成したいと考えていますが、現在の状態では、完成したコードは非効率的で、柔軟性がなく、スケーラブルではありません。比較的簡単な解決策があることは知っていますが、for ループと配列の経験がないことを考えると、現時点では私の範囲を超えています。どんな助けでも大歓迎です。

http://jsfiddle.net/4Qbt2/

HTML:

<body>  
    <canvas id="myCanvas" width="200" height="200"></canvas>
</body>

JS:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var randomX = Math.floor((Math.random()-0.5)*30);
var randomY = Math.floor((Math.random()-0.5)*30);

var x1 = canvas.width/2 + randomX;
var x2 = canvas.width;
var y1 = canvas.height/2 + randomY;
var y2 = canvas.height;


//background
context.beginPath();
context.rect(0,0,canvas.height,canvas.width);
context.fillStyle = '#A3DCEE';
context.fill();


//top left polygon
context.beginPath();
context.lineTo(0,0); //top left quadrant
context.lineTo(canvas.width/2,0); //top right quadrant
context.lineTo(x1, y1); //bottom right quadrant
context.lineTo(0, canvas.width/2); //bottom left quadrant

context.closePath();
context.fillStyle = '#ABE2EF';
context.fill();


//top right polygon
context.beginPath();
context.lineTo(x2/2,0); //top left quadrant
context.lineTo(x2,0); //top right quadrant
context.lineTo(x2, y2/2); //bottom right quadrant
context.lineTo(x1, y1); //bottom left quadrant

context.closePath();
context.fillStyle = '#A3DCEE';
context.fill();


//bottom left polygon
context.beginPath();
context.lineTo(0,y2/2); //top left quadrant
context.lineTo(x1,y1); //top right quadrant
context.lineTo(x2/2, y2); //bottom right quadrant
context.lineTo(0, y2); //bottom left quadrant

context.closePath();
context.fillStyle = '#8CD6F6';
context.fill();


//bottom right polygon
context.beginPath();
context.lineTo(x1,y1); //top left quadrant
context.lineTo(x2,y2/2); //top right quadrant
context.lineTo(x2, y2); //bottom right quadrant
context.lineTo(x2/2, y2); //bottom left quadrant

context.closePath();
context.fillStyle = '#85D2ED';
context.fill();

CSS:

html, body {
    background-color: #fff;
     width:  100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
    }

canvas {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    }
4

1 に答える 1

0

少しランダムなオフセット交点でグリッドを描画する方法

ここに画像の説明を入力

グリッド上の各交点を円の中心点と考えてください。

次に、ランダムな半径とランダムな角度を使用して、その中心点からのオフセットを計算できます。

これにより、各交点がランダムにオフセットされます。

以下は、「通常の」位置から 0 ～ 2.5 ピクセルの「ぐらつき」でグリッドポイントを計算する方法の例です。

  // make each grid cell's side 20px 
  // (you can alter this to fit your needs)

  var sideLength=20;


  // allow the point to wobble up to 2.5 pixels from its "usual" position

  var radius=2.5*Math.random();


  // allow that point to wobble at a random angle around its "usual" position

  var radianAngle=2*Math.PI*Math.random();


  // do the calculation of the new wobbled intersection point
  // the x & y are the cell's horizontal(x) and vertical(y) position on the grid

  var cx=x*sideLength+radius*Math.cos(radianAngle);
  var cy=y*sideLength+radius*Math.sin(radianAngle);

ここにサンプルコードとフィドルがあります: http://jsfiddle.net/m1erickson/Wqhb9/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // declare an array
    var points=new Array(17);
    for(var i=0;i<points.length;i++){
        points[i]=new Array(17);
    }

    var sideLength=20;

    // fill the array with 
    for(var y=0;y<17;y++){
        for(var x=0;x<17;x++){
            // create a random semi-offset grid point
            var radius=2.5*Math.random();
            var radianAngle=2*Math.PI*Math.random();
            var cx=x*sideLength+radius*Math.cos(radianAngle);
            var cy=y*sideLength+radius*Math.sin(radianAngle);
            // if this is a sidepoint, don't offset (sides are straight)
            if(x==0){cx=0;}
            if(y==0){cy=0;}
            if(x==16){cx=x*sideLength;}
            if(y==16){cy=y*sideLength;}
            // add this gridpoint to the points array
            points[x][y]={x:cx+10,y:cy+10};
        }
    }

    // stroke the 4 sides of each cell
    for(var y=0;y<16;y++){
        for(var x=0;x<16;x++){
            strokeCell(x,y);
        }
    }

    // draw the 4 sides of the cell
    function strokeCell(x,y){
        var pt0=points[x][y];
        var pt1=points[x+1][y];
        var pt2=points[x+1][y+1];
        var pt3=points[x][y+1];

        ctx.beginPath();
        ctx.moveTo(pt0.x,pt0.y);
        ctx.lineTo(pt1.x,pt1.y);
        ctx.lineTo(pt2.x,pt2.y);
        ctx.lineTo(pt3.x,pt3.y);
        ctx.closePath();
        ctx.stroke();
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=400 height=400></canvas>
</body>
</html>
于 2013-08-18T04:33:40.850 に答える