lesson 129 - spring bone chain

lesson_128_spring_bone/jiggle_03.html

@@ -10,6 +10,8 @@
 import Armature					from "./fungi.armature/Armature.js";
 import ArmaturePreview			from "./fungi.armature/ArmaturePreview.js";
 
+import Jiggly, { JigglySystem }	from "./fungi.armature/Jiggly.js";
+
 //#############################################################################
 (function(){new AppBuilder()
 	.launch()
@@ -50,7 +52,8 @@
 	/**/
 	if(!gPause){
 		if( gRun ) gMover( dt );
-		gSpring( dt );
+
+		//gSpring( dt );
 	}
 
 	App.ecs.sys_run();

lesson_129_spring_bone_chain/README.md

@@ -0,0 +1,16 @@
+# Fun with WebGL 2.0 - 129 - Spring Bone Chain
+**Description**:
+In the previous lesson we learned how to build a jiggle bone. In todays lesson,
+we're going to expand it by applying the concept to an array of bones. This gives
+us the ability to start animationg specific things like hair, clothing, tails,
+whatever use you can think of that is skinned with a chain of bones.
+
+
+### Links of Interest
+
+
+### Links
+* [Lesson on Youtube]()
+* [Youtube Series PlayList](https://www.youtube.com/playlist?list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF)
+* [Twitter](https://twitter.com/SketchpunkLabs)
+* [Patreon](https://www.patreon.com/sketchpunk)

lesson_129_spring_bone_chain/fungi.armature/ArmTest.js

@@ -0,0 +1,82 @@
+import App 				from "../fungi/engine/App.js";
+import Armature			from "./Armature.js";
+import ArmaturePreview	from "./ArmaturePreview.js";
+
+
+function loadBones( arm, bones ){
+	let i, b, ab, bLen = bones.length;
+	for( i=0; i < bLen; i++ ){
+		b	= bones[ i ];
+		ab	= Armature.addBone( arm, b.name, b.len, null, b.idx );
+
+		if( b.rot ) ab.Node.setRot( b.rot );
+		if( b.pos ) ab.Node.setPos( b.pos );
+		if( b.scl ) ab.Node.setScl( b.scl );
+
+		// Can not have levels updated automaticly, Callstack limits get hit
+		// Instead, using the Level from bones to manually set it.
+		if( b.p_idx != null ) App.node.addChild( arm.bones[ b.p_idx ], ab, false );
+
+		// Manual set node level, Must do it after addChild, else it will get overwritten.
+		ab.Node.level = b.lvl;
+	}
+}
+
+
+
+export default class ArmTest{
+	static previewChain( name, bCnt, bLen=0.4, matPrev="ArmaturePreview" ){
+		let e 		= Armature.$( App.$Draw( name ) ),
+			arm		= e.Armature,
+			b 		= null;
+
+		for( let i=0; i < bCnt; i++ ){
+			b = arm.add_bone( "b" + i, bLen, b );
+		}
+
+		e.Armature.isActive = false;			// Disable Skinning on Entity
+		Armature.finalize( e );					// Set Bind Pose
+		ArmaturePreview.$( e, matPrev );		// Generate Preview Bones
+		return e;
+	}
+
+
+
+	static previewHuman( name="ArmPreviewHuman", matPrev="ArmaturePreview" ){
+		let e 		= Armature.$( App.$Draw( name ) ),
+			bones	= [
+				{"name":"Hips","lvl":0,"len":0.07423185751087967,"idx":0,"p_idx":null,"pos":[0.001691931509412825,0.8518908023834229,0.04233919829130173],"rot":[0,0,0,1]},
+				{"name":"Spine","lvl":1,"len":0.08660374852911501,"idx":1,"p_idx":0,"pos":[0,0.07300597429275513,-0.013434894382953644],"rot":[-0.0908687561750412,0,0,0.9958629608154297]},
+				{"name":"Spine1","lvl":2,"len":0.09897592826648108,"idx":2,"p_idx":1,"pos":[-2.3283064365386963e-10,0.08660377562046051,-1.6763806343078613e-8],"rot":[8.940696716308594e-8,0,0,1]},
+				{"name":"Spine2","lvl":3,"len":0.11134745441543295,"idx":3,"p_idx":2,"pos":[-1.1641532182693481e-10,0.09897592663764954,7.450580596923828e-9],"rot":[-1.7136335372924805e-7,0,0,1]},
+				{"name":"Neck","lvl":4,"len":0.09018257802122544,"idx":4,"p_idx":3,"pos":[1.1641532182693481e-10,0.11134748160839081,2.60770320892334e-8],"rot":[0.09086886793375015,0,0,0.9958629608154297]},
+				{"name":"Head","lvl":5,"len":0.2,"idx":5,"p_idx":4,"pos":[1.1641532182693481e-10,0.08891844749450684,-0.015046834945678711],"rot":[-8.73254357713904e-9,0,0,1]},
+				{"name":"LeftShoulder","lvl":4,"len":0.12533710570802964,"idx":6,"p_idx":3,"pos":[0.06169901043176651,0.09800639748573303,-0.0023431330919265747],"rot":[0.5396683216094971,0.4524856507778168,-0.5605334043502808,0.4356802701950073]},
+				{"name":"LeftArm","lvl":5,"len":0.17420996543288508,"idx":7,"p_idx":6,"pos":[-2.561137080192566e-8,0.12533706426620483,-1.0710209608078003e-8],"rot":[-0.057084135711193085,-0.001414879341609776,0.024739207699894905,0.9980618953704834]},
+				{"name":"LeftForeArm","lvl":6,"len":0.22670181482183904,"idx":8,"p_idx":7,"pos":[4.260800778865814e-8,0.174209862947464,7.869675755500793e-8],"rot":[-0.07619540393352509,0.00150683440733701,-0.019718056544661522,0.9968968033790588]},
+				{"name":"LeftHand","lvl":7,"len":0.1,"idx":9,"p_idx":8,"pos":[-5.029141902923584e-8,0.22670170664787292,1.2014061212539673e-7],"rot":[-0.10912764817476273,0.0898929312825203,0.00004303800596971996,0.9899548292160034]},
+				{"name":"RightShoulder","lvl":4,"len":0.12533724035076096,"idx":10,"p_idx":3,"pos":[-0.06169900670647621,0.09804624319076538,-0.002559661865234375],"rot":[0.5385406017303467,-0.45344027876853943,0.5613337755203247,0.4350522458553314]},
+				{"name":"RightArm","lvl":5,"len":0.17422942452920026,"idx":11,"p_idx":10,"pos":[5.122274160385132e-9,0.12533719837665558,-8.195638656616211e-8],"rot":[-0.05638902261853218,0.0015993844717741013,-0.02830304577946663,0.9980063438415527]},
+				{"name":"RightForeArm","lvl":6,"len":0.22669271095994745,"idx":12,"p_idx":11,"pos":[3.259629011154175e-9,0.17422938346862793,1.126900315284729e-7],"rot":[-0.07646241784095764,-0.001603146200068295,0.020896486937999725,0.9968522191047668]},
+				{"name":"RightHand","lvl":7,"len":0.1,"idx":13,"p_idx":12,"pos":[1.862645149230957e-9,0.22669261693954468,8.707866072654724e-8],"rot":[-0.1098177433013916,-0.08273951709270477,0.0006666815024800599,0.990501880645752]},
+				{"name":"LeftUpLeg","lvl":1,"len":0.37693269240721733,"idx":14,"p_idx":0,"pos":[0.07827957719564438,-0.04049783945083618,-0.01180013082921505],"rot":[0.0012189809931442142,0.03373518958687782,-0.9987580180168152,0.03664567321538925]},
+				{"name":"LeftLeg","lvl":2,"len":0.3581824309934082,"idx":15,"p_idx":14,"pos":[2.5429471861571074e-9,0.37693268060684204,9.108589438255876e-10],"rot":[-0.013338188640773296,-0.000002298355411767261,0.000789112295024097,0.9999107718467712]},
+				{"name":"LeftFoot","lvl":3,"len":0.16265543018563247,"idx":16,"p_idx":15,"pos":[1.8335413187742233e-9,0.35818231105804443,3.346940502524376e-9],"rot":[0.5369540452957153,-0.06625143438577652,0.04235189035534859,0.8399389386177063]},
+				{"name":"LeftToeBase","lvl":4,"len":0.03,"idx":17,"p_idx":16,"pos":[2.240994945168495e-9,0.16265539824962616,2.8347130864858627e-8],"rot":[0.2538582384586334,-0.17659825086593628,0.04720042645931244,0.9498111605644226]},
+				{"name":"RightUpLeg","lvl":1,"len":0.37694170927111514,"idx":18,"p_idx":0,"pos":[-0.07827957719564438,-0.04049783945083618,-0.011591173708438873],"rot":[0.0012514338595792651,-0.03403257951140404,0.9987480044364929,0.03664257749915123]},
+				{"name":"RightLeg","lvl":2,"len":0.35844982446117296,"idx":19,"p_idx":18,"pos":[-9.489667718298733e-9,0.3769416809082031,-3.2159732654690742e-9],"rot":[-0.016968226060271263,0.00001146549857367063,-0.0007698459085077047,0.9998557567596436]},
+				{"name":"RightFoot","lvl":3,"len":0.16623513451785563,"idx":20,"p_idx":19,"pos":[-2.7066562324762344e-9,0.3584497272968292,3.754394128918648e-9],"rot":[0.5454418659210205,0.06389955431222916,-0.04175892844796181,0.8346652984619141]},
+				{"name":"RightToeBase","lvl":4,"len":0.03,"idx":21,"p_idx":20,"pos":[8.571078069508076e-9,0.16623513400554657,2.7474015951156616e-8],"rot":[0.24863985180854797,0.1860281527042389,-0.048723652958869934,0.9493144750595093]}
+			];
+
+		loadBones( e.Armature, bones );
+
+		e.Armature.isActive = false;			// Disable Skinning on Entity
+		Armature.finalize( e );					// Set Bind Pose
+		ArmaturePreview.$( e, matPrev, 2 );		// Generate Preview Bones
+		return e;
+	}
+
+}
+
+