I'm trying to compare two sets of coordinates and plot matches if they're close enough, but code won't compile?

user_12609637 0
Viewed 104

I'm trying to draw possible matches according to the instructions in the code but the code is not compiling and I can't figure out what the error is. I would appreciate all help on this.

My code editor is giving me the error 'Parsing error: Unexpected token i' at this line of my code -> for(let i = 0 ; i < possibleMatches.length ; i++)

This is the map so far where I've plotted CriminalSightings and AttackRecorded: enter image description here

Here is the code:

/*
Officer: 3357927
CaseNum: 601-2-69352192-3357927

Case 601 - Murdering Again - stage 3

Now murders are beginning to occur - we're pretty sure that this is the work of Fry.
If we can place her near any of the recent crime scenes in the area we should be able narrow down her location.

In the setup function, use a for loop to traverse the sightings, marking all of the locations on the map
where she was last seen. Do this by drawing small, Goldenrod fill rectangles centered over each location.

In addition, we've assembled a list of recent thefts in the area. Using another for loop to traverse the
recent crime records, you should mark those locations on the map. Do this by drawing small, DarkGoldenrod fill triangles centered over each location.

Use X11 colours. You can find a reference table at https://en.wikipedia.org/wiki/Web_colors.

Let's try to catch Fry by looking patterns between sightings and crimes. If she was within less than 97 pixels of any of the crimes then the details
should be pushed to possible matches with the following format.

{ crime:{x: 0, y:0, victimName: "John Doe"}, suspect:{x: 0, y:0} }

Note that the possible matches are already being drawn.
Your job is simply to fill the array with the correct data.

For this mission you will need ONLY the following:

- for loop
- dist()
- if()
- fill
- rect() NB. Draw each rectangle with the point at its center.

- fill
- triangle() NB. Draw each triangle with the point roughly at its center.


*/

var countyMap;

var possibleMatches = [];

//Sightings of Casey Fry.

var CriminalSightings = [ 
  { Loc_X : 639, Loc_Y : 288},
  { Loc_X : 681, Loc_Y : 286},
  { Loc_X : 712, Loc_Y : 293},
  { Loc_X : 756, Loc_Y : 310},
  { Loc_X : 715, Loc_Y : 368},
  { Loc_X : 701, Loc_Y : 425},
  { Loc_X : 753, Loc_Y : 436},
  { Loc_X : 815, Loc_Y : 468},
  { Loc_X : 795, Loc_Y : 506},
  { Loc_X : 788, Loc_Y : 497},
  { Loc_X : 781, Loc_Y : 486},
  { Loc_X : 768, Loc_Y : 489},
  { Loc_X : 750, Loc_Y : 500},
  { Loc_X : 732, Loc_Y : 506},
  { Loc_X : 714, Loc_Y : 514},
  { Loc_X : 695, Loc_Y : 531},
  { Loc_X : 693, Loc_Y : 552},
  { Loc_X : 654, Loc_Y : 523},
  { Loc_X : 624, Loc_Y : 500},
  { Loc_X : 594, Loc_Y : 484},
  { Loc_X : 555, Loc_Y : 474} 
];


//Recent crime records.

var AttackRecorded = [ 
  { coordinate_x : 409, coordinate_y : 446, victim_name : 'JENIFFER DEAUVILLE'},
  { coordinate_x : 443, coordinate_y : 419, victim_name : 'JACQUELINE DURANTS'},
  { coordinate_x : 465, coordinate_y : 548, victim_name : 'BRAD SILVEIRA'},
  { coordinate_x : 709, coordinate_y : 552, victim_name : 'DRUSILLA WARMAN'},
  { coordinate_x : 695, coordinate_y : 421, victim_name : 'LINETTE MOHWAWK'},
  { coordinate_x : 652, coordinate_y : 268, victim_name : 'SUMMER CASIMERE'},
  { coordinate_x : 641, coordinate_y : 306, victim_name : 'NELSON TINTLE'},
  { coordinate_x : 119, coordinate_y : 344, victim_name : 'HANG NIEMELA'},
  { coordinate_x : 114, coordinate_y : 359, victim_name : 'LAVERNE JACQUELIN'},
  { coordinate_x : 90, coordinate_y : 490, victim_name : 'JESSIA PORTOS'},
  { coordinate_x : 76, coordinate_y : 516, victim_name : 'TU DAVISWOOD'},
  { coordinate_x : 615, coordinate_y : 741, victim_name : 'LARRAINE PEGORD'},
  { coordinate_x : 349, coordinate_y : 796, victim_name : 'LIANNE COURTWOOD'},
  { coordinate_x : 456, coordinate_y : 770, victim_name : 'NICOLE ASHELY'} 
];


