Skip to content

Commit 94a2265

Browse files
janbenderjanbender
committed
- added Newton example
1 parent 2dbef62 commit 94a2265

9 files changed

Lines changed: 874 additions & 2 deletions

File tree

‎examples/FEM_Corot.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -554,6 +554,11 @@ <h3>References</h3>
554554
this.canvas.addEventListener("mousemove", this.mouseMove.bind(this), false);
555555
this.canvas.addEventListener("mouseup", this.mouseUp.bind(this), false);
556556
this.canvas.addEventListener("wheel", this.wheel.bind(this), false);
557+
// register touch event listeners (mobile / tablet)
558+
// passive:false is required so we can call preventDefault() to suppress scrolling
559+
this.canvas.addEventListener("touchstart", this.touchStart.bind(this), { passive: false });
560+
this.canvas.addEventListener("touchmove", this.touchMove.bind(this), { passive: false });
561+
this.canvas.addEventListener("touchend", this.touchEnd.bind(this), { passive: false });
557562
}
558563

559564
// set simulation parameters from GUI and start mainLoop
@@ -784,6 +789,61 @@ <h3>References</h3>
784789
if (this.zoom < 1)
785790
this.zoom = 1;
786791
}
792+
793+
// Convert the first touch point to a plain {clientX, clientY} object
794+
// so it can be passed directly to the existing mouse handlers.
795+
getTouchClient(event)
796+
{
797+
const t = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
798+
return { clientX: t.clientX, clientY: t.clientY };
799+
}
800+
801+
touchStart(event)
802+
{
803+
event.preventDefault();
804+
if (event.touches.length === 1)
805+
this.mouseDown({ which: 1, ...this.getTouchClient(event) });
806+
else if (event.touches.length === 2)
807+
this.lastPinchDist = this.getPinchDist(event);
808+
}
809+
810+
touchMove(event)
811+
{
812+
event.preventDefault();
813+
if (event.touches.length === 1)
814+
{
815+
this.lastPinchDist = null;
816+
this.mouseMove(this.getTouchClient(event));
817+
}
818+
else if (event.touches.length === 2)
819+
{
820+
// deselect any dragged particle while pinching
821+
this.selectedParticle = -1;
822+
const dist = this.getPinchDist(event);
823+
if (this.lastPinchDist !== null)
824+
{
825+
this.zoom += (dist - this.lastPinchDist) * 0.3;
826+
if (this.zoom < 1) this.zoom = 1;
827+
}
828+
this.lastPinchDist = dist;
829+
}
830+
}
831+
832+
touchEnd(event)
833+
{
834+
event.preventDefault();
835+
if (event.touches.length < 2)
836+
this.lastPinchDist = null;
837+
if (event.touches.length === 0)
838+
this.mouseUp(event);
839+
}
840+
841+
getPinchDist(event)
842+
{
843+
const dx = event.touches[0].clientX - event.touches[1].clientX;
844+
const dy = event.touches[0].clientY - event.touches[1].clientY;
845+
return Math.sqrt(dx*dx + dy*dy);
846+
}
787847
}
788848

789849
gui = new GUI();

‎examples/FEM_Neohookean.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -566,6 +566,11 @@ <h3>References</h3>
566566
this.canvas.addEventListener("mousemove", this.mouseMove.bind(this), false);
567567
this.canvas.addEventListener("mouseup", this.mouseUp.bind(this), false);
568568
this.canvas.addEventListener("wheel", this.wheel.bind(this), false);
569+
// register touch event listeners (mobile / tablet)
570+
// passive:false is required so we can call preventDefault() to suppress scrolling
571+
this.canvas.addEventListener("touchstart", this.touchStart.bind(this), { passive: false });
572+
this.canvas.addEventListener("touchmove", this.touchMove.bind(this), { passive: false });
573+
this.canvas.addEventListener("touchend", this.touchEnd.bind(this), { passive: false });
569574
}
570575

