Not able to toggle between active and inactive states using mouseClicked function

ankyd

I am trying to toggle between 'active=true' and 'active = false' using mouseClicked function so that only the rectangle whose state is 'active=true' should rotate or drag.

Default is 'active=false'. When I click inside the rectangle then the state becomes 'active = true'. Now when I click inside the rectangle again it should become false but 'it isn't' instead when I click outside the rectangle the state becomes 'active = false' 'which it shouldn't'. I am not able to figure out why is this happening.

 var space = [];
 var scale_slider;
 var rot_slider;
 var len_input;
 var bread_input;
 var l;
 var b;

function setup() {
createCanvas(windowWidth,windowHeight);
rectMode(CENTER);

button1 = createButton('New');
button1.mousePressed(newSpace);

scale_slider = createSlider(0,20,10);
rot_slider = createSlider(0,360,0);

for(var i = 0; i<space.length; i++){
space[i] = new Rect_Shape(l,b);
 }
}

function fixDimention(){
l = Number(len_input.value());
b = Number(bread_input.value());

if (l!==null && b!==null ){
space.push(new Rect_Shape(l,b));
}

button2.hide();
len_input.hide();
bread_input.hide();
}

function newSpace(){
button2 = createButton('Submit');
button2.mousePressed(fixDimention);

len_input = createInput();
bread_input = createInput();
}

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

function mouseClicked(){
for(var i = 0; i<space.length; i++){
print('------------');
print(space[i].mouseover);

if(space[i].mouseover==true){
  if(space[i].active==false){
    space[i].active=true;
  }

  else if(space[i].active==true){
    space[i].active=false;
  }  
}
else{ 
print('why is active state changing when I am clicking outside the rect!!');
}  
print(space[i].active);
print('------------');
 }
}

function mouseDragged(){
for(var i = 0; i<space.length; i++){
if(space[i].active === true && space[i].mouseover==true){
  space[i].x = mouseX;
  space[i].y = mouseY;
  }
 }
}

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

Rect_Shape object:

function Rect_Shape(len, breadth){
this.x = random(width/2-len);
this.y = random(height/2-breadth);
this.mouseover = false;
this.active = false;
rectMode(CENTER);

this.display = function(){
this.l = len * scale_slider.value();
this.b = breadth * scale_slider.value();

if(mouseX > this.x - this.l/2 && mouseX < this.x + this.l/2 && mouseY > this.y - this.b/2 && mouseY < this.y + this.b/2){
  this.mouseover = true;
  fill(255);        
} 
else{
  this.mouseover = false;
  fill(255,0,0,100);  
}

push();
translate(this.x,this.y);
if(this.active===true){
  rotate(radians(rot_slider.value()));
}
rect(0,0,this.l,this.b);
pop();    
 }  
}

I have written a sample code to explain the functionality I am trying to achieve. Thanks for the help!

var active=false;
var centreX = 300;
var centreY=200;
var length=60;
var breadth=70;
var value=0;

function setup() {
createCanvas(600,600);
rectMode(CENTER);
}

function draw() {
background(255);
fill(value);
rect(centreX, centreY, length, breadth);
}

function mouseClicked() {
if (mouseX<centreX+length/2 && mouseX>centreX-length/2 && mouseY<centreY+breadth/2 && mouseY>centreY-breadth/2){
  if(active===false){
    value=255;
    active=true;
    print('first click');
    print(active);      
  }

  else {
    value=0;
    active = false
    print('second click');
    print(active);
  }      
}
}

kfrajer

Format your code. Press the gear icon to edit your post, then select your code and press ctrl+o. Leave a line above and below your code.

Kf

kfrajer

I believe your function in line 83 is the problem. You need to remove this line and introduce another way to reset your objects. One way would be caching a key event or having an extra button that will do exactly what your mouseReleased() function does.

Kf

ankyd

Yup that was the problem. Thanks :)