Click and Drag with Arrays of Objects

nlogler

Hey Everyone,

New to the forum/community. I have been learning a ton with p5js (and processing)! I have a question about clicking and dragging objects in an array. The click and drag seems to be working, but I'm not getting all my visual feedback. My stroke isn't changing on the click and drag (highlight effect). Am I missing something obvious? Or is this not the best way to get click and drag behavior working? (*This is an adaptation of click and drag from the processing site). Code below:

    var boxes = [];

    function setup() {
      createCanvas(500,500);
      for(var i=0; i<20; i++){
        boxes.push(new Box(random(255),random(10,30)));
      }
    }

    function draw() {
      background(0,200,200);
      for(var i = 0; i<boxes.length; i++){
        boxes[i].show();
      }
    }


    function mousePressed() {
      for(var i = 0; i<boxes.length; i++){
        if (boxes[i].boxover ) {
            boxes[i].locked = true;
            strokeWeight(4);
            stroke(0, 150, 255);
            print("mouse is pressed")
        } else {
            noStroke();
            boxes[i].locked = false;
            print("mouse isn't pressed")
        }
        boxes[i].xoffset = mouseX - boxes[i].xpos;
        boxes[i].yoffset = mouseY - boxes[i].ypos
        print(boxes[i].locked);
      }
    }

    function mouseDragged() {
      for(var i = 0; i<boxes.length; i++){
        if (boxes[i].locked) {
            boxes[i].xpos = mouseX - boxes[i].xoffset;
            boxes[i].ypos = mouseY - boxes[i].yoffset;
        }
      }
    }

    function mouseReleased() {
      for(var i = 0; i<boxes.length; i++){
        boxes[i].locked = false;
      }
    }

//Box Constructor

function Box(tempColor,tempSize) {
    this.c = tempColor
    this.xpos = random(width);
    this.ypos = random(height);
    this.boxsize = tempSize;
    this.boxover = false;
    this.locked = false;
    this.xoffset = 0;
    this.yoffset = 0;
    rectMode(RADIUS);

    this.show = function() {
        if (mouseX > this.xpos - this.boxsize && mouseX < this.xpos + this.boxsize &&
            mouseY > this.ypos - this.boxsize && mouseY < this.ypos + this.boxsize) {
            this.boxover = true;
            fill(255);
        } else {
            this.boxover = false;
            noStroke();
            fill(this.c);
        }
        rect(this.xpos, this.ypos, this.boxsize, this.boxsize,7);
    };
}

Any insights and links to other materials is greatly appreciated. Thanks!

GoToLoop

Maybe you should check and set boxover inside mousePressed() instead of show(). :-/

nlogler

Thanks for your answer GoToLoop! Your comment was really helpful and got me playing around with the sketch in some different ways. I stumbled on and a pretty simple solution I probably should have seen earlier. I just created a mouseIsPressed condition inside of the boxover check inside of show().

Your advice and subsequent playing around helped me realize checking and setting boxover works inside of show() or draw(). A follow up question:

Is there a best practice? Should this kind of behavior be handled in the constructor or in the draw loop? Any advantages to one or the other? Thanks for your help!

Here is the updated sketch:

var boxes = [];

function setup() {
    // createCanvas(displayWidth,displayHeight);
    createCanvas(500, 500);
    for (var i = 0; i < 20; i++) {
        boxes.push(new Box(random(255), random(10, 30)));
    }
}

function draw() {
    background(0, 200, 200);
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].show();
    }
}




function mousePressed() {
    for (var i = 0; i < boxes.length; i++) {
        //checking to see if the mouse is over the box and turning it white if it is
        if (boxes[i].boxover == true) {
            boxes[i].locked = true;
            print("mouse is pressed")
        } else {

            boxes[i].locked = false;
            print("mouse isn't pressed")
        }
        boxes[i].xoffset = mouseX - boxes[i].xpos;
        boxes[i].yoffset = mouseY - boxes[i].ypos
        print(boxes[i].locked);
    }
    return false;
}

function mouseDragged() {
    for (var i = 0; i < boxes.length; i++) {
        if (boxes[i].locked) {
            boxes[i].xpos = mouseX - boxes[i].xoffset;
            boxes[i].ypos = mouseY - boxes[i].yoffset;
        }
    }
}

function mouseReleased() {
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].locked = false;
    }
}

function Box(tempColor, tempSize) {
    this.c = tempColor
    this.xpos = random(width);
    this.ypos = random(height);
    this.boxsize = tempSize;
    this.boxover = false;
    this.locked = false;
    this.xoffset = 0;
    this.yoffset = 0;
    rectMode(RADIUS);

    this.show = function() {

        if (mouseX > this.xpos - this.boxsize && mouseX < this.xpos + this.boxsize &&
            mouseY > this.ypos - this.boxsize && mouseY < this.ypos + this.boxsize) {
            this.boxover = true;
            fill(255);

            if (mouseIsPressed && this.boxover == true) {
                stroke(200, 79, 100);
                strokeWeight(5);
            } else {
                noStroke();
            }

        } else {
            this.boxover = false;
            noStroke();
            fill(this.c);
        }
        rect(this.xpos, this.ypos, this.boxsize, this.boxsize, 7);
    };
}