Set 06 (Due 10/8)

Take a breath! This is a “catch-up week” with a much lighter-than-usual set of Deliverables.

  • Please read Chapter 10 of GSWp5js, “Objects”.
  • There is no Looking Outwards for this week. (Please note that we will skip “Looking-Outwards 06” in the numbering.)
  • There is no Creative Project for this week. (Please note that we will skip “Project 06” in the numbering.)
  • Students who so wish, are invited to complete the optionalPoints-Back Packet” in order to get up to 50% of the missed points back on their Lab Exam 1. (Please note that this packet is due, on paper, by the end of your lab/recitation section on Tuesday, October 6).

There is only one programming Assignment in the Week 06 Deliverables. It is due by 11:59pm EDT on Thursday, October 8th. This is Assignment-06-A, Planting the Flag, which is described below.

In addition, you are asked to view the following 10-minute video by Dan Shiffman, on JavaScript objects. It would be best if you could view this video (and read Chapter 10 of GSWp5js) by Monday (or Tuesday for Golan’s section):


Assignment-06-A: Planting the Flag

In this Assignment, which should be uploaded to Autolab, you are asked to perform a specific modification to the sketch below.

Please study the following sketch, which generates an ever-changing green terrain against a blue sky. On each frame, the sketch uses a custom function called calculateAndRenderTerrain() in order to compute and display the procedural landscape you see. (The guts of this function have been deliberately obfuscated; its details are not relevant, and are not meant to be legible to you.) As a side effect of its actions, this function also populates a global array of numbers called terrain. This array is what you will be analyzing in order to perform the requested modification.

sketch

var terrain = [];

function placeFlagsOnTerrain() {
  // PLACE YOUR CODE HERE
}

//----------------------------------------------------------------------
// There should be no reason for you to modify any code below this line: 
function setup() {
  createCanvas(640, 240);
}

function draw() {
  background(160, 190, 255);
  calculateAndRenderTerrain();
  placeFlagsOnTerrain();
}

// This obfuscated function generates the terrain:
function calculateAndRenderTerrain() {
  eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};
  if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}
  k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)
  {if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}
  ('c(6);b(4,6,4);9(a 3=0;3<d;3++){8[3]=e(h((3/7.0)+(g()/(7*4))),0,1,5*0.2,5);\
  f(3,8[3],3,5)}',18,18,'|||x|10|height|90|120|terrain|for|var|stroke|\
  noiseSeed|width|map|line|millis|noise'.split('|'),0,{}))
}

Your job is to write code which automatically plants small flags on the hills of this landscape. Here’s an example of what your flags (or trees, streetsigns, cell towers, skyscrapers, etc.) might look like:

terrain

For this Assignment, how your flags look is entirely up to you. However, what is crucially important is where they are placed. You must ensure that your flags are placed at the tops of the terrain’s hills.

You will observe that there is an empty function called placeFlagsOnTerrain(). This is the place where you should put your code to draw the flags. Please note that there should not be any reason for you to modify setup(), draw(), or calculateAndRenderTerrain().

We suggest that you create a helper function (e.g. drawFlag()) that draws a flag at a specific location. Then the placeFlagsOnTerrain() function can analyze the terrain, and invoke the drawFlag() command as necessary.

function placeFlagsOnTerrain() {
    // PLACE YOUR CODE HERE
}
 
function drawFlag (fx, fy){
    // draw a flag at location (fx, fy) ...
}

Here’s how to get started: 

peak

  • Please use our lightweight sketch template (template-p5only.zip).
  • The landscape geometry is stored in an array called terrain. The numbers stored in this array represent the vertical positions of the landscape, for every pixel across the canvas.
  • To do your job, you’ll need to know how many numbers are stored in the terrain array. However, a variable representing that quantity–the number of data elements stored in terrain–has not been explicitly given to you. Therefore, you’ll have to ask terrain for its length.
  • To figure out where (or whether) a flag should be placed, study the diagram above, and read the following instructions carefully:
    • Step through every* element of the terrain array.
    • You will need to compare each value in the array, with the values of its neighbors. To do this, fetch each element in the array (a number which we might call num). Additionally, fetch the number to its left (call it numL), and the number to its right (call it numR). You must then compare num with numL and numR.
    • A flag should be placed at a given location (corresponding with the value num) when num is a “peak” relative to its two neighbors, numL and numR. What are the logical and arithmetic conditions that make num a peak? This is for you to deduce.
    • Make sure that you’re planting the flags on the hills (and not the valleys) of the terrain.
    • *JavaScript is tolerant of array access operations that would customarily cause exceptions, access violations, buffer overflows, or segmentation faults in other languages. If you’d like to earn a bonus point, implement some simple index checking, so that your array accesses respect the valid indices (or “boundary conditions”) of the terrain array. If you don’t understand what this means, see the diagram below, or don’t worry about it for now. This may bite you in the butt someday, but not this week. Sigh.
  • Don’t forget to comment your code, and please give attention to code style.

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-06-A
  • Name your project UserID-06-a. For example, if your Andrew ID is placebo, then your project name should be placebo-06-a.
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder. (Since you’re using our lightweight sketch template, there will be no libraries subdirectory to include.)

UPDATE. A few of you have pointed out that some flags seem to flicker. (The issue affects roughly one flag in fifty). We’ve seen the issue you’re referring to; it can be observed in the 42nd and 99th peaks in the current scene. It occurs because of very small differences arising from round-off errors in how the noise() function is being re-sampled.  This issue is an unintended bug on our part. After it was pointed out, we thought of a way to eliminate the problem, but fixing it would require sending out a “patch” to replace the obfuscated code we gave out above. The key information is that this issue is NOT YOUR FAULT and you should just ignore it. The core problem is to make sure you understand how to compare an element of an array with its neighbors.

(The diagram below explains why index checking can be important.)

array_access