17 Jun 2014, 17:50
Generic-user-small

Niko Bercovici (1 post)

Hello. I am currently on chapter 6: Moving Hands and Feet. Everything is working, except for one thing: when I let go of my arrow keys, my avatar’s hands keep moving! What happened? This is my code:

<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>

  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
var marker = new THREE.Object3D();
scene.add(marker);

var cover = new THREE.MeshNormalMaterial();
var body = new THREE.CylinderGeometry(1,75,110,20);
var avatar = new THREE.Mesh(body,cover);
avatar.position.set(0,-90,0)
marker.add(avatar);

var shape = new THREE.SphereGeometry(65);
var head = new THREE.Mesh(shape,cover);
head.position.set(0,120,0);
avatar.add(head);

var hand = new THREE.SphereGeometry(25);
var right_hand = new THREE.Mesh(hand, cover);
right_hand.position.set(-55,20,0);
avatar.add(right_hand);

var left_hand = new THREE.Mesh(hand,cover);
left_hand.position.set(55,20,0);
avatar.add(left_hand);

var foot = new THREE.CubeGeometry(50,25,35);
var right_foot = new THREE.Mesh(foot,cover);
right_foot.position.set(-60, -75, 0);
avatar.add(right_foot);

var left_foot = new THREE.Mesh(foot,cover);
left_foot.position.set(60,-75,0);
avatar.add(left_foot);

marker.add(camera)

makeTreeAt(500, 0);
makeTreeAt(-500, 0)
makeTreeAt(750, -1000);
makeTreeAt(-750, -1000);

