placing sprites using an array

Question

I am trying to place sprites on a canvas using an array however I an unable to get the sprites to draw correctly.

function preload() {
  fileContent = loadStrings('track.txt');
  grasssprite= loadImage('grass.png');
  tracksprite= loadImage ('track.jpg');

}

function setup() {
  createCanvas(500, 500);
 

  racetrack = new Array(fileContent.length);
  for (let i = 0; i < racetrack.length; i++) {
    let tiles = splitTokens(fileContent[i]);
      for (let k = 0; k < racetrack.length; k++) {
        
        spr = createSprite(i * 1 + 1, k * 10 + 1, 1, 1);
        
        
        if (tiles[i] == "1") {
          
          spr.addImage(grasssprite);
        }
        if (tiles[i] == "0") {
          
          spr.addImage(tracksprite); 
        }
        
        
      }
  }
}

function draw() {
  background(220);

  drawSprites()
}




the txt file looks like this:
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 1 1 1 1 1 1 1 1 1 1 1 0 0
0 0 1 0 0 0 0 0 0 0 0 0 1 0 0
0 0 1 0 0 0 0 0 0 0 0 1 1 0 0
0 0 1 0 0 0 0 0 0 0 0 1 0 0 0
0 0 1 0 0 0 0 0 0 0 0 1 1 0 0
0 0 1 0 0 0 0 0 0 0 0 0 1 0 0
0 0 1 0 0 0 0 0 0 0 0 0 1 0 0
0 0 1 0 0 0 0 1 1 1 0 0 1 0 0
0 0 1 0 0 0 0 1 0 1 0 0 1 0 0
0 0 1 1 1 1 1 1 0 1 1 1 1 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

'''

I know the issue is the xy location of the spr=createsprite line but I cant seem to figure it out. anyone able to give me some pointers?

score 1 · Answer 1 · answered Sep 19 '21 at 22:13

Your code had a number of minor issues. It's hard to say for sure that that's all the problems because you didn't include the runnable code (there could be an issue with the versions of p5.play and p5.js you were referencing).

// You should pre-declare variables before assigning them
// This isn't mandatory but it is a good practice
let grassprite;
let tracksprite;
let fileContent;
let racetrack;

// You were drawing sprites 1x1 which is very small
const spriteSize = 5;

function preload() {
  grasssprite = loadImage("https://www.paulwheeler.us/files/stackoverflow69240406/grass.png");
  tracksprite = loadImage("https://www.paulwheeler.us/files/stackoverflow69240406/road.png");
  fileContent = loadStrings("https://www.paulwheeler.us/files/stackoverflow69240406/track.txt");
}

function setup() {
  createCanvas(500, 500);
  
  // You may need to resize your images to match your sprite dimensions
  grasssprite.resize(spriteSize, spriteSize);
  tracksprite.resize(spriteSize, spriteSize);

  racetrack = new Array(fileContent.length);
  for (let i = 0; i < racetrack.length; i++) {
    let tiles = splitTokens(fileContent[i]);
    // There's no point in having a racetrack array if you aren't going to put
    // anything in it. This may or may not be useful later.
    // Perhaps you actually want to have an array containing your sprites?
    racetrack[i] = tiles;
    // You should be using tiles.length here instead of racetrack.length
    // Although since your track.txt file is square it would still technically work
    for (let k = 0; k < tiles.length; k++) {
      
      let spr = createSprite(i * spriteSize + 1, k * spriteSize + 1, spriteSize, spriteSize);

      // you were reading tiles[i], you meant tiles[k]
      if (tiles[k] == "1") {
        spr.addImage(grasssprite);
      }
      if (tiles[k] == "0") {
        spr.addImage(tracksprite);
      }
    }
  }
}

function draw() {
  background(220);

  drawSprites();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://www.paulwheeler.us/files/p5.play.js?r=0"></script>

I think your instructor needs to teach the entire class the basics of JavaScript debugging and troubleshooting.

placing sprites using an array

1 Answers1