Question

我发现这个script是由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 );

Answer 1

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

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

在应用half-edges theory之前有两个问题：您有一个边数组，但您需要知道其他边连接到给定边的开头或结尾。另一个问题是两个Boid之间的“碰撞”只影响当前正在更新的Boid，它在碰撞过程中被杀死。为了使用半边理论，你必须“通知”另一个Boid / edge关于这个碰撞并在那一点上将它分开：一个碰撞点是三个边缘的顶点，一个碰撞的边缘和两个边缘的顶点被碰撞的那个被拆分了。

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

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

计算任意生成的线的半边/面

1 个答案: