[Newbie to p5.js] Making a mini avoidance game, hazard doesn't seem to be showing up?

FullArt

Hi there! I've recently taken up learning p5.js after a friend showed me its potential, and I wanted to try some simple but complete stuff, but I've not worked with anything like this for very long. I've ham-fisted together some of the examples from the p5.js site and youtube, and I got the movement of the player working, but I can't seem to display the hazards. I'm thinking the issue is purely somewhere between line 28 and 53, where the bulk of the hazard's code is but can't quite visualize all the variables physically. Any thoughts?

var canvasWidth = 700;
var canvasHeight = 400;
var yoff = 0.0;   

function setup() { 
  createCanvas(canvasWidth, canvasHeight);
} 


function draw() {
  drawBackground();
    drawCar();
}


//Car (player)
var car = {
  x : 50,
  y : 230,
  draw : function() {
    fill(0);
    rect(this.x, this.y, 50, 50);
    }
}



//Rock (enemies to avoid)
var rocks = [];

function rock(I) {
  I.active = true;
  I.yvelocity = 2;
  I.width = 20;
  I.height = 20;
  I.y = Math.random() * (canvasHeight-I.height);
  I.x = 400;
  I.inBounds = function() {
    return I.x >= 700 && I.x < canvasWidth + I.width;
  };
  I.draw = function() {
    //fill(0); this comes up as an error every now and then, not sure how to add 
    //this attribute to the var in the array, unlike I did with the car. 
    //The rect attribute also comes up with an error sometimes
    rect(I.x, I.y, I.width, I.height);
  };
  I.update = function() {
    I.active = I.active && I.inBounds();
    I.x -= I.xvelocity;
  };
  return I;

}


//Background and setting
function drawBackground() { 
  background(175, 213, 255);
  //noStroke();
  fill(225, 212, 160);
  beginShape(); 
    var xoff = 0;     
    // Iterate over horizontal pixels
    for (var x = 0; x <= width; x += 10) {
        // Calculate a y value according to noise, map to 
        var y = map(noise(xoff, yoff), 0, 1, 100,200);
        vertex(x, y); 
        // Increment x dimension for noise
        xoff += 0.05;
    }
    // increment y dimension for noise
    yoff += 0.01;
    vertex(width, height);
    vertex(0, height);
  endShape(CLOSE);
}


//Car controls / drawing
function drawCar() {

  car.draw();
  if (keyIsDown(DOWN_ARROW)) {
    if (car.y + 5 >= 350)
      car.y = 350;
    else
      car.y += 5;
    }
    if (keyIsDown(UP_ARROW)) {
    if (car.y <= 150)
        car.y = 150;
    else
      car.y -= 5;
    }
}

if(Math.random() < 0.05){
    rocks.push(rock({}));
}

rocks = rocks.filter(function(rock){
  return rock.active;
});
rocks.forEach(function(rock){
    rock.update();
  rock.draw();
});

GoToLoop

Any thoughts?

Well, there are some mal-indentations in your code which makes studying it harder. :-<
You may copy & paste your code in this site in order to "beautify" it: http://JSBeautifier.org O:-)
Also you should skip 1 line between blocks. Gets easier to visualize them. :)>-

GoToLoop

I've ham-fisted together some of the examples from the p5.js site and youtube, ...

• JS is a multi-paradigm language. That is, there are many divergent approaches to choose from.
• It's as if JS wasn't 1 but multiple programming languages sharing the same name! @-)
• Some of the problems to learn JS is most of its available tutorials follow their own particular paradigm and/or they're too old! :-&
• Given you've picked p5.js library, which is 1 of the many spinoffs of Processing Java, the easiest paradigm to follow is OOP (Object-Oriented Programming). ~O)
• And for OOP, nothing's better than class constructors, and instantiate objects outta them: \m/
  https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
• We can always learn other paradigms much later, once we've got the basics btW. ;;)
• For now, I've converted your car and rocks[] objects to be created outta class structures instead.
• However, I still couldn't figure out 100% what they're supposed to do. X_X
• Therefore, you're gonna need to make your own adjustments to those 2 classes. 8-|
• And any doubts about classes in JS, just ask here again. :\">

---

class Car {
  static get DIAM() {
    delete this.DIAM;
    return this.DIAM = 50;
  }

  static get FILL() {
    delete this.FILL;
    return this.FILL = color('blue');
  }

  constructor(x = Car.DIAM, y = height - Car.DIAM >> 1) {
    this.x = x, this.y = y;
  }

  display() {
    fill(Car.FILL).rect(this.x, this.y, Car.DIAM, Car.DIAM);
    return this;
  }

  collision(rock) {
    const { x: cx, y: cy, constructor: { DIAM: cd } } = this,
          { x: rx, y: ry, constructor: { DIAM: rd } } = rock;

    return cx+cd > rx && cx < rx+rd && cy+cd > ry && cy < ry+rd;
  }
}

const car = new Car;

---

class Rock {
  static get DIAM() {
    delete this.DIAM;
    return this.DIAM = 20;
  }

  static get SPD() {
    delete this.SPD;
    return this.SPD = -2;
  }

  static get FILL() {
    delete this.FILL;
    return this.FILL = color('brown');
  }

  constructor(x = width, y = random(height - Rock.DIAM)) {
    this.x = x, this.y = y;
  }

  display() {
    fill(Rock.FILL).rect(this.x, this.y, Rock.DIAM, Rock.DIAM);
    return this;
  }

  update() {
    this.x += Rock.SPD;
    return this.isGone();
  }

  isGone() {
    return this.x < -Rock.DIAM;
  }
}

const rocks = [];
rocks.push(new Rock);

---

FullArt

Brilliant! Thank you so much for your help, I think this should work for what I was going for. Sorry for being so vague, I don't know the depth of what can be understood from just reading the code. I reckon I might eyeball some of my friends tutorials, go back to basics, see if I can get some more understanding of this stuff =). Cheers