//THREEJS RELATED VARIABLES
var scene,
camera, fieldOfView, aspectRatio, nearPlane, farPlane,
gobalLight, shadowLight, backLight,
renderer,
container,
controls;
var prevBtn, nextBtn;
var expl = document.getElementsByClassName("expl")[0];
var step = 0;
var steps = 10;
function initNav(){
prevBtn = document.getElementsByClassName("previous")[0];
nextBtn = document.getElementsByClassName("next")[0];
stepMarker = document.getElementsByClassName("marker")[0];
prevBtn.addEventListener("mousedown", previousStep);
nextBtn.addEventListener("mousedown", nextStep);
updateStep();
}
function nextStep(){
step++;
step = step%steps;
updateStep();
}
function previousStep(){
step--;
if (step<0) step += steps;
updateStep();
}
function resetHeroMaterials(){
hero.legR.material = brownMat;
hero.legL.material = brownMat;
hero.handR.material = brownMat;
hero.handL.material = brownMat;
hero.torso.material = blueMat;
hero.head.material = blueMat;
}
function updateStep(){
stepMarker.innerHTML = (step+1) + "/" + steps;
resetHeroMaterials();
if (step==0){
expl.innerHTML = "Breakdown of a walking cycle";
}else if (step==1){
expl.innerHTML = "Move the right leg : <br/><span class='formula'>legRight.position.x = cos(<span class='angle'>t</span>) * 4 <br/> legRight.position.y = sin(<span class='angle'>t</span>) * 4</span>";
hero.legR.material = currentMaterial;
}else if (step==2){
expl.innerHTML = "Do the same with the left leg,<br/> just add PI to the angle : <br/><span class='formula'>legLeft.position.x = cos(<span class='angle'>t + PI</span>) * 4 <br/> legLeft.position.y = sin(<span class='angle'>t + PI</span>) * 4</span>";
hero.legL.material = currentMaterial;
}else if (step==3){
expl.innerHTML = "Constrain the vertical movement<br/>of the legs to simulate the floor :<br/><span class='formula'> legRight.position.y = max(0, legRight.position.y) <br/> legLeft.position.y = max(0, legLeft.position.y)</span>";
hero.legR.material = currentMaterial;
hero.legL.material = currentMaterial;
}else if (step==4){
expl.innerHTML = "Move the torso and the head vertically,<br/>notice how we doubled the frequency<br/>to follow the impulse of both feet :<br/> "+
"<span class='formula'>torso.position.y = 8 - cos (<span class='angle'>t*2</span>) * 0.8 <br/> " +
"head.position.y = 21 - cos (<span class='angle'>t*2</span>) * 1.2</span>";
hero.torso.material = currentMaterial;
hero.head.material = currentMaterial;
}else if (step==5){
expl.innerHTML = "Rotate the torso on the Y axis :<br/> "+
"<span class='formula'>torso.rotation.y = - cos (<span class='angle'>t + PI</span>) * 0.2 </span> ";
hero.torso.material = currentMaterial;
}else if (step==6){
expl.innerHTML = "Move and rotate the hands :<br/> "+
"<span class='formula'>handRight.position.x = - cos (<span class='angle'>t</span>) * 4 <br/> "+
"handRight.rotation.z = - cos (<span class='angle'>t</span>) * PI/8 <br/> "+
"handLeft.position.x = - cos (<span class='angle'>t + PI</span>) * 4 <br/> "+
"handLeft.rotation.z = - cos (<span class='angle'>t + PI</span>) * PI/8 </span>";
hero.handR.material = currentMaterial;
hero.handL.material = currentMaterial;
}else if (step==7){
expl.innerHTML = "Slightly rotate the head on the X and Y axis:<br/> "+
"<span class='formula'>head.rotation.x = cos (<span class='angle'>t</span>) * 0.08 <br/> "+
"head.rotation.y = cos (<span class='angle'>t</span>) * 0.04 </span> ";
hero.head.material = currentMaterial;
}else if (step==8){
expl.innerHTML = "Finetune for a more natural movement:<br/>"+
"<span class='formula'>"+
"if (t>PI){<br/>"+
" this.legR.rotation.z = cos(<span class='angle'>t*2+PI/2</span>) * PI/4;<br/>"+
" this.legL.rotation.z = 0;<br/>"+
"} else{<br/>"+
" this.legR.rotation.z = 0;<br/>"+
" this.legL.rotation.z = cos(<span class='angle'>t*2 + PI/2</span>) * PI/4;<br/>" +
"}"+"</span>";
hero.legR.material = currentMaterial;
hero.legL.material = currentMaterial;
}else{
expl.innerHTML = "Adjust the speed:<br/>"+
"<span class='angle'>t</span> = t * 2";
}
}
// OTHER VARIABLES
var PI = Math.PI;
var hero;
var clock;
var container;
//var gui = new dat.GUI();
// MATERIALS
var brownMat = new THREE.MeshStandardMaterial({
color: 0x401A07,
side:THREE.DoubleSide,
shading:THREE.SmoothShading,
roughness:1,
});
var blackMat = new THREE.MeshPhongMaterial({
color: 0x100707,
shading:THREE.FlatShading,
});
var redMat = new THREE.MeshPhongMaterial({
color: 0xAA5757,
shading:THREE.FlatShading,
});
var blueMat = new THREE.MeshPhongMaterial({
color: 0x5b9696,
shading:THREE.FlatShading,
});
var whiteMat = new THREE.MeshPhongMaterial({
color: 0xffffff,
shading:THREE.FlatShading,
});
var currentMaterial = new THREE.MeshPhongMaterial({
color: 0xff0000,
shading:THREE.FlatShading,
});
//INIT THREE JS, SCREEN AND MOUSE EVENTS
function initScreenAnd3D() {
container = document.getElementById('world');
HEIGHT = container.offsetHeight;
WIDTH = container.width;
windowHalfX = WIDTH / 2;
windowHalfY = HEIGHT / 2;
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xd6eae6, 150,300);
aspectRatio = WIDTH / HEIGHT;
fieldOfView = 50;
nearPlane = 1;
farPlane = 2000;
camera = new THREE.PerspectiveCamera(
fieldOfView,
aspectRatio,
nearPlane,
farPlane
);
camera.position.x = 0;
camera.position.z = 100;
camera.position.y = 0;
//camera.lookAt(new THREE.Vector3(0, 30, 0));
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setSize(WIDTH, HEIGHT);
renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1)
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
window.addEventListener('resize', handleWindowResize, false);
clock = new THREE.Clock();
handleWindowResize();
}
function handleWindowResize() {
HEIGHT = container.offsetHeight;
WIDTH = container.offsetWidth;
windowHalfX = WIDTH / 2;
windowHalfY = HEIGHT / 2;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
}
function createLights() {
globalLight = new THREE.AmbientLight(0xffffff, 1);
shadowLight = new THREE.DirectionalLight(0xffffff, 1);
shadowLight.position.set(10, 8, 8);
shadowLight.castShadow = true;
shadowLight.shadow.camera.left = -40;
shadowLight.shadow.camera.right = 40;
shadowLight.shadow.camera.top = 40;
shadowLight.shadow.camera.bottom = -40;
shadowLight.shadow.camera.near = 1;
shadowLight.shadow.camera.far = 1000;
shadowLight.shadow.mapSize.width = shadowLight.shadow.mapSize.height = 2048;
scene.add(globalLight);
scene.add(shadowLight);
}
Hero = function() {
this.runningCycle = 0;
this.mesh = new THREE.Group();
this.body = new THREE.Group();
this.mesh.add(this.body);
var torsoGeom = new THREE.CubeGeometry(8,8,8, 1);//
this.torso = new THREE.Mesh(torsoGeom, blueMat);
this.torso.position.y = 8;
this.torso.castShadow = true;
this.body.add(this.torso);
var handGeom = new THREE.CubeGeometry(3,3,3, 1);
this.handR = new THREE.Mesh(handGeom, brownMat);
this.handR.position.z=7;
this.handR.position.y=8;
this.body.add(this.handR);
this.handL = this.handR.clone();
this.handL.position.z = - this.handR.position.z;
this.body.add(this.handL);
var headGeom = new THREE.CubeGeometry(16,16,16, 1);//
this.head = new THREE.Mesh(headGeom, blueMat);
this.head.position.y = 21;
this.head.castShadow = true;
this.body.add(this.head);
var legGeom = new THREE.CubeGeometry(8,3,5, 1);
this.legR = new THREE.Mesh(legGeom, brownMat);
this.legR.position.x = 0;
this.legR.position.z = 7;
this.legR.position.y = 0;
this.legR.castShadow = true;
this.body.add(this.legR);
this.legL = this.legR.clone();
this.legL.position.z = - this.legR.position.z;
this.legL.castShadow = true;
this.body.add(this.legL);
this.body.traverse(function(object) {
if (object instanceof THREE.Mesh) {
object.castShadow = true;
object.receiveShadow = true;
}
});
}
Hero.prototype.run = function(){
var s = .03;
var t = this.runningCycle;
if (step>8) t*= 2;
t = t % (2*PI);
var amp = 4;
var disp = .2;
this.legR.rotation.z = 0;
this.legR.position.y = 0;
this.legR.position.x = 0;
this.legL.rotation.z = 0;
this.legL.position.y = 0;
this.legL.position.x = 0;
if (step>0){
this.runningCycle += s;
this.legR.position.x = Math.cos(t) * amp;
this.legR.position.y = - Math.sin(t) * amp;
}
if (step>1){
this.legL.position.x = Math.cos(t + PI) * amp;
this.legL.position.y = - Math.sin(t + PI) * amp;
}
if (step>2){
this.legL.position.y = Math.max (0, this.legL.position.y);
this.legR.position.y = Math.max (0, this.legR.position.y);
}
if (step>3){
this.torso.position.y = 8 - Math.cos( t * 2 ) * amp * .2;
this.head.position.y = 21 - Math.cos( t * 2 ) * amp * .3;
}
if (step>4){
this.torso.rotation.y = -Math.cos( t + PI ) * amp * .05;
}
if (step>5){
this.handR.position.x = -Math.cos( t ) * amp;
this.handR.rotation.z = -Math.cos( t ) * PI/8;
this.handL.position.x = -Math.cos( t + PI) * amp;
this.handL.rotation.z = -Math.cos( t + PI) * PI/8;
}
if (step>6){
this.head.rotation.x = Math.cos( t ) * amp * .02;
this.head.rotation.y = Math.cos( t ) * amp * .01;
}
if (step>7){
if (t>PI){
this.legR.rotation.z = Math.cos(t * 2 + PI/2) * PI/4;
this.legL.rotation.z = 0;
} else{
this.legR.rotation.z = 0;
this.legL.rotation.z = Math.cos(t * 2 + PI/2) * PI/4;
}
}
}
function createHero() {
hero = new Hero();
hero.mesh.position.y=-15;
scene.add(hero.mesh);
}
var rot = -.2;
function loop(){
updateTrigoCircle(hero.runningCycle);
hero.run();
//rot+=.01;
hero.mesh.rotation.y = -Math.PI/4 + Math.sin(rot * Math.PI/8);
render();
requestAnimationFrame(loop);
}
function render(){
renderer.render(scene, camera);
}
window.addEventListener('load', init, false);
function init(event){
initScreenAnd3D();
createLights();
createHero();
loop();
initNav();
}
// Trigo Circle
var PI = Math.PI;
var trigoArc = document.getElementById("trigoArc");
var trigoLine = document.getElementById("trigoLine");
var trigoPoint = document.getElementById("trigoPoint");
var cosPoint = document.getElementById("cosPoint");
var sinPoint = document.getElementById("sinPoint");
var cosLine = document.getElementById("cosLine");
var sinLine = document.getElementById("sinLine");
var projSinLine = document.getElementById("projSinLine");
var projCosLine = document.getElementById("projCosLine");
var cAngle = 0;
var tp = {
radiusArc: 10,
centerX: 60,
centerY: 60,
radiusLines: 50,
};
function updateTrigoCircle(angle) {
angle %= PI * 2;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
var start = {
x: tp.centerX + tp.radiusArc * cos,
y: tp.centerY + tp.radiusArc * sin
};
var end = {
x: tp.centerX + tp.radiusArc,
y: tp.centerY
};
var arcSweep = angle >= PI ? 1 : 0;
var d = [ "M", tp.centerX, tp.centerY,
"L", start.x, start.y,
"A", tp.radiusArc, tp.radiusArc, 0, arcSweep, 0, end.x, end.y,
"L", tp.centerX, tp.centerY
].join(" ");
trigoArc.setAttribute("d", d);
trigoLine.setAttribute("x2", tp.centerX + cos * tp.radiusLines);
trigoLine.setAttribute("y2", tp.centerY + sin * tp.radiusLines);
trigoPoint.setAttribute("cx", tp.centerX + cos * tp.radiusLines);
trigoPoint.setAttribute("cy", tp.centerY + sin * tp.radiusLines);
cosPoint.setAttribute("cx", tp.centerX + cos * tp.radiusLines);
sinPoint.setAttribute("cy", tp.centerY + sin * tp.radiusLines);
cosLine.setAttribute("x2", tp.centerX + cos * tp.radiusLines);
sinLine.setAttribute("y2", tp.centerY + sin * tp.radiusLines);
projSinLine.setAttribute("x2", tp.centerX + cos * tp.radiusLines);
projSinLine.setAttribute("y2", tp.centerY + sin * tp.radiusLines);
projSinLine.setAttribute("y1", tp.centerY + sin * tp.radiusLines);
projCosLine.setAttribute("x2", tp.centerX + cos * tp.radiusLines);
projCosLine.setAttribute("x1", tp.centerX + cos * tp.radiusLines);
projCosLine.setAttribute("y2", tp.centerY + sin * tp.radiusLines);
}
!
