Using mousePressed...

Programming Questions

kappter

in Programming Questions • 8 months ago

Is mousePressed the best check here? Tried using noLoop but it obviously stops everything.

void setup() {

size(1250, 400);

background(255);

}

void draw() {

if (mouseX > 50 && mouseX < 150 && mousePressed == true) {

switchOn(50,100);

textSize(40);

fill(0);

text("128", 65, 75);

//noLoop();

} else if (mousePressed == false) {

switchOff(50,100);

}

if (mouseX > 200 && mouseX < 300 && mousePressed == true) {

switchOn(200,100);

textSize(40);

fill(0);

text("64", 225, 75);

//noLoop();

} else if (mousePressed == false) {

switchOff(200,100);

}

if (mouseX > 350 && mouseX < 450 && mousePressed == true) {

switchOn(350,100);

textSize(40);

fill(0);

text("32", 375, 75);

//noLoop();

} else if (mousePressed == false) {

switchOff(350,100);

}

if (mouseX > 500 && mouseX < 600 && mousePressed == true) {

switchOn(500,100);

textSize(40);

fill(0);

text("16", 525, 75);

//noLoop();

} else if (mousePressed == false) {

switchOff(500,100);

}

if (mouseX > 650 && mouseX < 750 && mousePressed == true) {

switchOn(650,100);

textSize(40);

fill(0);

text("8", 685, 75);

//noLoop();

} else if (mousePressed == false) {

switchOff(650,100);

}

if (mouseX > 800 && mouseX < 900 && mousePressed == true) {

switchOn(800,100);

textSize(40);

fill(0);

text("4", 835, 75);

//noLoop();

} else if (mousePressed == false) {

switchOff(800,100);

}

if (mouseX > 950 && mouseX < 1050 && mousePressed == true) {

switchOn(950,100);

textSize(40);

fill(0);

text("2", 985, 75);

//noLoop();

} else {

switchOff(950,100);

}

if (mouseX > 1100 && mouseX < 1200 && mousePressed == true) {

switchOn(1100,100);

textSize(40);

fill(0);

text("1", 1140, 75);

} else {

switchOff(1100,100);

}

void switchOn(int x, int y) {

fill(50);

strokeWeight(3);

rect(x, y, 100, 250);

fill(100);

rect(x, y+125, 100, 125);

textSize(32);

fill(225);

text("ON", x+29, y+195);

}

void switchOff(int x, int y) {

fill(100);

strokeWeight(3);

rect(x, y, 100, 250);

fill(50);

rect(x, y+125, 100, 125);

textSize(32);

fill(225);

text("OFF", x+19, y+75);

}

Replies(5)

PhiLho

Re: Using mousePressed...

8 months ago

You should use mousePressed() (the function) instead.
At least, it would allow to get rid of lot of checks.

GoToLoop

Here's a link to a post for a button UI which uses noLoop():

improving-responsiveness-of-laggy-buttons

And go in here to see it in online action:

http://studio.processingtogether.com/sp/pad/export/ro.9vAkI4JDuLs8s/latest

asimes

Re: Using mousePressed...

8 months ago

It is a lot easier to manage this if you think of each switch as being the same thing but in a different location. I created a Switch class that has coordinates (x, y) and information about whether it is on or off. I left comments explaining what is going on, let me know if you have questions:

Switch[] theSwitches = new Switch[8];
void setup() {
size(1250, 400);
background(255);
strokeWeight(3);
textSize(32);
// Create Switches
for (int i = 0; i < theSwitches.length; i++) {
theSwitches[i] = new Switch(50+i*150, 100); // Set (x, y)
}
}
void draw() {
// See the Switches
for (int i = 0; i < theSwitches.length; i++) {
theSwitches[i].display();
}
}
class Switch {
boolean on;
int x, y;
Switch(int inX, int inY) {
on = false;
x = inX;
y = inY;
}
void display() {
if (on) fill(50);
else fill(100);
rect(x, y, 100, 250);
if (on) fill(100);
else fill(50);
rect(x, y+125, 100, 125);
fill(225);
if (on) text("ON", x+29, y+195);
else text("OFF", x+19, y+75);
}
}
void mousePressed() {
if (mouseY > 100 && mouseY < 350) { // Y-axis bounds
for (int i = 0; i < theSwitches.length; i++) { // For all the Switches
if (mouseX > 50+i*150 && mouseX < (i+1)*150) { // X-axis bounds
theSwitches[i].on = !theSwitches[i].on; // On / Off toggle
}
}
}
}

kappter

Re: Using mousePressed...

8 months ago

Thanks asimes... I have a lot to learn obviously. Here is what I created for my students as an aid for teaching binary.

Switch[] theSwitches = new Switch[8];

void setup() {

size(1250, 500);

//background(255);

strokeWeight(3);

textSize(32);

// Create Switches

for (int i = 0; i < theSwitches.length; i++) {

theSwitches[i] = new Switch(50+i*150, 100, i); // Set (x, y)

}

void draw() {

// See the Switches

background(255);

for (int i = 0; i < theSwitches.length; i++) {

theSwitches[i].display();

}

class Switch {

boolean on;

int x, y, binValue;

Switch(int inX, int inY, int inVal) {

on = false;

x = inX;

y = inY;

binValue = inVal;

}

void display() {

if (on) fill(50);

else fill(100);

rect(x, y, 100, 250);

if (on) fill(100);

else fill(50);

rect(x, y+125, 100, 125);

fill(225);

if (on) text("ON", x+29, y+195);

else text("OFF", x+19, y+75);

fill(0);

if (on && binValue == 0) {text("128", x+35, y-19); text("1", x+40, y+285);}

else if (on && binValue == 1) {text("64", x+35, y-19); text("1", x+40, y+285);}

else if (on && binValue == 2) {text("32", x+35, y-19); text("1", x+40, y+285);}

else if (on && binValue == 3) {text("16", x+35, y-19); text("1", x+40, y+285);}

else if (on && binValue == 4) {text("8", x+35, y-19); text("1", x+40, y+285);}

else if (on && binValue == 5) {text("4", x+35, y-19); text("1", x+40, y+285);}

else if (on && binValue == 6) {text("2", x+35, y-19); text("1", x+40, y+285);}

else if (on && binValue == 7) {text("1", x+35, y-19); text("1", x+40, y+285);}

else {text(binValue*0, x+40, y-19);text("0", x+35, y+285);}

text("Decimal Value = Top Numbers Added Together", 280, 440);

text("Binary value is the 1's and 0's at the bottom...", 300, 490);

text("Counting in Binary... Click on the Switches", 300, 40);

}

void mousePressed() {

if (mouseY > 100 && mouseY < 350) { // Y-axis bounds

for (int i = 0; i < theSwitches.length; i++) { // For all the Switches

if (mouseX > 50+i*150 && mouseX < (i+1)*150) { // X-axis bounds

theSwitches[i].on = !theSwitches[i].on; // On / Off toggle

}

Ken Kapptie

asimes

Re: Using mousePressed...

8 months ago

It is a nice visualization for learning binary :)

The advantage of the loop is to avoid long sequences of if statements as their overall pattern can be turned into one conditional statement that generalizes them. Here is another version:

Switch[] theSwitches = new Switch[8];
void setup() {
size(1250, 500);
strokeWeight(3);
textSize(32);
for (int i = 0; i < theSwitches.length; i++) {
theSwitches[i] = new Switch(50+i*150, 100, theSwitches.length-i-1);
//println(theSwitches.length-i-1); // Uncomment to see what it is doing
}
}
void draw() {
background(255);
// An advantage of the loop is making a lot of if statements on general one :)
for (int i = 0; i < theSwitches.length; i++) {
// The current Switch of the loop (arbitraily named iSwitch)
Switch iSwitch = theSwitches[i];
iSwitch.display();
if (iSwitch.on) {
/* The part that says: (int)pow(2, iSwitch.binValue)
produces the sequence of powers of two your switches represent
pow(2, x) produces 2 to some power
The (int) part shows it without decimal information */
text((int)pow(2, iSwitch.binValue), iSwitch.x+35, iSwitch.y-19);
text("1", iSwitch.x+40, iSwitch.y+285);
}
else {
text("0", iSwitch.x+40, iSwitch.y-19);
text("0", iSwitch.x+35, iSwitch.y+285);
}
}
// I moved these here so they are displayed once per frame
text("Decimal Value = Top Numbers Added Together", 280, 440);
text("Binary value is the 1's and 0's at the bottom...", 300, 490);
text("Counting in Binary... Click on the Switches", 300, 40);
}
class Switch {
boolean on;
int x, y, binValue;
Switch(int inX, int inY, int inVal) {
on = false;
x = inX;
y = inY;
binValue = inVal;
}
void display() {
if (on) fill(50);
else fill(100);
rect(x, y, 100, 250);
if (on) fill(100);
else fill(50);
rect(x, y+125, 100, 125);
fill(225);
if (on) text("ON", x+29, y+195);
else text("OFF", x+19, y+75);
fill(0);
/* I commented these out because each Switch is displaying them
which means it is being displayed 8 times. It causes the text to look pixelated
text("Decimal Value = Top Numbers Added Together", 280, 440);
text("Binary value is the 1's and 0's at the bottom...", 300, 490);
text("Counting in Binary... Click on the Switches", 300, 40);
*/
}
}
void mousePressed() {
if (mouseY > 100 && mouseY < 350) {
for (int i = 0; i < theSwitches.length; i++) {
if (mouseX > 50+i*150 && mouseX < (i+1)*150) {
theSwitches[i].on = !theSwitches[i].on;
}
}
}
}

On a side note, the power of two statement could be pre-calculated in the constructor of Switch which would be slightly faster as it would not be calculated for every switch every frame.

Top Reply