2021-07-05 20:51:08 -04:00
<!doctype html>
< html >
< head >
< style >
html, body
{
margin:0;
}
canvas
{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
}
< / style >
< / head >
< body >
< canvas > < / canvas >
2021-07-07 07:00:50 -04:00
< script type = "module" >
import { Scene, THREE } from './scene.js';
2021-07-05 20:51:08 -04:00
2021-07-07 12:09:52 -04:00
let average = (inCenter, inArray, ...inPointsInd) =>
2021-07-05 20:51:08 -04:00
{
2021-07-07 07:00:50 -04:00
let output = [0, 0, 0];
2021-07-07 07:26:21 -04:00
for(let i=0; i< inPointsInd.length ; i + + )
2021-07-07 07:00:50 -04:00
{
2021-07-07 07:26:21 -04:00
let pointInd = inPointsInd[i]*3;
output[0] += inArray[pointInd+0];
output[1] += inArray[pointInd+1];
output[2] += inArray[pointInd+2];
2021-07-07 07:00:50 -04:00
}
2021-07-07 12:09:52 -04:00
let reducer = inPointsInd.length;
output[0] /= reducer;
output[1] /= reducer;
output[2] /= reducer;
2021-07-07 07:00:50 -04:00
2021-07-07 12:09:52 -04:00
let limit = (inCenter, inPoint) =>
2021-07-07 07:00:50 -04:00
{
2021-07-07 12:09:52 -04:00
var limit;
limit = inCenter-0.5;
if(inPoint < limit ) { return limit ; }
2021-07-07 07:26:21 -04:00
limit = inCenter+0.5;
2021-07-07 12:09:52 -04:00
if(inPoint > limit){ return limit; }
2021-07-07 07:26:21 -04:00
return inPoint;
2021-07-07 07:00:50 -04:00
}
2021-07-07 12:09:52 -04:00
var limited = [];
limited[0] = limit(inCenter[0], output[0]);
limited[1] = limit(inCenter[1], output[1]);
limited[2] = limit(inCenter[2], output[2]);
//console.log(`< ${output[0].toFixed(2)}, ${output[1].toFixed(2)}> limited to < ${limited[0].toFixed(2)}, ${limited[1].toFixed(2)}> by < ${inCenter[0].toFixed(2)}, ${inCenter[1].toFixed(2)}>`)
output[0] = limited[0];
output[1] = limited[1];
output[2] = limited[2];
2021-07-07 07:00:50 -04:00
return output;
};
2021-07-07 12:09:52 -04:00
let smooth = (inArray, inTimes) =>
2021-07-07 07:26:21 -04:00
{
2021-07-07 12:09:52 -04:00
let output = [...inArray];
let count = output.length/3;
for(let t=0; t< inTimes ; t + + )
2021-07-07 07:26:21 -04:00
{
2021-07-07 12:09:52 -04:00
for(let i=0; i< count ; i + + )
{
var av;
var center = [inArray[i*3 + 0], inArray[i*3 + 1], inArray[i*3 + 2]]
if(i==0)
{
av = average(center, output, count-1, i, i+1);
}
else
{
if(i==count-1)
{
av = average(center, output, i-1, i, 0);
}
else
{
av = average(center, output, i-1, i, i+1);
}
}
output[i*3+0] = av[0];
output[i*3+1] = av[1];
output[i*3+2] = av[2];
}
2021-07-07 07:26:21 -04:00
}
return output;
}
2021-07-07 12:09:52 -04:00
let path = (inPoints, inSmoothing, inColor) =>
2021-07-07 07:26:21 -04:00
{
const geometry = new THREE.BufferGeometry();
2021-07-07 12:09:52 -04:00
geometry.setAttribute('position', new THREE.Float32BufferAttribute( smooth(inPoints, inSmoothing), 3 ));
const materialLine = new THREE.LineBasicMaterial( { color: inColor, linewidth: 3 } );
const materialPoint = new THREE.PointsMaterial( { color:inColor, size: 0.05 } );
const output = new THREE.Group();
output.add( new THREE.Line( geometry, materialLine ) );
output.add( new THREE.Points( geometry, materialPoint ) );
return output;
2021-07-07 07:26:21 -04:00
}
2021-07-07 07:00:50 -04:00
const points =
[
2021-07-07 12:09:52 -04:00
4, 0, 0,
3, 0, 0,
2, 0, 0,
1, 0, 0,
//
2021-07-07 07:00:50 -04:00
0, 0, 0,
0, 1, 0,
1, 1, 0,
2, 1, 0,
2021-07-07 12:09:52 -04:00
2, 2, 0,
3, 2, 0,
4, 2, 0,
4, 3, 0,
//
5, 3, 0,
5, 2, 0,
5, 1, 0,
5, 0, 0,
2021-07-07 07:00:50 -04:00
];
2021-07-07 07:26:21 -04:00
2021-07-07 07:00:50 -04:00
Scene(
{
DOM:"canvas",
Init(inScene)
{
2021-07-07 12:09:52 -04:00
inScene.add(path(points, 0, 0xFF0000));
inScene.add(path(points, 1, 0x003300));
inScene.add(path(points, 3, 0x005500));
inScene.add(path(points, 5, 0x007700));
inScene.add(path(points, 7, 0x009900));
inScene.add(path(points, 100, 0x00bb00));
2021-07-07 07:00:50 -04:00
},
Update(scene, delta)
{
}
2021-07-05 20:51:08 -04:00
}
2021-07-07 07:00:50 -04:00
);
2021-07-05 20:51:08 -04:00
< / script >
2021-07-06 16:50:26 -04:00
2021-07-05 20:51:08 -04:00
< / body >
< / html >
