smoothing works
This commit is contained in:
		
							parent
							
								
									dc2f826688
								
							
						
					
					
						commit
						9e5ea8098c
					
				
							
								
								
									
										68
									
								
								index.html
									
									
									
									
									
								
							
							
						
						
									
										68
									
								
								index.html
									
									
									
									
									
								
							| @ -23,40 +23,61 @@ | |||||||
| <script type="module"> | <script type="module"> | ||||||
|     import { Scene, THREE } from './scene.js'; |     import { Scene, THREE } from './scene.js'; | ||||||
| 
 | 
 | ||||||
|     let average = (inPoints, inCenter) => |     let average = (inArray, inCenterInd, ...inPointsInd) => | ||||||
|     { |     { | ||||||
|         let output = [0, 0, 0]; |         let output = [0, 0, 0]; | ||||||
|  |         let centerInd = inCenterInd*3; | ||||||
| 
 | 
 | ||||||
|         for(let i=0; i<inPoints.length; i+=3) |         for(let i=0; i<inPointsInd.length; i++) | ||||||
|         { |         { | ||||||
|             output[0] += inPoints[i+0]; |             let pointInd = inPointsInd[i]*3; | ||||||
|             output[1] += inPoints[i+1]; |             output[0] += inArray[pointInd+0]; | ||||||
|             output[2] += inPoints[i+2]; |             output[1] += inArray[pointInd+1]; | ||||||
|  |             output[2] += inArray[pointInd+2]; | ||||||
|         } |         } | ||||||
|          |          | ||||||
|         let scalar = inPoints.length/3; |         let scalar = inPointsInd.length; | ||||||
|         output[0] /= scalar; |         output[0] /= scalar; | ||||||
|         output[1] /= scalar; |         output[1] /= scalar; | ||||||
|         output[2] /= scalar; |         output[2] /= scalar; | ||||||
| 
 | 
 | ||||||
|         let limit = (inShifted) =>  |         let limit = (inPoint, inCenter) =>  | ||||||
|         { |         { | ||||||
|             if(inShifted < -0.5) |             let limit = inCenter-0.5; | ||||||
|  |             if(inPoint < limit) | ||||||
|             { |             { | ||||||
|                 return -0.5; |                 return limit; | ||||||
|             } |             } | ||||||
|             if(inShifted > 0.5) |             limit = inCenter+0.5; | ||||||
|  |             if(inPoint > limit) | ||||||
|             { |             { | ||||||
|                 return 0.5; |                 return limit; | ||||||
|             } |             } | ||||||
|             return inShifted; |             return inPoint; | ||||||
|         } |         } | ||||||
|         output[0] = limit(output[0] - inCenter[0]); |         output[0] = limit(output[0], inArray[centerInd+0]); | ||||||
|         output[1] = limit(output[1] - inCenter[1]); |         output[1] = limit(output[1], inArray[centerInd+1]); | ||||||
|         output[2] = limit(output[2] - inCenter[2]); |         output[2] = limit(output[2], inArray[centerInd+2]); | ||||||
| 
 | 
 | ||||||
|         return output; |         return output; | ||||||
|     }; |     }; | ||||||
|  |     let smooth = (inArray) => | ||||||
|  |     { | ||||||
|  |         let output = [inArray[0], inArray[1], inArray[2] ]; | ||||||
|  |         for(let i=1; i < (inArray.length/3)-1; i++) | ||||||
|  |         { | ||||||
|  |             output.push( ...average(inArray, i, i-1, i, i+1) ); | ||||||
|  |         } | ||||||
|  |         output.push(inArray[inArray.length-3], inArray[inArray.length-2], inArray[inArray.length-1]); | ||||||
|  |         return output; | ||||||
|  |     } | ||||||
|  |     let path = (inPoints, inColor) => | ||||||
|  |     { | ||||||
|  |         const geometry = new THREE.BufferGeometry(); | ||||||
|  |         geometry.setAttribute('position', new THREE.Float32BufferAttribute( inPoints, 3 )); | ||||||
|  |         const material = new THREE.LineBasicMaterial( { color: inColor, linewidth: 3 } ); | ||||||
|  |         return new THREE.Line( geometry, material ); | ||||||
|  |     } | ||||||
| 
 | 
 | ||||||
|     const points = |     const points = | ||||||
|     [ |     [ | ||||||
| @ -69,17 +90,24 @@ | |||||||
|          4,  0,  0, |          4,  0,  0, | ||||||
|          4,  1,  0 |          4,  1,  0 | ||||||
|     ]; |     ]; | ||||||
|     const geometry = new THREE.BufferGeometry(); | 
 | ||||||
|     geometry.setAttribute('position', new THREE.Float32BufferAttribute( points, 3 )); |     console.log( smooth(points) ); | ||||||
|     const material = new THREE.LineBasicMaterial( { color: 0x0000ff, linewidth: 3 } ); | 
 | ||||||
|     const line = new THREE.Line( geometry, material ); |     let path0 = path(points, 0xFF0000); | ||||||
|  |     let path1 = path(smooth(points), 0x009900); | ||||||
|  |     let path2 = path(smooth(smooth(points)), 0x00AA00); | ||||||
|  |     let path3 = path(smooth(smooth(smooth(points))), 0x00FF00); | ||||||
|  | 
 | ||||||
| 
 | 
 | ||||||
|     Scene( |     Scene( | ||||||
|     { |     { | ||||||
|         DOM:"canvas", |         DOM:"canvas", | ||||||
|         Init(inScene) |         Init(inScene) | ||||||
|         { |         { | ||||||
|             inScene.add( line ); |             inScene.add( path0 ); | ||||||
|  |             inScene.add( path1 ); | ||||||
|  |             inScene.add( path2 ); | ||||||
|  |             inScene.add( path3 ); | ||||||
|         }, |         }, | ||||||
|         Update(scene, delta) |         Update(scene, delta) | ||||||
|         { |         { | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user