0

我通过 mrdoob 找到了这个脚本，它生成了一个行网。我已经弄清楚了一条线的起点和终点。现在我想从这些形状中挤出面，但是我只有线条和顶点。我正在尝试通读一些半边理论，但我认为我不太了解它。

是否要沿着一条线直到它变成一个矩形，检查它是否与一条线相交或细分？我需要一个正确的方向。

// Based on Jared Tarbell's Substrate algorithm concept.
// http://www.complexification.net/gallery/machines/substrate/index.php

var Boid = function ( x, y, angle ) {

    this.x = x;
    this.y = y;

    this.angle = Math.pow( Math.random(), 20 ) + angle;
    this.dx = Math.cos( this.angle );
    this.dy = Math.sin( this.angle );

    this.life = Math.random() * 100 + 100;
    this.dead = false;

    this.update = function () {

        context.strokeStyle = '#000000';
        context.beginPath();
        context.moveTo( this.x, this.y );

        this.x += this.dx * 2;
        this.y += this.dy * 2;
        this.life -= 2;

        context.lineTo( this.x, this.y );
        context.stroke();

        var index = ( Math.floor( this.x ) + width * Math.floor( this.y ) ) * 4;

        if ( this.life <= 0 ) this.kill();
        if ( data[ index + 3 ] > 0 ) this.kill();

        if ( this.x < 0 || this.x > width ) this.kill();                        
        if ( this.y < 0 || this.y > height ) this.kill();

    }

    this.kill = function () {

        boids.splice( boids.indexOf( this ), 1 );
        this.dead = true;

    }

}

var width = window.innerWidth;
var height = window.innerHeight;

var canvas = document.getElementById( 'world' );
canvas.width = width;
canvas.height = height;

var context = canvas.getContext( '2d' );
var image, data;

var boids = [];
boids.push( new Boid( width / 2, height / 2, Math.random() * 360 * Math.PI / 180 ) );

setInterval( function () {

    image = context.getImageData( 0, 0, width, height );
    data = image.data;

    for ( var i = 0; i < boids.length; i ++ ) {

        var boid = boids[ i ];
        boid.update();

        if ( !boid.dead && Math.random() > 0.5 && boids.length < 500 ) {

            boids.push( new Boid( boid.x, boid.y, ( Math.random() > 0.5 ? 90 : - 90 ) * Math.PI / 180 + boid.angle ) );

        }

    }

}, 1000 / 60 );
4

1 回答 1

0

这看起来比我强硬更复杂。我不确定这是否是您要求的答案，但可以帮助您决定下一步：

如果您必须使用此算法：我认为您将需要跟踪构成边缘的每一对点：Boid函数开头的第一个点和Boid被杀死时的第二个点；两个点（或 x1、x2、y1 和 y2 值）都保存在一个新edge对象中，该对象将添加到一个edges数组中（每个edge点都是死亡的灵魂Boid）。

在应用半边理论之前有两个问题：你有一个边数组，但你需要知道哪些其他边连接到给定边的开始或结束。另一个问题是两个 Boid 之间的“碰撞”只影响当前正在更新的 Boid，它在碰撞过程中被杀死。为了使用半边理论，您必须“通知”另一个 Boid/边缘有关此碰撞并在该点拆分它：碰撞点是三​​个边缘的顶点，一个发生碰撞，两个在被碰撞的那个被分裂了。

另请注意，形状（面）不一定由四个边缘组成，我打开了您提供的链接，那里有很多带有树和五个边缘的形状。

如果您可以使用不同的算法来生成网格，那么您可能会更好地表示边缘和顶点，这将帮助您找到构成每个形状的“角”。

于 2012-12-08T16:19:41.443 回答