CODEWITHSUNDEEP
javascripthtmlarraysprocessingp5.js
user9773526
user9773526

Reputation:

How to add object to an array properly in p5.js?

Ok first before you read the code, know this is a javascript library called P5.js https://p5js.org

I noticed that my addMCS function was not adding an object to an array rather the screen goes blank and i get no response from the console.

var mcs = [];

function mouseCircle(x,y,s,color){
//constructor: mouseCircle(x,y,s,color)
    this.x=x;
    this.y=y;
    this.s=s;
    this.color = color;
    this.mouseOver = false;
}

mouseCircle.prototype.mouseCollision = function(){
  if(dist(this.x,this.y,mouseX,mouseY)<=this.s/2){

    this.mouseOver=true;
  }else{
    this.mouseOver = false;
  }
};


mouseCircle.prototype.addMCS = function(){

    //THIS HERE IS THE ISSUE!!
    mcs.push({this.x,this.y,this.s,this.color,this.mouseOver});
};

mouseCircle.prototype.Display = function(){
    if(this.mouseOver) {
        fill(this.color);
    } else {
        fill(255,255,255);
    }

    ellipse(this.x,this.y,this.s,this.s);
};

function setup() {
    createCanvas(1000,650);
}

var mc1;
var mc2;
var mc3;

var mc2Color;

function draw() {

    background(200,200,200);

    mc1 = new mouseCircle(275,450,50,'green');//constructs 1st circle
    mc1.mouseCollision();
    mc1.Display();
    mc1.addMCS();
    console.log(mcs[0]);

    /*
    mc2Color = color(0,0,255);
    mc2 = new mouseCircle(375,450,50,mc2Color);//constructs 2nd circle
    mc2.mouseCollision();
    mc2.Display();

    mc3 = new mouseCircle(275,350,50,color(255,0,0));//constructs 3rd circle
    mc3.mouseCollision();
    mc3.Display();

    mc4 = new mouseCircle(375,350,50,'yellow');//constructs 3rd circle
    mc4.mouseCollision();
    mc4.Display();

    */

    //mouseCircle(575,150,50);
    //mouseCircle(475,520,50);
    //mouseCircle(375,150,50);
}

I cant see any sort of logic or syntax errors and I believe I have memories of using this method before (making buttons).

Upvotes: 2

Views: 2250

Answers (1)

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

Why don't just use mcs.push(this); instead?

Working example:

var mcs = [];

function mouseCircle(x, y, s, color) {
  //constructor: mouseCircle(x,y,s,color)
  this.x = x;
  this.y = y;
  this.s = s;
  this.color = color;
  this.mouseOver = false;
}

mouseCircle.prototype.mouseCollision = function() {
  if (dist(this.x, this.y, mouseX, mouseY) <= this.s / 2) {

    this.mouseOver = true;
  } else {
    this.mouseOver = false;
  }
};


mouseCircle.prototype.addMCS = function() {


  mcs.push(this);
};

mouseCircle.prototype.Display = function() {
  if (this.mouseOver) {
    fill(this.color);
  } else {
    fill(255, 255, 255);
  }

  ellipse(this.x, this.y, this.s, this.s);
};

function setup() {
  createCanvas(1000, 650);
}

var mc1;
var mc2;
var mc3;

var mc2Color;

function draw() {

  background(200, 200, 200);

  mc1 = new mouseCircle(275, 450, 50, 'green'); //constructs 1st circle
  mc1.mouseCollision();
  mc1.Display();
  mc1.addMCS();
  //console.log(mcs[0]);

  /*
        mc2Color = color(0,0,255);
        mc2 = new mouseCircle(375,450,50,mc2Color);//constructs 2nd circle
        mc2.mouseCollision();
        mc2.Display();
    
        mc3 = new mouseCircle(275,350,50,color(255,0,0));//constructs 3rd circle
        mc3.mouseCollision();
        mc3.Display();
    
        mc4 = new mouseCircle(375,350,50,'yellow');//constructs 3rd circle
        mc4.mouseCollision();
        mc4.Display();
    
        */

  //mouseCircle(575,150,50);
  //mouseCircle(475,520,50);
  //mouseCircle(375,150,50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Upvotes: 1

Related Questions