Not defined issue

p5.js Coding Questions
1

Hi, I’ve been trying to figure out how to fix this. I keep getting an error message saying that Particle is not defined.

type or paste code here

let myParticle= [];

let buttonA
let buttonH
let buttonF
let buttonB


function preload() {
  img1=loadImage('BG/bedroom2.jpg')
  img2=loadImage('BG/bedroom3.jpg')
  bg=loadImage('BG/bedroom2.jpg')
  bg2=loadImage('BG/bedroom3.jpg')
  
   img3 = loadImage('others/greenflow1.png')
  img4 = loadImage('others/yellowflow1.png')
  img5 = loadImage('others/violetflow1.png')
  img6= loadImage('others/purpleflow1.png')
  img7= loadImage('others/redflow1.png')
  img8= loadImage('others/pinkflow1.png')

} 
function setup() {
  createCanvas(500, 600);
  
     for(let i = 0; i < 50; i++) {
    //set each one to be a new Particle, starting at a random location
    //on the canvas
myParticle[i] = new Particle(random(width), random(height));
  }
  
 
  
   buttonA =
    createButton(' ');
  buttonA.position(26,500);
  buttonA.mousePressed(changeBG);
  buttonA.mouseReleased(changeBG2)
  buttonA.style('border',100);
  buttonA.style('width','130px');
  buttonA.style('height','80px');
  
  buttonH =
    createButton(' ')
  buttonH.position(200,495)
  buttonH.mouseReleased(beecrayon)
  buttonH.style('border',100);
  buttonH.style('width','50px');
  buttonH.style('height','90px');
  
  buttonF=
    createButton(' ')
 buttonF.position(300,495)
 buttonF.mouseReleased(flowerpower)
  buttonF.style('border',100)
  buttonF.style('width','50px')
  buttonF.style('height','90px')
  
  buttonB=
    createButton(' ')
  buttonB.position(400,500)
  buttonB.style('border',100)
  buttonB.style('width','80px')
  buttonB.style('height','84px')

 background(bg)
  
 ///  for(let i = 0; i < 50; i++) {
    //set each one to be a new Particle, starting at a random location
    //on the canvas
///myParticle[i] = new Particle(random(width), random(height));
///  }
}


function draw() {
for(let i = 0; i < 50; i++) {
    myParticle[i].move();
    myParticle[i].display();

}
  }
  
  function changeBG(){
background(img2)


//image(img2,0,0)
 
}
function changeBG2(){
  background(img1)
}
function beecrayon(){
 function mouseDragged(){
  fill(231,161,25)
  strokeWeight(3)
  ellipse(mouseX,mouseY,20,20)
}
}
function flowerpower(){
  function mouseDragged() {
 // background(255);

  
   for(let i = 0; i < 100; i++) {
    //set each one to be a new Particle, starting at a random location
    //on the canvas
   myParticle[i] = new Particle(random(width), random(height));
  }

   
}

class Particle {
  constructor(x,y) {
    this.x = mouseX;
    this.y = mouseY;
    
    //set random values for the following
    this.xspeed = random(-3,3);
    this.yspeed = random(-3,3);
    this.r = random(255);
    this.g = random(255);
    this.b = random(255);
    this.size = random(10);
  }

  move() {
    //move x coordinate by an amount, xspeed
    this.x += this.xspeed;
    
    //same for y coordinate
    this.y += this.yspeed;
  }
  
  display() {
   // if (mouseIsPressed){
    //when display is called, I'm already at a location 
    //this.x, this.y now i just want to draw a
    //circle at that location
   // stroke(random(255));
   // fill(this.r,this.g,this.b);
   // circle(this.x,this.y,this.size)
    image(img3,this.x,this.y)
    if(key=="y"){
   image(img2,this.x,this.y)
  }
    if (key=="l"){
     image(img4,this.x,this.y)
    }
    
     if (key=="v"){
     image(img5,this.x,this.y)
     }
    if (key=="r"){
     image(img6,this.x,this.y)
     }
     if (key=="p"){
     image(img7,this.x,this.y)
     }
  }
  }

//}

}
2

Hi! Welcome to the forum!

Please use </> button to format your code (where it says “type or paste code here” is what you actually substitute with your code!)

and which line do you get the error?

3

I get the error on line 30/ in set up.

4

I see! actually this is because of the scope. Your Particle class is defined inside function flowerpower() so you can only access within this function. You want to move the class definition outside the function (outside its curly brackets {}) then setup and other functions can see it too. Also it helps to “tidy” code or indentation to make the scope clearer. if you’re using web editor, there is Edit → Tidy Code and there are equivalent features in other major platforms like Glitch and OpenProcessing as well as editors like Atom and VS Code. When you “tidy” or “format” code, you will notice that the Particle class actually starts with indentation, meaning that it’s inside another scope.

3 Likes