irregular_grid/hex_basic_compactness.html at main · sketchpunklabs/irregular_grid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title></head><body>
<script type="module">

// #region IMPORTS
import Starter, { THREE }           from './lib/starter.js';
import Util                         from './lib/Util.js';
import DynLineMesh                  from './lib/DynLineMesh.js';
import ShapePointsMesh              from './lib/ShapePointsMesh.js';
import IrregularHexGrid             from './grid/IrregularHexGrid.js';

import {
    vec3_distance,
} from './lib/Maths.js';
// #endregion

// #region MAIN
let App;
let Debug   = {};
let Ref     = {};

window.addEventListener( "load", async _=>{
    App = new Starter( { webgl2:true, grid:true } );
    App.setCamera( 0, 50, 9, [0,0.0,0] );

    App.add( ( Debug.ln  = new DynLineMesh() ) );
    App.add( ( Debug.pnt = new ShapePointsMesh() ) );

    Debug.ln.position.y = 0.005;
    Debug.pnt.position.y = 0.005;
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    const grid = IrregularHexGrid.build( 3, 5, 50, 0.1, 100, 0 );
    debugVertices( grid );
    // debugEdges( grid );
    debugFaces( grid );
    // debugMesh( grid );

    debugCompactness( grid );

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    App.render();
});
//#endregion

// #region DEBUG
function setRadius( grid, radius ){
    for( let v of grid.vertices ) vec3_norm_scale( v.pos, v.pos, radius );
}

function debugVertices( grid ){
    for( const e of grid.vertices ) Debug.pnt.add( e.pos, 0x00ff00, 2 );
}

function debugEdges( grid ){
    for( const e of grid.iterEdges() ) Debug.ln.add( e.a, e.b, 0x707070 );
}

function debugFaces( grid ){
    for( const f of grid.faces ){
        let edg = grid.halfEdges[ f.halfEdges[0] ];
        let len = f.halfEdges.length;
        for( let i=1; i <= len; i++ ){
            let ii  = i % len;
            let nex = grid.halfEdges[ f.halfEdges[ ii ] ];
            Debug.ln.add( grid.getVertPos( edg.vertex ), grid.getVertPos( nex.vertex ), 0x707070 );
            edg = nex;
        }
    }
}

function debugMesh( grid ){
    const verts = grid.flattenVertices();
    const ind   = grid.flattenIndices();
    const mesh  = toMesh( verts, ind );
    mesh.position.y = 0.001;
    App.add( mesh  );
}

function toMesh( verts, idx ){
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    const bGeo = new THREE.BufferGeometry();
    bGeo.setAttribute( "position",  new THREE.BufferAttribute( new Float32Array( verts ), 3 ) );
    if( idx && idx.length > 0 )   bGeo.setIndex( idx );

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    const mat  = new THREE.MeshPhongMaterial( { color:0x009999 } ); // ,side:THREE.DoubleSide
    const mesh = new THREE.Mesh( bGeo, mat );

    return mesh;
}
// #endregion

// https://x.com/watawatabou/status/1800938952339177537
// "compactness" (area divided by the square of the perimeter) as a measure.
function debugCompactness( grid ){

    // console.log( grid.faces );
    // for( const f of grid.faces ){

        // const f = grid.faces[ 183 ]; // Not very square
        const f = grid.faces[ 0 ]; // Very Square
        let len       = f.halfEdges.length;
        let perimeter = 0;  // Sum of all the edge lengths
        let area      = 0;  // Shoelace formula : sum += p0.x * p1.y - p0.y * p1.x;   area = abs( sum ) / 2;

        for( let i=0; i < len; i++ ){
            let ii = (i+1) % len;
            const e0 = grid.halfEdges[ f.halfEdges[i] ];
            const e1 = grid.halfEdges[ f.halfEdges[ii] ];

            const p0 = grid.getVertPos( e0.vertex );
            const p1 = grid.getVertPos( e1.vertex );

            perimeter += vec3_distance( p0, p1 );
            area      += ( p0[0] * p1[2] ) - ( p0[2] * p1[0] ); // Using XZ instead of XY

            // console.log( p0, p1 , vec3_distance( p0, p1 ) );
            // console.log(  ( p0[0] * p1[2] ) - ( p1[0] * p0[2] ) );

            Debug.pnt.add( p0, 0x00ffff, 3, 0 );
            Debug.pnt.add( p1, 0xffff00, 3, 0 );
        }

        area = Math.abs( area / 2 );
        // area = area / 2;

        console.log( "Peri", perimeter, 'Area', area, "compactness", area / ( perimeter * perimeter ) );
    // }
}


</script>
</body></html>