Tile drawing is not displaying

Question

I'm working on this code where if you put in certain characters for the map array, the canvas will display the image corresponding to that character. I have an array for all the ground blocks, at the top. Here's my code so far: However, nothing seems to be drawing to the screen. I believe this might be a problem with

Accepted Answer

There are a bunch of defects in your code:You are replacing the ground array with a single instance of Ground in your setup() functionYou are pushing a reference to ground into itself ion your for loop that initializes itdrawImage() is not a function, perhaps you mean image() in Ground.drawIn your main draw() function you are treating ground like an array of objects with a .draw() function, but ground is either a single instance of Ground and not an array, or it is an array of arrays of Ground objects.Here’s a working example: const blockSize = 16;let ground = [];function setup() { createCanvas(400, 400);}function preload() { groundImg = loadImage('https://mars.stcollier.repl.co/images/ground.png');}let map = [ [ "################", "#####000000#####", "####0######0####", "###0##0##0##0###", "###0########0###", "###0##0##0##0###", "###0###00###0###", "####0######0####", "#####000000#####", "################" ]];// This code could be moved to the setup() function, but in any case it cannot be run until the Ground class is actually declaredfunction init() { for (var i = 0; i < map.length; i++) { ground.push([]); for (var y = 0; y < map[i].length; y++) { for (var x = 0; x < map[i][y].length; x++) { switch (map[i][y][x]) { case "#": // I'm assuming that this is what you actually intended to do // Instead of pushing a reference to the ground array into itself ground[i].push(new Ground(x*blockSize,y*blockSize)); break; } } } }}function draw() { for (var i = 0; i < ground.length; i++) { // ground contains arrays of Ground objects, not sure why for (var j = 0; j < ground[i].length; j++) { ground[i][j].draw(); } }}class Ground { constructor(x, y) { this.pos = new p5.Vector(x, y) } draw() { image(groundImg, this.pos.x, this.pos.y, blockSize, blockSize) }}// Don't call init() until the Ground class is actually declaredinit(); Some honest feedback: you need to work on your basic debugging. When you run your code and it doesn’t work check the JavaScript console. Look at the error message in detail. Look for the line in your code where the error is being thrown and make an effort to deduce why it might be happening. When your code doesn’t do what you expect but doesn’t show errors, add console.log() statements to see if your expectations are valid. Think about what each line of code is doing (i.e. do things like ground[i].push(ground) make any kind of sense whatsoever).How I Debugged Your CodeRun the code, nothing happened, no errors 😕Add console.log('drawing: ' + ground.length) to the draw() function (and add noLoop() to prevent the log getting spammed).Result: drawing: undefinedThat is odd, I thought ground was an array 🤨Scan the code for assignments to ground, discover that ground is initialized twice, once as an array, and once as new Ground().Since the latter (new Ground()) makes no sense, comment it out.Hit the run button, TypeError: ground[i].draw is not a function coming from line 48 (inside the main draw() function)Look at the code that initializes ground in more detail, realize that it is an array of arrays, correct the code in draw() to have a nested loop.Run the code: TypeError: ground[i][j].draw is not a functionLook at the ground initialization code more more depth, notice ground[i].push(ground) 🤯At a guess this should be ground[i].push(new Ground(...)), give that a tryRun the code: ReferenceError: Cannot access 'Ground' before initializationThis is a facet of JavaScript, you cannot use Classes in running code before they are declared (although you can reference them in the body of a function so long as that function is not called until the Class is declared).At this point we can either move the ground initialization code into setup() or a special init function that we invoke ourselves after declaring the Ground class.I opted for the custom init functionRun the code: ReferenceError: createVector is not definedOops, I forgot that p5.js functions like createVector are not available globally until setup() is called 🤦‍♂️. I would have avoided this if I had moved the ground initialization code to setup(), but fortunately we can use new p5.Vector() any time.Run the code: ReferenceError: drawImage is not definedeasy fix, should be image()Success 🎊

Advertisement

Answer

How I Debugged Your Code