From 9a9516b1b82ba3ebe7dcb87dd33a38b93f352369 Mon Sep 17 00:00:00 2001 From: BoltMaud Date: Wed, 3 Jul 2024 14:41:40 +0200 Subject: [PATCH 1/6] fix: slower --- app/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/App.tsx b/app/src/App.tsx index af5f9ed..d45a82a 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -13,7 +13,7 @@ const App = () => { useEffect(() => { const incrementAngle = () => { if (spinAngle < 360) { - setSpinAngle(spinAngle + 1) + setSpinAngle(spinAngle + 0.2) } else { setSpinAngle(0) } From fe89ed1d0339993399ab9bb9a0c11d0accc1ee58 Mon Sep 17 00:00:00 2001 From: BoltMaud Date: Wed, 3 Jul 2024 14:42:00 +0200 Subject: [PATCH 2/6] feat: body shape --- app/src/features/bike/Bike.tsx | 5 ++- app/src/utils/bike-geometry.ts | 71 ++++++++++++++++++++++++---------- 2 files changed, 53 insertions(+), 23 deletions(-) diff --git a/app/src/features/bike/Bike.tsx b/app/src/features/bike/Bike.tsx index 88edf20..be9c865 100644 --- a/app/src/features/bike/Bike.tsx +++ b/app/src/features/bike/Bike.tsx @@ -73,9 +73,10 @@ export const Bike = ({spinAngle}: {spinAngle: number}) => { - - + + + ) } diff --git a/app/src/utils/bike-geometry.ts b/app/src/utils/bike-geometry.ts index fd00da7..224b50e 100644 --- a/app/src/utils/bike-geometry.ts +++ b/app/src/utils/bike-geometry.ts @@ -288,10 +288,44 @@ class Fork extends Segment { } } -class LowerBody extends Segment { +class RoundedSegment extends Segment { + + protected readonly radius: number; + + constructor({start, end, radius}: {start:Coordinates, end:Coordinates, radius:number}){ + super({start, end}); + this.radius = radius; + } + + draw(): string { + const aboveStart = { + x: this.start.x + this.radius, + y: this.start.y + this.radius / 2, // above in horizontal + } + const aboveEnd = { + x: this.end.x + this.radius / 2, // above in vertical + y: this.end.y + this.radius + } + const angle = Math.atan2(aboveEnd.y - aboveStart.y, aboveEnd.x - aboveStart.x); + const offsetX = this.radius * Math.sin(angle); + const offsetY = this.radius * Math.cos(angle); + + return ` + M${aboveStart.x - offsetX},${aboveStart.y + offsetY} + A${this.radius},${this.radius} 0 0,1 ${aboveStart.x + offsetX},${aboveStart.y - offsetY} + L${aboveEnd.x + offsetX},${aboveEnd.y - offsetY} + A${this.radius},${this.radius} 0 0,1 ${aboveEnd.x - offsetX},${aboveEnd.y + offsetY} + Z + `; + } +} + +class LowerBody { private readonly __brand = "LowerBody"; - private readonly knee: Coordinates; - private readonly heel: Coordinates; + private readonly upperLeg: RoundedSegment; + private readonly lowerLeg: RoundedSegment; + private readonly feet: RoundedSegment; + private readonly _knee: Coordinates; constructor({ bottomBracket, @@ -336,29 +370,26 @@ class LowerBody extends Segment { y: Math.abs(-lowerLeg * Math.sin(theta - gamma)) + heel.y }; } - const end = { x: heel.x + riderFootLength, y: heel.y } - super({start: seatPost.start, end}); - this.knee = knee; - this.heel = heel; + this._knee = knee; + this.upperLeg = new RoundedSegment({start: seatPost.start, end: knee, radius:45}); + this.lowerLeg= new RoundedSegment({start: knee, end: heel, radius: 35}); + this.feet = new RoundedSegment({start: heel, end: end, radius:2}) } draw(): string { - return d3.line()([ - [this.start.x, this.start.y], - [this.knee.x, this.knee.y], - [this.heel.x, this.heel.y], - [this.end.x, this.end.y], - ]) ?? ""; + return this.upperLeg.draw() + " " + this.lowerLeg.draw() + " " + this.feet.draw() } } -class UpperBody extends Segment { +class UpperBody { private readonly __brand = "UpperBody"; private readonly shoulder: Coordinates; + private readonly spine: RoundedSegment; + private readonly arm: RoundedSegment; constructor({ seatPost, @@ -385,20 +416,18 @@ class UpperBody extends Segment { y = m * x + k; } - super({start: seatPost.start, end: handleBar.coordinates}); - this.shoulder = { x: x, y: y }; + + this.spine = new RoundedSegment({start: seatPost.start, end: this.shoulder, radius:45}); + this.arm= new RoundedSegment({start: this.shoulder, end: handleBar.coordinates, radius: 35}); + } draw(): string { - return d3.line()([ - [this.start.x, this.start.y], - [this.shoulder.x, this.shoulder.y], - [this.end.x, this.end.y], - ]) ?? ""; + return this.spine.draw() + " " + this.arm.draw() } } From 81e720f6f99ba7b08122b4ecac47e5986415eff2 Mon Sep 17 00:00:00 2001 From: BoltMaud Date: Wed, 10 Jul 2024 09:19:35 +0200 Subject: [PATCH 3/6] feat: svg on page --- app/src/App.tsx | 4 ++++ app/src/features/bike/Bike.tsx | 37 +++++++++++++++++------------- app/src/utils/bike-geometry.ts | 41 +++++++++++++++++++++++++++++----- 3 files changed, 61 insertions(+), 21 deletions(-) diff --git a/app/src/App.tsx b/app/src/App.tsx index d45a82a..6ce852f 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -5,6 +5,7 @@ import { Counter } from "./features/counter/Counter" import { Quotes } from "./features/quotes/Quotes" import { Bike } from "./features/bike/Bike" import logo from "./logo.svg" +import { Map, CompassControl } from 'react-mapycz'; const App = () => { @@ -82,6 +83,9 @@ const App = () => { + + + ) } diff --git a/app/src/features/bike/Bike.tsx b/app/src/features/bike/Bike.tsx index be9c865..5181dca 100644 --- a/app/src/features/bike/Bike.tsx +++ b/app/src/features/bike/Bike.tsx @@ -3,7 +3,7 @@ import { useMemo } from "react"; import { BikeGeometry } from "../../utils/bike-geometry"; import { Wheel } from "../../utils/wheel"; -export const Bike = ({spinAngle}: {spinAngle: number}) => { +export const Bike = ({ spinAngle }: { spinAngle: number }) => { const bike = useMemo(() => new BikeGeometry( { reachLength: 389, @@ -43,26 +43,28 @@ export const Bike = ({spinAngle}: {spinAngle: number}) => { - - - - - - - - - - - + + + + + + + + + + + + + - + @@ -73,10 +75,15 @@ export const Bike = ({spinAngle}: {spinAngle: number}) => { - + + + + + + + - ) } diff --git a/app/src/utils/bike-geometry.ts b/app/src/utils/bike-geometry.ts index 224b50e..41487a4 100644 --- a/app/src/utils/bike-geometry.ts +++ b/app/src/utils/bike-geometry.ts @@ -299,12 +299,12 @@ class RoundedSegment extends Segment { draw(): string { const aboveStart = { - x: this.start.x + this.radius, + x: this.start.x + this.radius , y: this.start.y + this.radius / 2, // above in horizontal } const aboveEnd = { x: this.end.x + this.radius / 2, // above in vertical - y: this.end.y + this.radius + y: this.end.y + this.radius } const angle = Math.atan2(aboveEnd.y - aboveStart.y, aboveEnd.x - aboveStart.x); const offsetX = this.radius * Math.sin(angle); @@ -320,9 +320,32 @@ class RoundedSegment extends Segment { } } +class SvgDrawing { + private readonly _path: string; + private readonly _start: Coordinates; + private readonly _end: Coordinates; + + constructor({start, end, path}:{start: Coordinates, end: Coordinates, path: string}){ + this._path = path; + this._start = start; + this._end = end ; + } + + transform(newStart: Coordinates, newEnd: Coordinates): string{ + let result = `translate(${newStart.x}, ${newStart.y}) ` + result += `rotate(${ Math.atan((this._end.x - this._start.x) / (this._end.y - this._start.y))}) ` + result += `scale(${distance(newStart, newEnd) / distance(this._start, this._end)}) ` + result += `rotate(${Math.atan((newEnd.x - newStart.x) / (newEnd.y - newStart.y))}) ` + result += `translate(-${this._start.x}, -${this._start.y})` + return result + } + +} + class LowerBody { private readonly __brand = "LowerBody"; - private readonly upperLeg: RoundedSegment; + private readonly upperLeg: Segment; + private readonly upperLegDrawing: SvgDrawing; private readonly lowerLeg: RoundedSegment; private readonly feet: RoundedSegment; private readonly _knee: Coordinates; @@ -350,7 +373,6 @@ class LowerBody { x: crank.end.x - riderFootLength * 2 / 3, y: crank.end.y } - let knee: Coordinates; @@ -375,14 +397,21 @@ class LowerBody { y: heel.y } this._knee = knee; - this.upperLeg = new RoundedSegment({start: seatPost.start, end: knee, radius:45}); + this.upperLeg = new Segment({start: seatPost.start, end: knee}); + this.upperLegDrawing = new SvgDrawing({start: {x: 0, y: 201}, end: {x: 1538, y: 201}, path: "M0 0h1538v201H0z"}) this.lowerLeg= new RoundedSegment({start: knee, end: heel, radius: 35}); - this.feet = new RoundedSegment({start: heel, end: end, radius:2}) + this.feet = new RoundedSegment({start: heel, end: end, radius:2}); + + } draw(): string { return this.upperLeg.draw() + " " + this.lowerLeg.draw() + " " + this.feet.draw() } + + upperLegTransform(): string{ + return this.upperLegDrawing.transform(this.upperLeg.start, this.upperLeg.end); + } } class UpperBody { From b020616ddf7c6ab60924026854892e8b0f22637d Mon Sep 17 00:00:00 2001 From: BoltMaud Date: Tue, 16 Jul 2024 16:31:01 +0200 Subject: [PATCH 4/6] fix: rotations are good --- app/src/App.tsx | 2 +- app/src/features/bike/Bike.tsx | 4 +--- app/src/utils/bike-geometry.ts | 17 ++++++++++++----- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/app/src/App.tsx b/app/src/App.tsx index 6ce852f..0cc0b85 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -14,7 +14,7 @@ const App = () => { useEffect(() => { const incrementAngle = () => { if (spinAngle < 360) { - setSpinAngle(spinAngle + 0.2) + setSpinAngle(spinAngle + 0.5) } else { setSpinAngle(0) } diff --git a/app/src/features/bike/Bike.tsx b/app/src/features/bike/Bike.tsx index 5181dca..6440c6d 100644 --- a/app/src/features/bike/Bike.tsx +++ b/app/src/features/bike/Bike.tsx @@ -77,10 +77,8 @@ export const Bike = ({ spinAngle }: { spinAngle: number }) => { - + - - diff --git a/app/src/utils/bike-geometry.ts b/app/src/utils/bike-geometry.ts index 41487a4..f36142d 100644 --- a/app/src/utils/bike-geometry.ts +++ b/app/src/utils/bike-geometry.ts @@ -333,12 +333,15 @@ class SvgDrawing { transform(newStart: Coordinates, newEnd: Coordinates): string{ let result = `translate(${newStart.x}, ${newStart.y}) ` - result += `rotate(${ Math.atan((this._end.x - this._start.x) / (this._end.y - this._start.y))}) ` + result += `rotate(${(- Math.atan2((this._end.y - this._start.y), (this._end.x - this._start.x))) * 180 / Math.PI}) ` result += `scale(${distance(newStart, newEnd) / distance(this._start, this._end)}) ` - result += `rotate(${Math.atan((newEnd.x - newStart.x) / (newEnd.y - newStart.y))}) ` - result += `translate(-${this._start.x}, -${this._start.y})` + result += `rotate(${+(( Math.atan2((newEnd.y - newStart.y), (newEnd.x - newStart.x))) * 180 / Math.PI)}) ` + result += `translate(${-this._start.x}, ${-this._start.y})` return result } + get path(){ + return this._path; + } } @@ -398,7 +401,7 @@ class LowerBody { } this._knee = knee; this.upperLeg = new Segment({start: seatPost.start, end: knee}); - this.upperLegDrawing = new SvgDrawing({start: {x: 0, y: 201}, end: {x: 1538, y: 201}, path: "M0 0h1538v201H0z"}) + this.upperLegDrawing = new SvgDrawing({start: {x: 2348, y: 625}, end: {x: 583, y: 1593}, path: "M2238 3s-1004.92 128.457-978 286c-418.017 222.988-906 720-906 720L52 1321c-71.972 97.79-51.848 152.47-24 250 29.192 66.99 544.001 30 558 20 14-10 141-114 155-128 104.067-27.45 149-47.45 253-78 316.22-92.89 416.15-164.51 601.32-297.21l6.68-4.79c185.06-126.276 293.11-203.129 416-242 481.03-149.165 409.39-386.648 220-838Z"}) this.lowerLeg= new RoundedSegment({start: knee, end: heel, radius: 35}); this.feet = new RoundedSegment({start: heel, end: end, radius:2}); @@ -409,9 +412,13 @@ class LowerBody { return this.upperLeg.draw() + " " + this.lowerLeg.draw() + " " + this.feet.draw() } - upperLegTransform(): string{ + upperLegTransform(): string { return this.upperLegDrawing.transform(this.upperLeg.start, this.upperLeg.end); } + + getUpperLegPath(){ + return this.upperLegDrawing.path; + } } class UpperBody { From 27fad12f7ce08302f18df73d248d3324ed139f2c Mon Sep 17 00:00:00 2001 From: BoltMaud Date: Wed, 17 Jul 2024 13:43:05 +0200 Subject: [PATCH 5/6] fix: entire man v1 --- app/src/App.tsx | 2 +- app/src/features/bike/Bike.tsx | 19 ++++++++-- app/src/utils/bike-geometry.ts | 68 +++++++++++++++++++++++++++++----- 3 files changed, 75 insertions(+), 14 deletions(-) diff --git a/app/src/App.tsx b/app/src/App.tsx index 0cc0b85..461e464 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -14,7 +14,7 @@ const App = () => { useEffect(() => { const incrementAngle = () => { if (spinAngle < 360) { - setSpinAngle(spinAngle + 0.5) + setSpinAngle(spinAngle + 5) } else { setSpinAngle(0) } diff --git a/app/src/features/bike/Bike.tsx b/app/src/features/bike/Bike.tsx index 6440c6d..d3c44af 100644 --- a/app/src/features/bike/Bike.tsx +++ b/app/src/features/bike/Bike.tsx @@ -30,7 +30,7 @@ export const Bike = ({ spinAngle }: { spinAngle: number }) => { riderArmLength: 690, riderSpineLength: 700, effectiveSeatTubeAngle: 72.5, - handleBarReach: 76, + handleBarReach: 506, handleBarHeight: 0, spinAngle: spinAngle, } @@ -75,11 +75,24 @@ export const Bike = ({ spinAngle }: { spinAngle: number }) => { - + + + + + + + + + + + + + + + - diff --git a/app/src/utils/bike-geometry.ts b/app/src/utils/bike-geometry.ts index f36142d..a1d08cb 100644 --- a/app/src/utils/bike-geometry.ts +++ b/app/src/utils/bike-geometry.ts @@ -335,7 +335,7 @@ class SvgDrawing { let result = `translate(${newStart.x}, ${newStart.y}) ` result += `rotate(${(- Math.atan2((this._end.y - this._start.y), (this._end.x - this._start.x))) * 180 / Math.PI}) ` result += `scale(${distance(newStart, newEnd) / distance(this._start, this._end)}) ` - result += `rotate(${+(( Math.atan2((newEnd.y - newStart.y), (newEnd.x - newStart.x))) * 180 / Math.PI)}) ` + result += `rotate(${(( Math.atan2((newEnd.y - newStart.y), (newEnd.x - newStart.x))) * 180 / Math.PI)}) ` result += `translate(${-this._start.x}, ${-this._start.y})` return result } @@ -349,9 +349,12 @@ class LowerBody { private readonly __brand = "LowerBody"; private readonly upperLeg: Segment; private readonly upperLegDrawing: SvgDrawing; - private readonly lowerLeg: RoundedSegment; - private readonly feet: RoundedSegment; + private readonly lowerLeg: Segment; + private readonly lowerLegDrawing: SvgDrawing; + private readonly feet: Segment; + private readonly feetDrawing: SvgDrawing; private readonly _knee: Coordinates; + private readonly _end: Coordinates; constructor({ bottomBracket, @@ -395,15 +398,17 @@ class LowerBody { y: Math.abs(-lowerLeg * Math.sin(theta - gamma)) + heel.y }; } - const end = { + this._end = { x: heel.x + riderFootLength, y: heel.y } this._knee = knee; this.upperLeg = new Segment({start: seatPost.start, end: knee}); - this.upperLegDrawing = new SvgDrawing({start: {x: 2348, y: 625}, end: {x: 583, y: 1593}, path: "M2238 3s-1004.92 128.457-978 286c-418.017 222.988-906 720-906 720L52 1321c-71.972 97.79-51.848 152.47-24 250 29.192 66.99 544.001 30 558 20 14-10 141-114 155-128 104.067-27.45 149-47.45 253-78 316.22-92.89 416.15-164.51 601.32-297.21l6.68-4.79c185.06-126.276 293.11-203.129 416-242 481.03-149.165 409.39-386.648 220-838Z"}) - this.lowerLeg= new RoundedSegment({start: knee, end: heel, radius: 35}); - this.feet = new RoundedSegment({start: heel, end: end, radius:2}); + this.upperLegDrawing = new SvgDrawing({start: {x: 2348, y: 625}, end: {x: 583, y: 1593}, path: "M2238.45 3S1517 177 1283 311c-134 50-928.553 698-928.553 698l-302 312c-71.972 97.79-51.849 152.47-24 250 29.192 66.99 544.001 30 558 20 14-10 141-114 155-128 104.067-27.45 149-47.45 253-78 316.223-92.89 416.153-164.51 601.323-297.21l6.68-4.79c185.05-126.276 293.11-203.129 416-242 481.03-149.165 409.39-386.648 220-838Z"}); + this.lowerLeg= new Segment({start: knee, end: heel}); + this.lowerLegDrawing = new SvgDrawing({start: {x:510, y: 257} , end: {x: 1149, y: 2416}, path: "M85 475.002C-32.224 273.782-23.968 90.089 113 17c136.969-73.088 310 161.5 497 422.5l116.5 193C828.759 788.854 818.837 928.689 841 1165c44.261 472.09 204 792 218 820 14 28.01 1 97.5-23 128-99.5 93.5-417 10-417-72s-98.314-490.71-234-754c-78.258-192.57-137.009-310.564-172-473.998-31.465-134.024-60.089-203.517-128-338Z"}) + this.feet = new Segment({start: heel, end: this._end}); + this.feetDrawing = new SvgDrawing({start: {x: 1306, y: 381}, end: {x:3, y: 719}, path: "M514 259C366.818 382.995 131.999 395 50 425c-82 30-44 128 16 160 60 31.999 276.409 78.931 414 42 137.59-36.931 220.98-80.143 394-154 76.928-33.565 150.75-32.65 256-48 80.39-15.522 120.89-28.533 142-100 40.12-58.305-28.99-315.54-90-322-56.24 21.285-51.78 29.893-52 46-21.69 106.773-127.23 169.389-460 24-27.5 84.715-83.497 124.919-156 186Z"}) } @@ -415,17 +420,34 @@ class LowerBody { upperLegTransform(): string { return this.upperLegDrawing.transform(this.upperLeg.start, this.upperLeg.end); } + lowerLegTransform(): string{ + return this.lowerLegDrawing.transform(this.lowerLeg.start, this.lowerLeg.end); + } + feetTransform(): string{ + return this.feetDrawing.transform(this.lowerLeg.end, this._end); + } + + getfeetPath(): string { + return this.feetDrawing.path; + } getUpperLegPath(){ return this.upperLegDrawing.path; } + + getLowerLegPath(){ + return this.lowerLegDrawing.path; + } } class UpperBody { private readonly __brand = "UpperBody"; private readonly shoulder: Coordinates; - private readonly spine: RoundedSegment; - private readonly arm: RoundedSegment; + private readonly spine: Segment; + private readonly spineDrawing: SvgDrawing; + private readonly arm: Segment; + private readonly armDrawing: SvgDrawing; + private readonly headDrawing: SvgDrawing; constructor({ seatPost, @@ -458,12 +480,38 @@ class UpperBody { }; this.spine = new RoundedSegment({start: seatPost.start, end: this.shoulder, radius:45}); + this.spineDrawing = new SvgDrawing({start: {x:2504, y:2192}, end: {x:360, y:0}, path: "M683 92c-226.5-66-333.127-60.826-524 98C49 281.531 3 474 3 524s311.5 227.5 447.5 355.5 268.5 184.5 320 214S1063 1320 1063 1320s206 258 280 334 208 438 244 476 273.93 563.11 842 190c132.16-73.78 89.72-281.36-76-780-110-273-197-373.5-351-538-201-188.5-275-282.261-385-368-316.58-246.754-510.48-370.033-934-542Z"}); this.arm= new RoundedSegment({start: this.shoulder, end: handleBar.coordinates, radius: 35}); + this.armDrawing = new SvgDrawing({start: {x:2191, y:0}, end: {x:563, y:2414}, path: "M2115 45c198.34-36.832 421.94 142.692 358 280s-255.4 358-302 462c-46.6 104-298 570-318 602s-105.17 123.57-152 184c-46.83 60.43-238 324-326 404s-520.396 399.16-565.5 466c-45.103 66.84-54.5 103.5-98.5 116-20.5 4-379 81-388 84.5s-98.5 44.5-98.5 44.5c6.5-5-74.168 58.74-108 149-7 28-6.936 44.88-31.5 50-13.492 1.63-21.32.98-38-16-5.667-5.75-6.429-10.84 0-26-6.72-1.8-9.891-6.41-14-24 0 0-30-56-30-76s8.5-100.5 8.5-100.5-1.672-63.35-8.5-71.5c-2.271-25.71 2.601-43.07 30-83 11.442-19.28 76.677-85.38 76-87-.677-1.62 8.514-61.23 37-71 28.486-9.77 266 21 307 12s41.537-6.6 66-19c27.054-13.71 64-44 64-44l294-304 166-216s71.78-125.46 376-442l332-532c50.6-110.67 47.99-224.096 40-280-5.4-37.743 28.52-200.88 129.22-326 48.45-60.202 112.35-111.603 194.78-136Z"}); + this.headDrawing = new SvgDrawing({start: {x:1128, y:747}, end: {x:1131, y:807}, path:"M3 438.126s6 34.874 22.5 60L77 538l10 56 41.5 140.626-51.5 102.5c-16.095 46.899-10.991 59.33 17 63l80 17c27.096-.266-24.077 60.007 0 68.5 24.076 8.493 38.769-11.462 41.5 0 1.652 6.934-44.049 25.124-18.048 35.674 26 10.55 60.412 62.04 62.499 92 2.088 29.97-.967 52.16 22.549 71.83 23.515 19.67 46.36 53.75 171 0 39.052-15.78 60.948-26.66 100 0l48.5 34.5 139.5 74C787.427 1056.03 858.56 914.447 1076 832c8-3.033-8-36-8-66v-22c30.25-14.85 33.88-29.153 38.95-49.188l.05-.186c5.1-20.133 45-9.626 45-9.626l34-49-8-20c-8.97-10.832-9.76-19.337 0-40.874h51.5c11.5 0 17-28.5 17-28.5l-31.5-63s-41.71-110.55-23-106.626c18.71 3.924 30.36-45.414 23-63.5-2.87-7.062-6-8.349-7-14-1.56-8.822 0-20.374 0-20.374L888 74S228.388-222.503 37.5 397C36.3 405.121 3 438.126 3 438.126Z" }) + } + + spineDrawingTransform(): string{ + return this.spineDrawing.transform(this.spine.start, this.spine.end); + } + + getSpineDrawingPath(): string{ + return this.spineDrawing.path; + } + + getArmDrawingPath(): string{ + return this.armDrawing.path + } + + armDrawingTransform(): string{ + return this.armDrawing.transform(this.arm.start, this.arm.end); + } + + headTransform(): string { + return this.headDrawing.transform(this.spine.end, {x: this.spine.end.x, y: this.spine.end.y - (this.spine.end.y - this.spine.start.y) / 45} ) + } + getHeadDrawing(): string{ + return this.headDrawing.path; } draw(): string { - return this.spine.draw() + " " + this.arm.draw() + return this.arm.draw() } } From 64d6434c62b9130a2498d2cb2b3af0711cf91dbb Mon Sep 17 00:00:00 2001 From: BoltMaud Date: Thu, 18 Jul 2024 23:24:29 +0200 Subject: [PATCH 6/6] fix: man v2 --- app/src/App.tsx | 4 +-- app/src/features/bike/Bike.tsx | 53 +++++++++++++++++++--------------- app/src/utils/bike-geometry.ts | 13 +++++---- 3 files changed, 39 insertions(+), 31 deletions(-) diff --git a/app/src/App.tsx b/app/src/App.tsx index 461e464..d45dd26 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -14,12 +14,12 @@ const App = () => { useEffect(() => { const incrementAngle = () => { if (spinAngle < 360) { - setSpinAngle(spinAngle + 5) + setSpinAngle(spinAngle + 1) } else { setSpinAngle(0) } } - const interval = setInterval(() => incrementAngle(), 1); + const interval = setInterval(() => incrementAngle(), 5); return () => { clearInterval(interval); }; diff --git a/app/src/features/bike/Bike.tsx b/app/src/features/bike/Bike.tsx index d3c44af..041a722 100644 --- a/app/src/features/bike/Bike.tsx +++ b/app/src/features/bike/Bike.tsx @@ -30,7 +30,7 @@ export const Bike = ({ spinAngle }: { spinAngle: number }) => { riderArmLength: 690, riderSpineLength: 700, effectiveSeatTubeAngle: 72.5, - handleBarReach: 506, + handleBarReach: 106, handleBarHeight: 0, spinAngle: spinAngle, } @@ -64,37 +64,44 @@ export const Bike = ({ spinAngle }: { spinAngle: number }) => { - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - + - + - + - + - + + + + + + + ) } + +// todo +// shape, see bikecad +// feet, rotate +// head size \ No newline at end of file diff --git a/app/src/utils/bike-geometry.ts b/app/src/utils/bike-geometry.ts index a1d08cb..dc725cc 100644 --- a/app/src/utils/bike-geometry.ts +++ b/app/src/utils/bike-geometry.ts @@ -404,9 +404,9 @@ class LowerBody { } this._knee = knee; this.upperLeg = new Segment({start: seatPost.start, end: knee}); - this.upperLegDrawing = new SvgDrawing({start: {x: 2348, y: 625}, end: {x: 583, y: 1593}, path: "M2238.45 3S1517 177 1283 311c-134 50-928.553 698-928.553 698l-302 312c-71.972 97.79-51.849 152.47-24 250 29.192 66.99 544.001 30 558 20 14-10 141-114 155-128 104.067-27.45 149-47.45 253-78 316.223-92.89 416.153-164.51 601.323-297.21l6.68-4.79c185.05-126.276 293.11-203.129 416-242 481.03-149.165 409.39-386.648 220-838Z"}); + this.upperLegDrawing = new SvgDrawing({start: {x: 1594, y: 484}, end: {x:479, y:1900}, path: "M671 368C253.5 994 143.923 1267.02.5 1918c34.388 327.13 387.5 238.5 506.5 0S1495 857.001 1610 472c115-385-521.5-730-939-104Z"}) this.lowerLeg= new Segment({start: knee, end: heel}); - this.lowerLegDrawing = new SvgDrawing({start: {x:510, y: 257} , end: {x: 1149, y: 2416}, path: "M85 475.002C-32.224 273.782-23.968 90.089 113 17c136.969-73.088 310 161.5 497 422.5l116.5 193C828.759 788.854 818.837 928.689 841 1165c44.261 472.09 204 792 218 820 14 28.01 1 97.5-23 128-99.5 93.5-417 10-417-72s-98.314-490.71-234-754c-78.258-192.57-137.009-310.564-172-473.998-31.465-134.024-60.089-203.517-128-338Z"}) + this.lowerLegDrawing = new SvgDrawing({start: {x:467, y:178} , end: {x: 1087, y: 2102}, path: "M79 415C36.5 231.5 23.27 163.365 69 107c86-106 310.839-133.474 403 0 261 378 247 774 281 976s224 702 201.5 750.5-287.5 54.5-298.5 0S121.5 598.5 79 415Z"}) this.feet = new Segment({start: heel, end: this._end}); this.feetDrawing = new SvgDrawing({start: {x: 1306, y: 381}, end: {x:3, y: 719}, path: "M514 259C366.818 382.995 131.999 395 50 425c-82 30-44 128 16 160 60 31.999 276.409 78.931 414 42 137.59-36.931 220.98-80.143 394-154 76.928-33.565 150.75-32.65 256-48 80.39-15.522 120.89-28.533 142-100 40.12-58.305-28.99-315.54-90-322-56.24 21.285-51.78 29.893-52 46-21.69 106.773-127.23 169.389-460 24-27.5 84.715-83.497 124.919-156 186Z"}) @@ -480,10 +480,10 @@ class UpperBody { }; this.spine = new RoundedSegment({start: seatPost.start, end: this.shoulder, radius:45}); - this.spineDrawing = new SvgDrawing({start: {x:2504, y:2192}, end: {x:360, y:0}, path: "M683 92c-226.5-66-333.127-60.826-524 98C49 281.531 3 474 3 524s311.5 227.5 447.5 355.5 268.5 184.5 320 214S1063 1320 1063 1320s206 258 280 334 208 438 244 476 273.93 563.11 842 190c132.16-73.78 89.72-281.36-76-780-110-273-197-373.5-351-538-201-188.5-275-282.261-385-368-316.58-246.754-510.48-370.033-934-542Z"}); + this.spineDrawing = new SvgDrawing({start: {x:2545, y:2222}, end: {x:617, y:1}, path: "M482.5 1C340.094 266.091 306.455 285.78 1.152 388 64 500 53.63 626.733 114 774c132 322 286.916 552.85 460.001 618C1286 1660 1452 1798 1624 1996s499.86 428.23 721.5 375c221.65-53.23 308.5-223 283.5-462C2610 1562 1968.68 648.966 482.5 1Z"}) this.arm= new RoundedSegment({start: this.shoulder, end: handleBar.coordinates, radius: 35}); - this.armDrawing = new SvgDrawing({start: {x:2191, y:0}, end: {x:563, y:2414}, path: "M2115 45c198.34-36.832 421.94 142.692 358 280s-255.4 358-302 462c-46.6 104-298 570-318 602s-105.17 123.57-152 184c-46.83 60.43-238 324-326 404s-520.396 399.16-565.5 466c-45.103 66.84-54.5 103.5-98.5 116-20.5 4-379 81-388 84.5s-98.5 44.5-98.5 44.5c6.5-5-74.168 58.74-108 149-7 28-6.936 44.88-31.5 50-13.492 1.63-21.32.98-38-16-5.667-5.75-6.429-10.84 0-26-6.72-1.8-9.891-6.41-14-24 0 0-30-56-30-76s8.5-100.5 8.5-100.5-1.672-63.35-8.5-71.5c-2.271-25.71 2.601-43.07 30-83 11.442-19.28 76.677-85.38 76-87-.677-1.62 8.514-61.23 37-71 28.486-9.77 266 21 307 12s41.537-6.6 66-19c27.054-13.71 64-44 64-44l294-304 166-216s71.78-125.46 376-442l332-532c50.6-110.67 47.99-224.096 40-280-5.4-37.743 28.52-200.88 129.22-326 48.45-60.202 112.35-111.603 194.78-136Z"}); - this.headDrawing = new SvgDrawing({start: {x:1128, y:747}, end: {x:1131, y:807}, path:"M3 438.126s6 34.874 22.5 60L77 538l10 56 41.5 140.626-51.5 102.5c-16.095 46.899-10.991 59.33 17 63l80 17c27.096-.266-24.077 60.007 0 68.5 24.076 8.493 38.769-11.462 41.5 0 1.652 6.934-44.049 25.124-18.048 35.674 26 10.55 60.412 62.04 62.499 92 2.088 29.97-.967 52.16 22.549 71.83 23.515 19.67 46.36 53.75 171 0 39.052-15.78 60.948-26.66 100 0l48.5 34.5 139.5 74C787.427 1056.03 858.56 914.447 1076 832c8-3.033-8-36-8-66v-22c30.25-14.85 33.88-29.153 38.95-49.188l.05-.186c5.1-20.133 45-9.626 45-9.626l34-49-8-20c-8.97-10.832-9.76-19.337 0-40.874h51.5c11.5 0 17-28.5 17-28.5l-31.5-63s-41.71-110.55-23-106.626c18.71 3.924 30.36-45.414 23-63.5-2.87-7.062-6-8.349-7-14-1.56-8.822 0-20.374 0-20.374L888 74S228.388-222.503 37.5 397C36.3 405.121 3 438.126 3 438.126Z" }) + this.armDrawing = new SvgDrawing({start: {x:2244 , y:0}, end: {x:412, y:2246}, path: "M993.334 1698.26c161.796-158.66 235.826-212.3 357.876-373.01 182.26-239.99 312.78-564.56 354.07-685.251 41.28-120.69 93.19-226.603 122.98-275.113 29.8-48.511 91.91-99.872 185.4-114.771C2221.3 217.021 2381.5 476.854 2328.28 640c-53.23 163.146-141.57 240.184-194.8 300.683L1619.61 1539.6c-44.57 51-211.56 237.45-310.28 340.94-98.72 103.5-495.311 336.85-538.24 393.26-42.929 56.41-51.873 87.35-93.752 97.9-19.512 3.37-257.953 45.96-369.296 71.31-111.343 25.34-151.592 64.19-196.545 163.29-6.663 23.63-6.602 37.88-29.982 42.2-12.841 1.37-20.292.83-36.168-13.51 0 0-13.325-19.95-13.325-42.19s-28.554-47.26-28.554-64.14c0-16.88 10.659-52.05 9.112-85.65-1.08-23.48-9.112-43.72-9.112-59.5 0-15.78 2.476-36.35 28.554-70.04 10.89-16.28 49.493-64.62 49.493-64.62s12.082-54.74 58.06-68.72c45.977-13.99 253.177 17.72 292.2 10.13 39.024-7.6 39.535-5.57 62.819-16.04 25.749-11.57 60.915-37.13 60.915-37.13 27.381-29.19 276.028-280.18 437.825-438.83Z"}) + this.headDrawing = new SvgDrawing({start: {x:1138, y:747}, end: {x:1141, y:807}, path: "M92.323 432.507s2.201 35.318 15.893 62.078l46.896 45.198 3.899 56.752 26.081 144.283-62.26 96.344c-21.062 44.888-17.33 57.797 10.102 64.467l77.698 25.534c26.967 2.66-30.412 57.058-7.392 68.1 23.019 11.037 39.779-7.211 41.257 4.479.895 7.068-46.503 20.228-21.792 33.518 24.71 13.29 53.365 68.19 52.206 98.21-1.159 30.01-6.59 51.75 14.665 73.84 21.256 22.09 40.289 58.44 170.002 18.45 40.527-11.47 63.469-19.92 99.416 10.79l44.493 39.54L792 1371c164 24 455.06-147.24 402-375.737-1.94-8.334-81.52-92.041-78.28-121.866l2.37-21.872c31.68-11.499 36.83-25.326 44.04-44.696l.06-.181c7.25-19.464 45.78-4.713 45.78-4.713l39.09-45.045-5.8-20.746c-7.74-11.737-7.61-20.278 4.42-40.636l51.2 5.558c11.43 1.241 19.97-26.499 19.97-26.499l-24.52-66.031s-29.53-114.406-11.35-108.486c18.17 5.921 35.08-41.872 29.71-60.647-2.09-7.33-5.06-8.947-5.44-14.673-.61-8.939 2.19-20.255 2.19-20.255l-295.99-238.462S387.687-199.941 131.06 395.344c-2.07 7.944-38.737 37.163-38.737 37.163Z"}) } spineDrawingTransform(): string{ @@ -503,7 +503,8 @@ class UpperBody { } headTransform(): string { - return this.headDrawing.transform(this.spine.end, {x: this.spine.end.x, y: this.spine.end.y - (this.spine.end.y - this.spine.start.y) / 45} ) + return this.headDrawing.transform({x: this.spine.end.x + 45, y: this.spine.end.y + 70}, + {x: this.spine.end.x + 45, y: this.spine.end.y - (this.spine.end.y - this.spine.start.y) / 44 + 70 } ) } getHeadDrawing(): string{