Quiz

1. I don't fully understand the .map method array. Why do we square each of the elements, or what happens in this line "const sqs = nums.map( x => x*x )"? Thank you!

   Thanks for this question. Let's take it step by step, starting with Python's list comprehensions:

   
   squares = [ x*x for x in nums ]
   
   

   But if the code is complicated, bulky, or hairy, you might want a function instead:

   
   vals = [ hairy(x for x in nums ]
   
   

   JavaScript can do the same thing, mapping a function across an array (list):

   
   const vals = nums.map(hairy);
   
   

   Take a moment to understand the syntax of that. There's no x variable, and there are no parens after hairy. Instead, the hairy function is given to map and map will invoke it.

   Alternatively, if the code isn't too hairy, we can use a simple function literal:

   
   const vals = nums.map(function (x) { return x*x; });
   
   

   Or, using arrow functions, it's even more compact:

   
   const vals = nums.map((x) => x*x);
   
   

   And now we've come full circle: mapping an expression across a list.

   That's what we are doing in the code that maps across a list of filenames.

2. can you elaborate on the loading situation for textures. How do we make sure that the load is complete before we render the scene? The reading talks about the event handler, but how do we implement that? Does the code automatically wait for the loading event to finish? or is that something we need to manually adjust.  sort of related, are there ways to estimate the amount of time to load a scene, so that during the creation process, we have a rough idea of how long we will need to be waiting (cuz if its a huge scene with lots of textures, and its gonna take more than 5 minutes, i'm gonna go grab icecream)

   Wonderful question, and cleverly written.

   Part 1: the structure of callback-based coding is like this:

   
   startEvent( args, afterFunction);
   
   

   The startEvent function initiates the event, using the arguments, and when the event happens or when the event is completed, it invokes the afterFunction.

   JavaScript has used that ability for a long time.

   For example, our keyboard callback setup:

   
   TW.setKeyboardCallback("1", fred, "camera setup 1");
   
   

   The Threejs function is like that:

   
   loader.load("imagefile.png", useTexture);
   
   

   Part 2:

   I've seen student webpages where they display 5-10 images from their phones (each of which are enormous) and it can take 30 seconds for the page to load. So, not enough time for ice cream, but don't do that. Resize the image to be a bit more frugal, if possible.

   We'll look at this example next week: texture mapping with Caravaggio and even that image is only 149KB.

3. Could you explain parallelism a little more? I got a bit confused in the reading, when it was mentioned in regards to .map.

   Yes, this is an important question! The map method is not parallel, but it can initiate parallel events:

   
   const promises = filenameArray.map(a => loader.loadAsync(a));
   const textures = await Promise.all(promises);
   
   

   Suppose I need six large items from my office, say mounted posters. I send six students, at the same time.

   Then, I wait for all six to have returned.

   Once that happens, I can continue with what I wanted to do with them.

4. I'd be curious to know more about the section on asynchronous programming -- what might an alternative method look like, and why would it be "worse?"

   The worse way would be:

   
       for (let i=0; i<6; i++ ) {
           await load(filenameArray[i]);                    
       }
   
   

   That sends one student at a time, waiting for them to return, before sending the next.