Added evenly spaced points to paths

This commit is contained in:
Emma 2023-02-08 01:14:13 -07:00
parent ae0575875f
commit 9b03e6c2cb
5 changed files with 164 additions and 54 deletions

View File

@ -606,6 +606,28 @@ class PathSegment {
length: 0
}).length;
}
calculateEvenlySpacedPoints(spacing, resolution = 1) {
const points = [];
points.push(this.points[0]);
let prev = points[0];
let distSinceLastEvenPoint = 0;
let t = 0;
const div = Math.ceil(this.length * resolution * 10);
while(t < 1){
t += 1 / div;
const point = this.getPointAtT(t);
distSinceLastEvenPoint += prev.dist(point);
if (distSinceLastEvenPoint >= spacing) {
const overshoot = distSinceLastEvenPoint - spacing;
const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot));
distSinceLastEvenPoint = overshoot;
points.push(evenPoint);
prev = evenPoint;
}
prev = point;
}
return points;
}
}
class Mover {
position;
@ -849,6 +871,7 @@ class TrainCar extends Train {
super.move();
} else {
this.draw();
this.follower?.draw();
}
}
}
@ -929,8 +952,10 @@ class Track extends PathSegment {
class Spline {
segments = [];
ctx;
evenPoints;
constructor(segs){
this.segments = segs;
this.evenPoints = this.calculateEvenlySpacedPoints(3);
}
setContext(ctx) {
this.ctx = ctx;
@ -943,6 +968,19 @@ class Spline {
segment.draw();
}
}
calculateEvenlySpacedPoints(spacing, resolution = 1) {
return this.segments.flatMap((s)=>s.calculateEvenlySpacedPoints(spacing, resolution));
}
followEvenPoints(t) {
const i = Math.floor(t);
const a = this.evenPoints[i];
const b = this.evenPoints[(i + 1) % this.evenPoints.length];
try {
return Vector.lerp(a, b, t % 1);
} catch {
console.log(t, i, a, b);
}
}
}
const generateSquareTrack = ()=>{
const first = new Track([
@ -1025,39 +1063,24 @@ init({
});
const path = generateSquareTrack();
let t = 0;
let currentSeg = 0;
const trains = Array(1).fill(null).map((_, i)=>new Train(path.segments[i % path.segments.length], 5));
doodler.createLayer(()=>{
path.draw();
for (const train of trains){
train.move();
for (const p of path.evenPoints){
p.drawDot();
}
const seg = path.segments[currentSeg];
const tMod = 1 / seg.length;
const start = seg.getPointAtT(t);
const tan = seg.tangent(t).normalize().mult(25);
doodler.line(start, new Vector(start.x + tan.x, start.y + tan.y), {
color: 'red'
const point = path.followEvenPoints(t);
point && doodler.drawCircle(point, 5, {
strokeColor: 'green'
});
t += tMod;
if (t > 1) {
t -= 1;
currentSeg = (currentSeg + 1) % path.segments.length;
}
t = (t + 1 / 3) % path.evenPoints.length;
});
document.addEventListener('keyup', (e)=>{
if (e.key === 'd') {
console.log(trains);
console.log(path.segments.reduce((a, b)=>a + b.calculateApproxLength(1000), 0));
}
if (e.key === 'ArrowUp') {
for (const train of trains){
train.speed += .1;
}
}
if (e.key === 'd') {}
if (e.key === 'ArrowUp') {}
if (e.key === 'ArrowDown') {
for (const train1 of trains){
train1.speed -= .1;
for (const train of trains){
train.speed -= .1;
}
}
if (e.key === 'e') {

45
main.ts
View File

@ -39,36 +39,43 @@ const trains = Array(trainCount).fill(null).map((_, i) => new Train(path.segment
doodler.createLayer(() => {
path.draw();
for (const train of trains) {
train.move();
}
// for (const train of trains) {
// train.move();
// }
// ctx.strokeStyle = 'red';
// ctx.lineWidth = 4;
const seg = path.segments[currentSeg];
const tMod = speed/seg.length;
const start = seg.getPointAtT(t);
const tan = seg.tangent(t).normalize().mult(25);
doodler.line(start, new Vector(start.x + tan.x, start.y + tan.y), {color: 'red'});
// const seg = path.segments[currentSeg];
// const start = seg.getPointAtT(t);
// const tan = seg.tangent(t).normalize().mult(25);
// const tan = seg.tangent(t);
t += tMod;
if (t > 1) {
t -= 1;
currentSeg = (currentSeg + 1) % path.segments.length;
for (const p of path.evenPoints) {
p.drawDot();
}
// doodler.line(start, new Vector(start.x + tan.x, start.y + tan.y), {color: 'blue'});
// doodler.fillCircle(start, 5, {fillColor: 'blue'})
const point = path.followEvenPoints(t);
point &&
doodler.drawCircle(point, 5, {strokeColor: 'green'})
t = (t + (1 / 3)) % path.evenPoints.length;
// path.segments.forEach(s => s.calculateApproxLength(10000))
})
document.addEventListener('keyup', e => {
if (e.key === 'd') {
console.log(trains)
console.log(path.segments.reduce((a,b) => a + b.calculateApproxLength(1000), 0))
// console.log(trains)
// console.log(path.segments.reduce((a,b) => a + b.calculateApproxLength(1000), 0))
// console.log(path.evenPoints);
}
if (e.key === 'ArrowUp') {
for (const train of trains) {
train.speed += .1;
}
// for (const train of trains) {
// train.speed += .1;
// }
}
if (e.key === 'ArrowDown') {
for (const train of trains) {
@ -81,9 +88,9 @@ document.addEventListener('keyup', e => {
t.editable = !t.editable;
for (const p of t.points) {
if (t.editable)
doodler.registerDraggable(p, 10)
doodler.registerDraggable(p, 10)
else
doodler.unregisterDraggable(p)
doodler.unregisterDraggable(p)
}
}
}

View File

@ -54,8 +54,8 @@ export class PathSegment {
}
draw() {
const [a,b,c,d] = this.points;
doodler.drawBezier(a,b,c,d, {
const [a, b, c, d] = this.points;
doodler.drawBezier(a, b, c, d, {
strokeColor: '#ffffff50'
})
// if (!this.ctx) return;
@ -120,7 +120,7 @@ export class PathSegment {
const point = this.getPointAtT(i * resolution);
const distance = v.dist(point);
if (distance < r) {
points.push([i * resolution,this]);
points.push([i * resolution, this]);
}
}
return points
@ -178,18 +178,48 @@ export class PathSegment {
}
calculateApproxLength(resolution = 25) {
const stepSize = 1/resolution;
const stepSize = 1 / resolution;
const points: Vector[] = []
for (let i = 0; i <= resolution; i++) {
const current = stepSize*i;
const current = stepSize * i;
points.push(this.getPointAtT(current))
}
return points.reduce((acc:{prev?: Vector, length: number}, cur) => {
return points.reduce((acc: { prev?: Vector, length: number }, cur) => {
const prev = acc.prev;
acc.prev = cur;
if (!prev) return acc;
acc.length += cur.dist(prev);
return acc;
}, {prev: undefined, length: 0}).length
}, { prev: undefined, length: 0 }).length
}
calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
const points: Vector[] = []
points.push(this.points[0]);
let prev = points[0];
let distSinceLastEvenPoint = 0
let t = 0;
const div = Math.ceil(this.length * resolution * 10);
while (t < 1) {
t += 1 / div;
const point = this.getPointAtT(t);
distSinceLastEvenPoint += prev.dist(point);
if (distSinceLastEvenPoint >= spacing) {
const overshoot = distSinceLastEvenPoint - spacing;
const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot))
distSinceLastEvenPoint = overshoot;
points.push(evenPoint);
prev = evenPoint;
}
prev = point;
}
return points;
}
}

View File

@ -95,8 +95,11 @@ export class Track extends PathSegment {
export class Spline<T extends PathSegment = PathSegment> {
segments: T[] = [];
ctx?: CanvasRenderingContext2D;
evenPoints: Vector[];
constructor(segs: T[]) {
this.segments = segs;
this.evenPoints = this.calculateEvenlySpacedPoints(3);
}
setContext(ctx: CanvasRenderingContext2D) {
@ -111,6 +114,52 @@ export class Spline<T extends PathSegment = PathSegment> {
segment.draw();
}
}
calculateEvenlySpacedPoints(spacing: number, resolution = 1) {
return this.segments.flatMap(s => s.calculateEvenlySpacedPoints(spacing, resolution));
// const points: Vector[] = []
// points.push(this.segments[0].points[0]);
// let prev = points[0];
// let distSinceLastEvenPoint = 0
// for (const seg of this.segments) {
// let t = 0;
// const div = Math.ceil(seg.length * resolution * 10);
// while (t < 1) {
// t += 1 / div;
// const point = seg.getPointAtT(t);
// distSinceLastEvenPoint += prev.dist(point);
// if (distSinceLastEvenPoint >= spacing) {
// const overshoot = distSinceLastEvenPoint - spacing;
// const evenPoint = Vector.add(point, Vector.sub(point, prev).normalize().mult(overshoot))
// distSinceLastEvenPoint = overshoot;
// points.push(evenPoint);
// prev = evenPoint;
// }
// prev = point
// }
// }
// return points;
}
followEvenPoints(t: number) {
const i = Math.floor(t);
const a = this.evenPoints[i]
const b = this.evenPoints[(i + 1) % this.evenPoints.length]
try {
return Vector.lerp(a, b, t % 1);
} catch {
console.log(t, i, a, b);
}
}
}
export const generateSquareTrack = () => {

View File

@ -178,6 +178,7 @@ class TrainCar extends Train {
super.move();
} else {
this.draw()
this.follower?.draw();
}
}
// this.draw()