function preload()
{
    countyMap = loadImage("map.png")
}

function setup()
{
  createCanvas(countyMap.width, countyMap.height);

    image(countyMap, 0,0);

    //add your code below here
    noFill();
    stroke(218, 165, 32);
    for (i = 0; i < CriminalSightings.length; i++){
        var sighting = CriminalSightings[i]
        
        rect(sighting.Loc_X - 5, sighting.Loc_Y - 5, 5, 5);

        }
    stroke(184, 134, 11);
    for (j = 0; j < AttackRecorded.length; j++){
        var record = AttackRecorded[j]
        
        triangle(record.coordinate_x, record.coordinate_y -5,record.coordinate_x - 5, record.coordinate_y + 5, record.coordinate_x + 5,record.coordinate_y + 5  );

        }
    
   for(var i =0; i<CriminalSightings.length; i++ ) 
   {
       for(var j = 0;AttackRecorded.length; j++ )
           {
       if(dist(CriminalSightings[i].Loc_X,CriminalSightings[i].Loc_Y,AttackRecorded[j].coordinate_x,AttackRecorded[j].coordinate_y) < 97)
        {
            possibleMatches.push
            ({ crime:{x: AttackRecorded[j].coordinate_x, y:AttackRecorded[j].coordinate_y, victimName: AttackRecorded[j].victim_name}, suspect:{x: CriminalSightings[i].Loc_X, y:CriminalSightings[i].Loc_Y} })
        }
            }
   }
    // code to draw the matches ( if any)
    for(let i = 0 ; i < possibleMatches.length ; i++)
    {
        stroke(127);
        strokeWeight(3);
        line(possibleMatches[i].crime.x, possibleMatches[i].crime.y, possibleMatches[i].suspect.x, possibleMatches[i].suspect.y);

        noStroke();
        fill(127);
        text(possibleMatches[i].crime.victimName, possibleMatches[i].crime.x + 15, possibleMatches[i].crime.y + 15);
    }
}

//We are not using the draw function this time

p5.js object for-loop javascript
1 Answers

If you look at the JavaScript Console of your browser you will see an error.

In this case it's: YourSketchName.js:### Uncaught TypeError: Cannot read property 'coordinate_x' of undefined it will the line number and you can click on the first error location and see where that is in code, something like:

if (dist(CriminalSightings[i].Loc_X, CriminalSightings[i].Loc_Y, AttackRecorded[j].coordinate_x, AttackRecorded[j].coordinate_y) < 97)

What the error is saying is that it's expecting an object with a coordinate_x property and instead it's got undefined. Something is missing, but why ?

Generally when this happens it helps look at the lines nearby for context:

for (var i =0; i < CriminalSightings.length; i++ ) 
  {
    for (var j = 0; AttackRecorded.length; j++ )
    {
      if (dist(CriminalSightings[i].Loc_X, CriminalSightings[i].Loc_Y, AttackRecorded[j].coordinate_x, AttackRecorded[j].coordinate_y) < 97)
      {
      }
    }
  }

You do have two counters, one for each array that you iterate through, however a typo slipped through.

You can spot the difference between:

for (var i =0; i < CriminalSightings.length; i++ )

and

for (var j = 0; AttackRecorded.length; j++ )

You're missing the correct condition:

for (var j = 0; j < AttackRecorded.length; j++ )

The part that hides is issue a bit is the fact that AttackRecorded.length is a number that is greater than 0: in an if condition this will evaluate as true. That means the j counter will increase past 13: last valid index for the AttackRecorded array, hence undefined (there is nothing at index 14 onwards).

You can run a test bellow. After running the code snippet either use the "Full page" link or the scroll bars to see the distance map on the bottom right side.

var countyMap;

var possibleMatches = [];

//Sightings of Casey Fry.

