I want to clear these buttons from the canvas any tips? (processing 3+)

Processing Coding Questions
#1

This is the code that I have so far:

PImage a;
PImage b;

void setup()
{
size(1000,1000);
background(100,255,110);
a = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot_2019-12-19_at_84649_AM.png");
b = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-07%20at%209.02.14%20AM.png");
noStroke();
}
void draw()
{
image(a,500,530,100,50);
image(b,400,400,400,50);
}

void draw() {
 if (mousePressed && (mouseButton == RIGHT)) {
	 fill(0,255,00);
	 rect(0,0,1000,1000);
 }
 else if (mousePressed && (mouseButton == LEFT)) {
	fill(255,0,0);
	rect(0,0,1000,1000);
	 }
	image(b,400,400,400,50);
	image(a,500,530,100,50);
 }

I did look at other forms that used boolean. It did work but it automaticly cleared. I want it to clear when I click the images.

#2

Normally draw() starts with background and then you draw what you want to draw

Also, have one boolean variable per image; initially true

When image clicked, set the corresponding variable to false

Also, when you show the images in draw():


if(showImg1)
  image(a.....

if(showImg2)
  image(b.....

Remark

It’s faster to use resize on the images in setup instead of using image() command with 5 parameters.

Welcome to the forum!

Good to have you here!

Regards, Chrisir

1 Like
#3

I added the boolean to my code but it did nothing. Could you tell me what happened? Thanks

PImage a;
boolean c = true;
PImage b;
boolean d = true;

void setup() {
size(1000,1000);
background(100,255,210); //background color
a = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-08%20at%209.48.03%20AM.png"); //img link
b = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-08%20at%209.44.31%20AM.png");
noStroke();
}
void draw() {
image(a,500,530,100,50); //loads in img
image(b,400,400,400,50);
}

void draw() {
 if(mousePressed && (mouseButton == RIGHT)) {
	 fill(0,255,00);
	 rect(0,0,1000,1000);
	 c = false;
 }
	 else if (mousePressed && (mouseButton == LEFT)) {
		 fill(255,0,0);
		 rect(0,0,1000,1000);
		 d = false;
		 }
		image(b,400,400,400,50);
		image(a,500,530,100,50);
	 }

Thanks for the help.

#4

You forgot the if-clauses to evaluate c and d.

Please choose better names like

  • imgA and flagA etc.
#5

I realized that. This was what I came up with. but it still does not work.

boolean c = true;
boolean d = true;

void draw() {
if (!c) {
 if(mousePressed && (mouseButton == RIGHT)) {
	 fill(0,255,00);
	 rect(0,0,1000,1000);
 }
	image(a,500,530,100,50);
	image(b,400,400,400,50);
}
if (!d) {
	if (mousePressed && (mouseButton == LEFT)) {
		 fill(255,0,0);
		 rect(0,0,1000,1000);
		 }
	image(a,500,530,100,50);
	image(b,400,400,400,50);
	}
}
1 Like
#6

do it like this please

#7

Like this?

boolean flagA = true;

void draw() {
if (!flagA) {
 if(mousePressed && (mouseButton == RIGHT)) {
	 if(show imgA) {
		 image(imgA,500,530,100,50);
		 image(imgB,400,400,400,50);
	 }
 }
}
}
#8

No.

“flagA” is the same as “show img A”

And you don’t want to have if (!flagA) { before the entire content of draw().

you just want to say

if(show imgA) {
    image(imgA,500,530,100,50);
}

Remark

Also, since imgA and imgB must work independently

if(flagA) {
     image(imgA,500,530,100,50);
}

if(flagB) {
    image(imgB,400,400,400,50);
}
#9

in this version, mousePressed() is used as a function instead of a variable mousePressed - same name but without the brackets, see reference

Also, the usage of c and d is clear.

Question is

  • why do you use images in the first place and not use text() command?

  • Also, if you want to make a Quiz, you don’t want to hide the images.

  • Also, you don’t want to check left and right button, but you want check if the mouse has been pressed on (inside) a screen button

screen buttons:

  • “I dare (I want to play)” and
  • “I leave”

Chrisir

Version to switch off images, like in your code :



PImage a, b;

boolean c = true;
boolean d = true;

void setup() {
  size(1000, 1000);

  background(100, 255, 210); //background color
  a = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-08%20at%209.48.03%20AM.png"); //img link
  b = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-08%20at%209.44.31%20AM.png");  //
}

void draw() {
  background(100, 255, 210); //background color

  if (c)
    image(a, 500, 530, 100, 50);
  if (d)
    image(b, 400, 400, 400, 50);
}

void mousePressed() {
  if (mouseButton == LEFT) {
    c=false;
  }

  if (mouseButton == RIGHT) {
    d=false;
  }
}//
//
1 Like
#10

Thank you for the help.

1 Like
#11

How kll says:

:smiley: