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に追加される新しいオブジェクトに保存されます (すべてが死の魂のようなものになります)。edgesedgeBoid

ハーフエッジ理論を適用する前に 2 つの問題があります。エッジの配列がありますが、特定のエッジの開始または終了に接続されている他のエッジを知る必要があります。もう 1 つの問題は、2 つの Boid 間の「衝突」が現在更新中の Boid にのみ影響し、衝突中に殺されることです。ハーフエッジ理論を使用するには、この衝突について他のボイド/エッジに「通知」し、その時点で分割する必要があります。衝突ポイントは、衝突するエッジと衝突するエッジの 3 つの頂点です。衝突されたものは分割されました。

また、形状 (面) は必ずしも 4 つのエッジで構成されているとは限らないことに注意してください。プロバイダーのリンクを開いたところ、ツリーと 5 つのエッジを持つ多くの形状がありました。

メッシュを生成するために別のアルゴリズムを使用できる場合は、すべての形状を構成する「コーナー」を見つけるのに役立つエッジと頂点をより適切に表現できる場合があります。

于 2012-12-08T16:19:41.443 に答える