function makeTreeAt(x,z) {
var trunk = new THREE.Mesh(
new THREE.CylinderGeometry(50,50,200),
new THREE.MeshBasicMaterial({color: 0xA0522D})
  );
  
var top = new THREE.Mesh(
new THREE.SphereGeometry(150),
new THREE.MeshBasicMaterial({color: 0x228B22})
);

top.position.y = 175;
trunk.add(top);
trunk.position.set(x, -75, z);
scene.add(trunk);    }   // Now, show what the camera sees on the screen:   renderer.render(scene, camera);
  
  // Now, animate what the camera sees on the screen:
  var clock = new THREE.Clock(true);
  
  function animate() {
  requestAnimationFrame(animate);
  walk();
  acrobatics();
  renderer.render(scene, camera);
  }
  animate();
  
  function walk() {
 if (!isWalking()) return;
 var position = Math.sin(clock.getElapsedTime()*5) * 50;
 right_hand.position.z = position;
 left_hand.position.z = -position;
 right_foot.position.z = -position;
 left_foot.position.z = position;
 }
  
  var is_cartwheeling = false;
 var is_flipping = false;
 var is_twirling = false;
  
 function acrobatics() {
if (is_cartwheeling) {
  avatar.rotation.z  = avatar.rotation.z + 0.05;
}
 if (is_flipping) {
  avatar.rotation.x  = avatar.rotation.x + 0.05;
}
 if (is_twirling) {
  avatar.rotation.y  = avatar.rotation.y + 0.05;
}
 }
  
  // Listen for keypress events:
  var is_moving_right, is_moving_left, is_moving_forward, is_moving_back;
  
  function isWalking () {
if (is_moving_right) return true;
if (is_moving_left) return true;
if (is_moving_forward) return true;
if (is_moving_back) return true;
return false;
 }
  
 document.addEventListener('keydown', function(event)  {
var code = event.keyCode;

if (code == 37) marker.position.x = marker.position.x - 5; // left
is_moving_left = true; 

if (code == 38) marker.position.z = marker.position.z - 5; // up
is_moving_forward = true;

if (code == 39) marker.position.x = marker.position.x + 5; // right
is_moving_right = true

if (code == 40) marker.position.z = marker.position.z + 5; // down
is_moving_back = true;

if (code == 67) is_cartwheeling = !is_cartwheeling; // cartwheeling
if (code == 70) is_flipping = !is_flipping; // flipping
if (code == 84) is_twirling = !is_twirling; // twirling   });

document.addEventListener('keyup', function(event) {   var code = event.keyCode;   if (code == 37) is_moving_left = false;   if (code == 38) is_moving_forward = false;   if (code == 39) is_moving_right = false;   if (code == 40) is_moving_back = false; }); </script>
19 Jun 2014, 02:17
Chris_strom_headshot_200_pragsmall

Chris Strom (138 posts)

Sorry. That looks to be an oversight in the way that I described how to make the change to the movement controls at the top of page 65 (in the keydown event listener).

The book says to add the lines indicated, like is_moving_left as you have done:

  if (code == 37) marker.position.x = marker.position.x - 5; // left
  is_moving_left = true; 

The problem with this is that it updates marker.position.x only if the keyboard code is 37, but it always sets is_moving_left to true. Since is_moving_left, is_moving_right, is_moving_forward and is_moving_back all do the same thing, all of them are always set to true. Since all of them are true the isWalking() function always thinks the player is walking, which is why your playing keeps swinging its arms and legs.

What the book should say (and I’ve made a note to fix this) is to add curly braces around the code and add the is_moving_left line:

  if (code == 37) {
    marker.position.x = marker.position.x - 5; // left
    is_moving_left = true; 
  }

With that, the stuff inside the curly braces is only run if the keyboard code is 37. So is_moving_left is only set to true if the left arrow key was pressed down.

The full code for the keydown listener should be:

document.addEventListener('keydown', function(event)  {
  var code = event.keyCode;

  if (code == 37) {
    marker.position.x = marker.position.x - 5; // left
    is_moving_left = true; 
  }

  if (code == 38) {
    marker.position.z = marker.position.z - 5; // up
    is_moving_forward = true;
  }

  if (code == 39) {
    marker.position.x = marker.position.x + 5; // right
    is_moving_right = true
  }

  if (code == 40) {
    marker.position.z = marker.position.z + 5; // down
    is_moving_back = true;
  }

   if (code == 67) is_cartwheeling = !is_cartwheeling; // cartwheeling
   if (code == 70) is_flipping = !is_flipping; // flipping
   if (code == 84) is_twirling = !is_twirling; // twirling   
});

Apologies for the confusion, but thanks for posting this to the forum. It’ll help to get it fixed for the next edition of the book!

If you have any other questions or problems, let me know :)

27 Jun 2014, 22:02
Generic-user-small

Thomas Koon (13 posts)

WAIT THERES GONNA BE A NEXT EDITION?????/ OWEOQWEUQWEOIQWIOEQWEJIQWOEHQWIOEHOQWI

10 Jul 2014, 20:13
Chris_strom_headshot_200_pragsmall

Chris Strom (138 posts)

Sorry, there are no immediate plans for a next edition. Eventually there will be, but not in 2014.

Depending on how many problems crop up, we might issue an errata release which would result in minor changes to the ebook versions. So far there have not been many of those, but it’s possible that we might make some minor changes (like the note above) before the year is out.

23 Sep 2014, 21:53
Generic-user-small

Chet Nitza (4 posts)

Hi. I am working on chapter 6: Moving Hands and Feet. I am on page 61. After changing the animate function in flipping and cartwheeling to acrobatics it started to lock up and I can’t type anything. Thank you for any help you can give me.

23 Sep 2014, 22:10
Chris_strom_headshot_200_pragsmall

Chris Strom (138 posts)

You need to go into edit-only mode https://github.com/eee-c/ice-code-editor/wiki#if-ice-freezes and undo or fix the last thing that you did.

If you can’t figure out what’s wrong in the animate function, post the code in here and I’ll have a look. To paste, either use the link from the Share menu item in ICE or copy and paste everything in between triple tildes:

 ~~~
 // Paste your code here...
 ~~~
24 Sep 2014, 15:40
Generic-user-small

Chet Nitza (4 posts)

Thank you so much for your help. I figured out the problem! I forgot to remove a line. Thank you again!

01 Oct 2014, 17:30
Generic-user-small

david David (6 posts)

Hi there, my nine year old son is really enjoying your book but he is very stuck on one part of it. Both my wife and I have checked what he has written and can’t tell where he has gone wrong. Can you help? He says -

Can you please help me with the code on page 61, Moving Hands and Feet. I type everything else right, I think, but when I go into the Javascript console it says ‘cannot read property of GetElapsedTime’

Thanks in advance.

02 Oct 2014, 01:07
Chris_strom_headshot_200_pragsmall

Chris Strom (138 posts)

@David I think your son just needs to change GetElapsedTime to getElapsedTime. That is, the first letter should be lowercase in the code at the bottom of page 61:

function walk() {
  var position = Math.sin(clock.getElapsedTime()*10) * 100;
  right_hand.position.z = position;
}

If that doesn’t fix it, paste the code here (or use a share link) and I’d be happy to take a look!

03 Oct 2014, 17:55
Generic-user-small

david David (6 posts)

Hi, no that didn’t fix it. Thanks for your help though, he is tying himself up in knots trying to work it out.

 // Now, show what the camera sees on the screen:
  function animate() {
    requestAnimationFrame(animate);
    acrobatics();
    renderer.render(scene, camera);
  }
  animate();
  var is_cartwheeling = false;
  var is_flipping = false;
  function acrobatics() {
    if (is_cartwheeling) {
      avatar.rotation.z = avatar.rotation.z + 0.05;
    }
    if (is_flipping) {
      avatar.rotation.x = avatar.rotation.x + 0.05;    
    }   
  }
  
  var clock = new THREE.Clock(true);
  function animate() {
    requestAnimationFrame(animate);
    walk();
    acrobatics();
    renderer.render(scene, camera);
  }
  animate();
  function walk() {
    var position = Math.sin(clock.getElapsedTime()*10) * 100;
    right_hand.position.z = position;
  }
  <script>  
  
  //Listen for keypress events
  document.addEventListener('keydown', function(event) {
    var code = event.keyCode;
    if (code == 37) avatar.position.x = avatar.position.x-5; // left
    if (code == 38) avatar.position.z = avatar.position.z-5; // up
    if (code == 39) avatar.position.x = avatar.position.x+5; // right
    if (code == 40) avatar.position.z = avatar.position.z+5; // down
    
    if (code == 67) is_cartwheeling = !is_cartwheeling;      // C
    if (code == 70) is_flipping = !is_flipping;              // F
  });
</script>
03 Oct 2014, 19:58
Chris_strom_headshot_200_pragsmall

Chris Strom (138 posts)

That is not all of the code. I see a few things that might cause problems in there, but I can’t be sure unless I have the whole thing starting with the <body></body> tags on line 1 all the way through the very last </script> tag that you have included.

One thing that is not correct in what you have pasted is that there are two animate() functions. The first one should be deleted:

/***** DELETE ALL OF THE FOLLOWING *****/
 // Now, show what the camera sees on the screen:
  function animate() {
    requestAnimationFrame(animate);
    acrobatics();
    renderer.render(scene, camera);
  }
  animate();

This should leave only the animate() function immediately after the var clock line and the animate() call just above the walk() function.

The other thing that is going to cause problems is the <script> tag after the walk() function. That’s just going to generate a syntax error and refuse to do anything else.

If I had to guess, I think removing the first animate() function will solve the original problem, but no guarantees. If he still has problems, paste the whole code sample in here and I will take a look.

FWIW, this would be a tricky thing to track down. Your son did well to get the original error in the JavaScript console. Figuring it out from there is hard without JavaScript experience. The error that would have been generated from duplicate animate functions would be an obscure JavaScript “feature” that would eventually call the walk() function before the clock had been assigned. I don’t know if that makes sense to you or your son – it’s so obscure that it probably shouldn’t make sense(!). JavaScript is a wonderful programming language, except when it does weird things like that :D

04 Oct 2014, 07:31
Generic-user-small

david David (6 posts)

Hello my name is William. Thank you so much for helping me fix it. I took out the bit you said and also the

04 Oct 2014, 07:31
Generic-user-small

david David (6 posts)

Oh it went wrong. Hello my name is William. Thank you so much for helping me fix it. I took out the bit you said and also the script tag. It was this tag that was stopping it working. I am really liking your book so thank you for writing it! William

04 Oct 2014, 16:10
Chris_strom_headshot_200_pragsmall

Chris Strom (138 posts)

@William Yay! Nice work solving that. Bugs like that can be super frustrating, but the best programmers will keep working at it (even asking other programmers about it) until they solve the problem like you did.

Glad to hear you’re enjoying the book!

  You must be logged in to comment