var CriminalSightings = [ 
  { Loc_X : 639, Loc_Y : 288},
  { Loc_X : 681, Loc_Y : 286},
  { Loc_X : 712, Loc_Y : 293},
  { Loc_X : 756, Loc_Y : 310},
  { Loc_X : 715, Loc_Y : 368},
  { Loc_X : 701, Loc_Y : 425},
  { Loc_X : 753, Loc_Y : 436},
  { Loc_X : 815, Loc_Y : 468},
  { Loc_X : 795, Loc_Y : 506},
  { Loc_X : 788, Loc_Y : 497},
  { Loc_X : 781, Loc_Y : 486},
  { Loc_X : 768, Loc_Y : 489},
  { Loc_X : 750, Loc_Y : 500},
  { Loc_X : 732, Loc_Y : 506},
  { Loc_X : 714, Loc_Y : 514},
  { Loc_X : 695, Loc_Y : 531},
  { Loc_X : 693, Loc_Y : 552},
  { Loc_X : 654, Loc_Y : 523},
  { Loc_X : 624, Loc_Y : 500},
  { Loc_X : 594, Loc_Y : 484},
  { Loc_X : 555, Loc_Y : 474} 
];


//Recent crime records.

var AttackRecorded = [ 
  { coordinate_x : 409, coordinate_y : 446, victim_name : 'JENIFFER DEAUVILLE'},
  { coordinate_x : 443, coordinate_y : 419, victim_name : 'JACQUELINE DURANTS'},
  { coordinate_x : 465, coordinate_y : 548, victim_name : 'BRAD SILVEIRA'},
  { coordinate_x : 709, coordinate_y : 552, victim_name : 'DRUSILLA WARMAN'},
  { coordinate_x : 695, coordinate_y : 421, victim_name : 'LINETTE MOHWAWK'},
  { coordinate_x : 652, coordinate_y : 268, victim_name : 'SUMMER CASIMERE'},
  { coordinate_x : 641, coordinate_y : 306, victim_name : 'NELSON TINTLE'},
  { coordinate_x : 119, coordinate_y : 344, victim_name : 'HANG NIEMELA'},
  { coordinate_x : 114, coordinate_y : 359, victim_name : 'LAVERNE JACQUELIN'},
  { coordinate_x : 90, coordinate_y : 490, victim_name : 'JESSIA PORTOS'},
  { coordinate_x : 76, coordinate_y : 516, victim_name : 'TU DAVISWOOD'},
  { coordinate_x : 615, coordinate_y : 741, victim_name : 'LARRAINE PEGORD'},
  { coordinate_x : 349, coordinate_y : 796, victim_name : 'LIANNE COURTWOOD'},
  { coordinate_x : 456, coordinate_y : 770, victim_name : 'NICOLE ASHELY'} 
];


//function preload()
//{
//    countyMap = loadImage("map.png")
//}

function setup()
{
  // placeholder for map.png, for demo purposes only
  countyMap = createImage(900, 900);
  createCanvas(countyMap.width, countyMap.height);

    image(countyMap, 0,0);

    //add your code below here
    noFill();
    stroke(218, 165, 32);
    for (i = 0; i < CriminalSightings.length; i++){
        var sighting = CriminalSightings[i]
        
        rect(sighting.Loc_X - 5, sighting.Loc_Y - 5, 5, 5);

        }
    stroke(184, 134, 11);
    for (j = 0; j < AttackRecorded.length; j++){
        var record = AttackRecorded[j]
        
        triangle(record.coordinate_x, record.coordinate_y -5,record.coordinate_x - 5, record.coordinate_y + 5, record.coordinate_x + 5,record.coordinate_y + 5  );

        }
    
   for(var i =0; i<CriminalSightings.length; i++ ) 
   {
       for(var j = 0; j < AttackRecorded.length; j++ )
           {
       if(dist(CriminalSightings[i].Loc_X,CriminalSightings[i].Loc_Y,AttackRecorded[j].coordinate_x,AttackRecorded[j].coordinate_y) < 97)
        {
            possibleMatches.push
            ({ crime:{x: AttackRecorded[j].coordinate_x, y:AttackRecorded[j].coordinate_y, victimName: AttackRecorded[j].victim_name}, suspect:{x: CriminalSightings[i].Loc_X, y:CriminalSightings[i].Loc_Y} })
        }
            }
   }
    // code to draw the matches ( if any)
    for(let i = 0 ; i < possibleMatches.length ; i++)
    {
        stroke(127);
        strokeWeight(3);
        line(possibleMatches[i].crime.x, possibleMatches[i].crime.y, possibleMatches[i].suspect.x, possibleMatches[i].suspect.y);

        noStroke();
        fill(127);
        text(possibleMatches[i].crime.victimName, possibleMatches[i].crime.x + 15, possibleMatches[i].crime.y + 15);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

I recommend checking out Kevin Workman's How to Debug Tutorial: it's pretty good at explaining how to break a bigger problem down into smaller chunks and little by little debugging/fixing code.

user_897660
Related