571576
// set simulation parameters from GUI and start mainLoop
@@ -796,6 +801,61 @@ <h3>References</h3>
796801
if (this.zoom < 1)
797802
this.zoom = 1;
798803
}
804+
805+
// Convert the first touch point to a plain {clientX, clientY} object
806+
// so it can be passed directly to the existing mouse handlers.
807+
getTouchClient(event)
808+
{
809+
const t = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
810+
return { clientX: t.clientX, clientY: t.clientY };
811+
}
812+
813+
touchStart(event)
814+
{
815+
event.preventDefault();
816+
if (event.touches.length === 1)
817+
this.mouseDown({ which: 1, ...this.getTouchClient(event) });
818+
else if (event.touches.length === 2)
819+
this.lastPinchDist = this.getPinchDist(event);
820+
}
821+
822+
touchMove(event)
823+
{
824+
event.preventDefault();
825+
if (event.touches.length === 1)
826+
{
827+
this.lastPinchDist = null;
828+
this.mouseMove(this.getTouchClient(event));
829+
}
830+
else if (event.touches.length === 2)
831+
{
832+
// deselect any dragged particle while pinching
833+
this.selectedParticle = -1;
834+
const dist = this.getPinchDist(event);
835+
if (this.lastPinchDist !== null)
836+
{
837+
this.zoom += (dist - this.lastPinchDist) * 0.3;
838+
if (this.zoom < 1) this.zoom = 1;
839+
}
840+
this.lastPinchDist = dist;
841+
}
842+
}
843+
844+
touchEnd(event)
845+
{
846+
event.preventDefault();
847+
if (event.touches.length < 2)
848+
this.lastPinchDist = null;
849+
if (event.touches.length === 0)
850+
this.mouseUp(event);
851+
}
852+
853+
getPinchDist(event)
854+
{
855+
const dx = event.touches[0].clientX - event.touches[1].clientX;
856+
const dy = event.touches[0].clientY - event.touches[1].clientY;
857+
return Math.sqrt(dx*dx + dy*dy);
858+
}
799859
}
800860

801861
gui = new GUI();

‎examples/FEM_StVK.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,11 @@ <h3>References</h3>
516516
this.canvas.addEventListener("mousemove", this.mouseMove.bind(this), false);
517517
this.canvas.addEventListener("mouseup", this.mouseUp.bind(this), false);
518518
this.canvas.addEventListener("wheel", this.wheel.bind(this), false);
519+
// register touch event listeners (mobile / tablet)
520+
// passive:false is required so we can call preventDefault() to suppress scrolling
521+
this.canvas.addEventListener("touchstart", this.touchStart.bind(this), { passive: false });
522+
this.canvas.addEventListener("touchmove", this.touchMove.bind(this), { passive: false });
523+
this.canvas.addEventListener("touchend", this.touchEnd.bind(this), { passive: false });
519524
}
520525

521526
// set simulation parameters from GUI and start mainLoop
@@ -746,6 +751,61 @@ <h3>References</h3>
746751
if (this.zoom < 1)
747752
this.zoom = 1;
748753
}
754+
755+
// Convert the first touch point to a plain {clientX, clientY} object
756+
// so it can be passed directly to the existing mouse handlers.
757+
getTouchClient(event)
758+
{
759+
const t = event.touches.length > 0 ? event.touches[0] : event.changedTouches[0];
760+
return { clientX: t.clientX, clientY: t.clientY };
761+
}
762+
763+
touchStart(event)
764+
{
765+
event.preventDefault();
766+
if (event.touches.length === 1)
767+
this.mouseDown({ which: 1, ...this.getTouchClient(event) });
768+
else if (event.touches.length === 2)
769+
this.lastPinchDist = this.getPinchDist(event);
770+
}
771+
772+
touchMove(event)
773+
{
774+
event.preventDefault();
775+
if (event.touches.length === 1)
776+
{
777+
this.lastPinchDist = null;
778+
this.mouseMove(this.getTouchClient(event));
779+
}
780+
else if (event.touches.length === 2)
781+
{
782+
// deselect any dragged particle while pinching
783+
this.selectedParticle = -1;
784+
const dist = this.getPinchDist(event);
785+
if (this.lastPinchDist !== null)
786+
{
787+
this.zoom += (dist - this.lastPinchDist) * 0.3;
788+
if (this.zoom < 1) this.zoom = 1;
789+
}
790+
this.lastPinchDist = dist;
791+
}
792+
}
793+
794+
touchEnd(event)
795+
{
796+
event.preventDefault();
797+
if (event.touches.length < 2)
798+
this.lastPinchDist = null;
799+
if (event.touches.length === 0)
800+
this.mouseUp(event);
801+
}
802+
803+
getPinchDist(event)
804+
{
805+
const dx = event.touches[0].clientX - event.touches[1].clientX;
806+
const dy = event.touches[0].clientY - event.touches[1].clientY;
807+
return Math.sqrt(dx*dx + dy*dy);
808+
}
749809
}
750810

751811
gui = new GUI();

0 commit comments

Comments
 (0)