I want to draw simple patterns inside my 2d shapes like these
The stroke size and gap between strokes can vary so I cant save these as textures beforehand.
Maybe you can do it similar to there Grid Collection
2 Likes
Hi!
Specifically for triangles, you can do something like that very rough concept:
Example: https://jsfiddle.net/prisoner849/nehrg85v/
Picture:
3 Likes
Thank you for the reply. Unfortunately the shape can be any polygon.
@ahsan
No difference, except there is no border.
Example: https://jsfiddle.net/prisoner849/6a0yberv/
Picture:
2 Likes
Hofk, can yours do hexagon grids?
@GlifTek
Do you want a grid of vertices or just a pattern, drawn in fragment shader?
well a mix of both would be great… one for the drawn pattern… one for vertices in their centers to use as placements for images
@GlifTek Something like this? Hexagonal grid formation
I just can’t get why you want both. Any reference picture of the desired result?
lol durrrrrr…
just reading our convo back then… i FORGOT about that!!
def using that one … thanks for reminding me!
(such props for such cool code man!)
Have I hidden it too well.
The code is on Grid Collection and
grids
and here now.
function createHexagonGrid( radius, rings ) {
// outer grid radius, rings of hexagons around the central hexagon
radius = radius !== undefined ? radius : 50;
rings = rings !== undefined ? rings : 20;
var x, y;
var r = 2 * radius / ( 2 * rings + 1 ) / Math.sqrt( 3 ); // radius of corner points, size of a single hexagon
var ri = r * Math.sqrt( 3 ) / 2; // inner radius of a single hexagon
var pi6 = Math.PI / 6;
var hexagonGrid = new THREE.Object3D( );
var hexagons = [ ];
//var hexagonCount = 3 * rings * rings + 3 * rings + 1;
var geometryHexagon = [ ];
var positions = [ ];
var uvs = [ ];
var h = 0;
for ( var sg = -1; sg < 2; sg ++ ) {
var rg0 = sg === 0 ? rings : 0;
for( var i = 1, k = 2 * rings + 1 - Math.abs( sg ); k > rings + rg0; i ++, k -- ) {
x = ri * ( 1 - k );
y = sg * 1.5 * r * i;
for( var j = 0 ; j < k; j ++ ) {
geometryHexagon[ h ] = new THREE.BufferGeometry();
positions[ h ] = new Float32Array( 18 );
uvs[ h ] = new Float32Array( 12 );
geometryHexagon[ h ].addAttribute( 'position', new THREE.BufferAttribute( positions[ h ], 3 ) );
geometryHexagon[ h ].addAttribute( 'uv', new THREE.BufferAttribute( uvs[ h ], 2 ) );
for( var ip = 0; ip < 6; ip ++ ) {
positions[ h ][ ip * 3 ] = r * Math.cos( ( 2 * ip + 1 ) * pi6 );
positions[ h ][ ip * 3 + 1 ] = r * Math.sin( ( 2 * ip + 1 ) * pi6 );
positions[ h ][ ip * 3 + 2 ] = 0;
}
hexagons[ h ] = new THREE.LineLoop( geometryHexagon[ h ], material ); // material is not wireframe - still a grid
for( var iuv = 0; iuv < 6; iuv ++ ) {
hexagons[ h ].geometry.getAttribute( 'uv' ).array[ iuv * 2 ] = 0.5 * ( 1 + ( x + r * Math.cos( ( 2 * iuv + 1 ) * pi6 ) ) / radius );
hexagons[ h ].geometry.getAttribute( 'uv' ).array[ iuv * 2 + 1 ] = 0.5 * ( 1 + ( y + r * Math.cos( ( 2 * iuv + 1 ) * pi6 ) ) / radius );
}
x += ri * 2;
hexagons[ h ].position.set( x, y, 0 );
hexagonGrid.add( hexagons[ h ] );
h ++;
}
}
}
return hexagonGrid;
}
Note - in newer revisions setAttribute instead of addAttribute
3 Likes