How do I use the mousepressed code within specific dimensions?

annagella

I could run my code. The 6 circles are floating. My expected response is that a png image would appear in the background if the specific dimension would be clicked based from the dimensions indicated in mousepressed. Wherever dimension I click, no image appears.

float circleY = 100;

void setup() {

size(1000, 700);

}

void draw() {

background(216, 191, 216);

stroke(85, 66, 24);

fill(85, 66, 24);

ellipse(100, circleY, 50, 50);

circleY++;

if (circleY > height) {

circleY = 0;} 

stroke(255, 242, 0);

fill(255, 242, 0);

ellipse(250, circleY, 50, 50);

circleY++;

if (circleY > height) {

circleY = 0;}

stroke(220, 20, 60);

fill(220, 20, 60);

ellipse(400, circleY, 50, 50);

 circleY++;

if (circleY > height) {

circleY = 0;}

stroke(246, 118, 6);

fill(246, 118, 6);

ellipse(550, circleY, 50, 50);

 circleY++;

if (circleY > height) {

circleY = 0;}

stroke(0, 152, 24);

fill(0, 152, 24);

ellipse(700, circleY, 50, 50);

 circleY++;

if (circleY > height) {

circleY = 0;}

stroke(1, 104, 163);

fill(1, 104, 163);

ellipse(850, circleY, 50, 50);

   circleY++;

if (circleY > height) {

circleY = 0;}

}

void mousePressed(){

if(mouseX > 100 && mouseX < 150 && mouseY > 0 && mouseY < 700){

   PImage img;

   img = loadImage("brown.png");

   image(img, 0, 0);

 } else if (mouseX > 250 && mouseX < 300 && mouseY > 0 && mouseY < 700){

   PImage img;

   img = loadImage("yellow.png");

   image(img, 0, 0);

 } else if(mouseX > 400 && mouseX < 450 && mouseY > 0 && mouseY < 700){

   PImage img;

   img = loadImage("red.png");

   image(img, 0, 0);

 } else if (mouseX > 550 && mouseX < 600 && mouseY > 0 && mouseY < 0){

   PImage img;

   img = loadImage("orange.png");

   image(img, 0, 0);

 } else if(mouseX > 700 && mouseX < 750 && mouseY > 0 && mouseY < 700){

   PImage img;

   img = loadImage("green.png");

   image(img, 0, 0);

 } else if (mouseX > 850 && mouseX < 800 && mouseY > 0 && mouseY < 0){

   PImage img;

   img = loadImage("blue.png");

   image(img, 0, 0);

}

}

Chrisir

This line belongs into draw:

image(img, 0, 0);

instead of the background line in draw(or after it)

mousePressed runs only once briefly whereas draw runs on and on

Try to format your code better, you can edit your post

Technically you want load all images once in setup () and then just display the current one but that’s for later

kfrajer

Please format your code. Edit your post (gear on top right side of any of your posts), select your code and hit ctrl+o. Leave an empty line above and below your block of code. Details here: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Related to loadImage() from https://processing.org/reference/loadImage_.html :

In most cases, load all images in setup() to preload them at the start of the program. Loading images inside draw() will reduce the speed of a program. Images cannot be loaded outside setup() unless they're inside a function that's called after setup() has already run.

Kf