Help with displaying image correctly

Programming Questions

megatycon1

Help with displaying image correctly

in Programming Questions • 7 months ago

// I want the image to stay within the circle and for the image to go away when the mouse is no longer on the dot. thanks for your help

/*images

1. heart - http://files-cdn.formspring.me/photos/20120805/n501ee108a6887.png

2. brain - http://www.made4ll.com/wp-content/uploads/a-human-brain-ke-agungan-allahku.jpg

3. pelvis - http://www.inds.co.uk/anatomy/anatomy_images/Male_Skeletal_Pelvis_Large.jpg

4. skull - http://images.halloweencostumes.com/deluxe-realistic-skull-zoom.jpg

5. scapula - http://behance.vo.llnwd.net/profiles4/112622/projects/6148633/472713a41c9aba0606d8bfabc02c613a.jpg

6. leg - http://jwi.charite.de/fileadmin/user_upload/microsites/m_cc09/jwi/Forschung/Muskuloskeletale_Biomechanik/Muskuloskeletales_Modell_Treppesteigen.jpg

7. spine - http://www.leckchiro.co.uk/images/SpineImagebig.jpg

8. feet - http://www.pandorasparlor.com/images/skeletal-foot-1.jpg

9. arm - http://www.anatomy-resources.com/human-anatomy/images/sh381-ab.jpg

10. knee - http://spie.org/Images/Graphics/Newsroom/Imported/1018/1018_fig1.jpg

PImage background;

PImage [] parts;

PImage img;

float x,y; //diam;

float diam[];

int [] leftright = {375, 352, 352, 352, 330, 400, 350, 280, 130, 305};

int [] updown = {155, 17, 330, 30, 145, 380, 240, 665, 150, 470};

float [] d = {6.75, 1.94, 2.31, 1.69, 1.714, 3.75, 2.4, 1, 6,3};

String [] partz = {"heart", "brain","pelvis", "skull", "scapula", "leg", "spine", "feet",

"arm", "knee"};

//String [] locations = {"\n middle", "\n top","\n mid", "\n abive", "\n high", "\n lower", "\n middl", "\n low", "\n left", "\n below"};//

void setup(){

size (700, 700);

smooth();

diam = new float [10];

img = loadImage("body1.png");

parts = new PImage[10];

imageMode(CENTER);

textAlign(CENTER, CENTER);

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

parts[i] = loadImage(i + ".png");

}

void draw(){

prepWindow();

titleText();

drawCircle();

expandCircle();

}

void prepWindow(){

background (img);

}

void titleText(){

textAlign(LEFT);

fill(10, 120);

text("PARTS OF THE HUMAN BODY", width/22.5 + 2, height/10);

fill(255);

text("PARTS OF THE HUMAN BODY", width/22.5, height/10);

}

void drawCircle(){

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

// float x = map(i, 0, leftright.length, 10, 890);

//float y = map(0, i, updown.length, 10, 590);

float x = map(leftright[i], max(leftright), min(leftright), 10, 690); //fix this

float y = map(updown[i], max(updown), min(updown), 10, 590);

noStroke();

fill(200, 90);

ellipse(leftright[i], updown[i], diam[i], diam[i]);

}}

void expandCircle(){

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

float x = map(leftright[i], max(leftright), min(leftright), 10, 690); // fixxxxx!!!!!!

float y = map(updown[i], max(updown), min(updown), 10, 590);

if(dist(mouseX, mouseY, leftright[i], updown[i]) <= 10){

diam[i] = diam[i] + 2;

// tint(255, 220);

image(parts[i], leftright[i], updown[i], diam[i], diam[i]);

if(y > 700){

fill(0);} else{fill(10, 180);}

textAlign(LEFT, LEFT);

text(" " + partz [i] + " ", leftright[i], updown[i]);

//fill(20, 180); String supdown = nf(0, updown[i]); text(" " + locations [i] + " ", leftright[i], updown[i]);}else{diam[i] = diam[i] - 4;//

}

if(diam[i] > 100){ //if diam is greater than d then diam = d

diam[i] = 100;

}

if(diam[i] < 12){

diam[i] = 12;

}

Replies(2)

Chrisir

Re: Help with displaying image correctly

7 months ago

in draw()

background (0);

at the start

at the end of draw()

checkMouse();

checkMouse is a function:

void checkMouse () {
for(int i = 0; i < leftright.length; i++){
if (dist ( mouseX,mouseY, leftright[i], updown[i] ) < 50 ) {
image ( parts[i], leftright[i], updown[i] );
return;
} // if
} // for
} // func

Greetings, Chrisir

Chrisir

Re: Help with displaying image correctly

7 months ago

ah, I have to correct myself you had this already

sorry !

this is your sketch, I had to remove all the images
but you see the idea in bold

/*images
1. heart - http://files-cdn.formspring.me/photos/20120805/n501ee108a6887.png
2. brain - http://www.made4ll.com/wp-content/uploads/a-human-brain-ke-agungan-allahku.jpg
3. pelvis - http://www.inds.co.uk/anatomy/anatomy_images/Male_Skeletal_Pelvis_Large.jpg
4. skull - http://images.halloweencostumes.com/deluxe-realistic-skull-zoom.jpg
5. scapula - http://behance.vo.llnwd.net/profiles4/112622/projects/6148633/472713a41c9aba0606d8bfabc02c613a.jpg
6. leg - http://jwi.charite.de/fileadmin/user_upload/microsites/m_cc09/jwi/Forschung/Muskuloskeletale_Biomechanik/Muskuloskeletales_Modell_Treppesteigen.jpg
7. spine - http://www.leckchiro.co.uk/images/SpineImagebig.jpg
8. feet - http://www.pandorasparlor.com/images/skeletal-foot-1.jpg
9. arm - http://www.anatomy-resources.com/human-anatomy/images/sh381-ab.jpg
10. knee - http://spie.org/Images/Graphics/Newsroom/Imported/1018/1018_fig1.jpg
*/
PImage background;
PImage [] parts;
PImage img;
float x, y; //diam;
float diam[];
int [] leftright = {
375, 352, 352, 352, 330, 400, 350, 280, 130, 305
};
int [] updown = {
155, 17, 330, 30, 145, 380, 240, 665, 150, 470
};
float [] d = {
6.75, 1.94, 2.31, 1.69, 1.714, 3.75, 2.4, 1, 6, 3
};
String [] partz = {
"heart", "brain", "pelvis", "skull", "scapula", "leg", "spine", "feet",
"arm", "knee"
};
//String [] locations = {"\n middle", "\n top","\n mid", "\n abive", "\n high", "\n lower", "\n middl", "\n low", "\n left", "\n below"};//
void setup() {
size (700, 700);
smooth();
diam = new float [10];
//img = loadImage("body1.png");
parts = new PImage[10];
imageMode(CENTER);
textAlign(CENTER, CENTER);
for (int i = 0; i < leftright.length; i++) {
stroke(255);
rect( leftright[i], updown[i], diam[i], diam[i]) ;
//parts[i] = loadImage(i + ".png");
}
}
void draw() {
prepWindow();
titleText();
drawCircle();
expandCircle();
}
void prepWindow() {
//background (img);
background(0);
}
void titleText() {
textAlign(LEFT);
fill(10, 120);
text("PARTS OF THE HUMAN BODY", width/22.5 + 2, height/10);
fill(255);
text("PARTS OF THE HUMAN BODY", width/22.5, height/10);
}
void drawCircle() {
for (int i = 0; i < leftright.length; i++) {
// float x = map(i, 0, leftright.length, 10, 890);
//float y = map(0, i, updown.length, 10, 590);
float x = map(leftright[i], max(leftright), min(leftright), 10, 690); //fix this
float y = map(updown[i], max(updown), min(updown), 10, 590);
noStroke();
fill(200, 90);
stroke(255);
rect( leftright[i], updown[i], diam[i], diam[i]) ;
ellipse(leftright[i], updown[i], diam[i], diam[i]);
}
}
void expandCircle() {
for (int i = 0; i < leftright.length; i++) {
float x = map(leftright[i], max(leftright), min(leftright), 10, 690); // fixxxxx!!!!!!
float y = map(updown[i], max(updown), min(updown), 10, 590);
if (dist(mouseX, mouseY, leftright[i], updown[i]) <= 10) {
diam[i] = diam[i] + 2;
// tint(255, 220);
// image(parts[i], leftright[i], updown[i], diam[i], diam[i]);
stroke(255);
rect( leftright[i], updown[i], diam[i], diam[i]) ;
//
if (y > 700) {
fill(0);
}
else {
fill(10, 180);
}
textAlign(LEFT, LEFT);
text(" " + partz [i] + " ", leftright[i], updown[i]);
//fill(20, 180); String supdown = nf(0, updown[i]); text(" " + locations [i] + " ", leftright[i], updown[i]);}else{diam[i] = diam[i] - 4;//
}
else
{
// not mouse
diam[i] = 12;
stroke(255);
rect( leftright[i], updown[i], diam[i], diam[i]) ;
}
if (diam[i] > 100) { //if diam is greater than d then diam = d
diam[i] = 100;
}
if (diam[i] < 12) {
diam[i] = 12;
}
}
}

Top Reply