opening up an image

Programming Questions

BenRee

in Programming Questions • 2 years ago

hiya forum!

need some help from you experts! can you tweak this code so that when i double click on the circle up comes an image (dont mind what!) that i can close to get back to the circle? Thanks a million!!

size (480,320);
smooth();
fill(153);
ellipse (100,60,130,100);

Replies(12)

tfguy44

Re: opening up an image

2 years ago

PImage img;
boolean showImg;
void setup(){
size(480,320);
smooth();
img=loadImage("http://www.bob-o-rama.com/uploads/2008-april-daisies-480-320-blackberry-bold-wallpaper.jpg");
showImg=false;
}
void draw(){
background(196);
fill(153);
stroke(mouseOverCircle(100,60,100)?255:0);
ellipse(100,60,100,100);
if(showImg){
image(img,0,0,480,320);
}
}
void mousePressed() {
if(mouseEvent.getClickCount()==2){
if(mouseOverCircle(100,60,100)){
showImg=true;
}
}
}
void keyPressed(){
if((key==' ')&&(showImg)){
showImg=false;
}
}
boolean mouseOverCircle(int x,int y,int r){
return(dist(mouseX,mouseY,x,y)<=r);
}

tfguy44

Re: Re: opening up an image

2 years ago

Footnotes:

- Press space to close the image.

- The circle is now a circle. You may bask in the glory of its constant curvature.

- The circle's border changes color when your mouse is over it.

BenRee

Re: opening up an image

2 years ago

amazing work, thanks a million tfguy44, i'm basking(!!!!!).

So I wanna get a sphere now rather than a circle. I'm putting the P3D element in the set-up and getting a sphere instead- no prob. BUT (!) it goes wrong cause i dont know what to replace the (mouseOverCircle) with... any help her would be fantastic

thanks a million!

smashy25

Re: opening up an image

2 years ago

same issue here..well anyway thanks for the info.

tfguy44

Re: opening up an image

2 years ago

We solved that problem over a year ago.

http://www.openprocessing.org/visuals/?visualID=7881

BenRee

Re: opening up an image

2 years ago

yeah, thats way cool! wow, great work man. Its pretty scary for a newbee like me (

). any chance you can give me a little guidance to relate the code to my original circle idea, making it a sphere?...

thanks again for all your help. this forum is fantastic!!!!!

thanks a million, c

tfguy44

Re: opening up an image

2 years ago

Attempt it yourself first, please.

Once you have, post your code that does the sphere and uses the Picker library.

BenRee

Re: opening up an image

2 years ago

o.k, that was fairly easy. now i've done this can you give me some hints as to how i can; reduce/increase the amount of spheres and also how the click opens up an image?

thanks a mill!

// Import the picking library for simple 3D picking

import picking.*;

// Declare a Picker object to do the picking.

Picker picker;

PImage img;

boolean showImg;

// Set up variables for the scene.

float r = 0.0;

color[] colors = {

color(064,064,064), // Black

color(255,000,000), // Red

color(000,255,000), // Green

color(000,000,255), // Blue

color(255,255,000), // Yellow

color(255,000,255), // Purple

color(000,255,255), // Cyan

color(255,255,255) }; // White

color bgcolor = color(32);

void setup(){

// Set the size, and make this a 3D sketch.

size(512,512, P3D);

// Set up the picking object.

picker = new Picker(this);

}

void draw(){

// Define a variable to track the current object's ID.

int currentID = 0;

// The background's ID is always -1

background(bgcolor);

lights();

noStroke();

translate(width/2, height/2,20);

rotateY(r);

r=(r+0.01)%TWO_PI;

for(int x=-1;x<2;x++){

for(int y=-1;y<2;y++){

for(int z=-1;z<2;z++){

// Each box has a different object ID, so you have to tell the picker which ID to use.

picker.start(currentID);

pushMatrix();

scale(40);

translate(x,y,z);

if(x*y*z != 0){

// Each box is has a different color.

fill(colors[currentID]);

// Draw the box.

sphere(1);

currentID++;

}

popMatrix();

// Tell the picker to stop using the ID, since we don't want any other objects to use this ID.

picker.stop();

}

// See the click buffer. Warning: Heavy code.

//loadPixels();

//picker.getBuffer().loadPixels();

//for( int i = 0; i < width * height; i++){

// pixels[i] = 200 * picker.getBuffer().pixels[i];

//}

//updatePixels();

}

void mouseClicked(){

// Get the object ID at the mouse's position.

int mouseID = picker.get(mouseX,mouseY);

println( mouseID );

if(mouseID!=-1){

// Set the background to the same color (but darker) to indicate which box was clicked.

bgcolor = color( red(colors[mouseID])/2, green(colors[mouseID])/2, blue(colors[mouseID])/2 );

}

tfguy44

Re: opening up an image

2 years ago

Simply taking my example and replacing the boxes with spheres is probably a step in the wrong direction for you.

I'm not doing this all for you - and no one who can, will. You need to learn how to program yourself.

You should work with the code I've posted here - the code that does the circle and the image - and make the following changes:

- Turn it from a 2D sketch into a 3D (P3D) sketch.

- Instead of drawing a circle, draw a sphere. You may want to look at the examples for sphere() ( http://processing.org/reference/sphere_.html) and sphereDetail() ( http://processing.org/reference/sphereDetail_.html).

- Add the code that deals with the picker library. Give your sphere an ID.

- Modify the logic in mousePressed() to check if the mouse was double clicked and, if it was, what the ID of the object that was clicked on was. Toggle the boolean to display the image if you need to.

At that point - or if you get stuck - post your code here.

After that, you could continue to change your program so that:

- It has an array of images.

- It uses a class to define a sphere object.

- It has many spheres.

- Each sphere, when double clicked, displays a different image.

- The spheres move.

- The spheres dance.

BenRee

Re: opening up an image

2 years ago

hi, so i have made some attempts to do the above, with mixed success (

I've got it so mouse over sphere loads image and space bar removes it. Problems; image doesn't fill screen and sphere remains. Also tried and failed to get double-click working to show image (best i could do was double clicking anywhere on screen to load image, but that means the picker wasnt working_

any further guidance?

PImage img;
boolean showImg;
import picking.*;
Picker picker;
void setup(){
size(480,320,P3D);
smooth();
img=loadImage("http://www.bob-o-rama.com/uploads/2008-april-daisies-480-320-blackberry-bold-wallpaper.jpg");
picker = new Picker(this);
}
void draw(){
background(196);
stroke(60,90,160);
lights();
picker.start (1);
translate(150, 150, 0);
sphere(50);
if(showImg){
image(img,0,0,480,320);}
picker.stop();
int id = picker.get(mouseX, mouseY);
switch (id) {
case 0:
showImg=false;
case 1:
showImg=true;
}
}
void keyPressed(){
if((key==' ')&&(showImg)){
showImg=false;
}
}

PhiLho

Re: opening up an image

2 years ago

I have at least an advice: use Edit > Auto Format tool! Proper indenting is also essential to work cleanly on code.

tfguy44

Re: opening up an image

2 years ago

More advice. Make sure that you are:

Closing draw() in the right place.

Starting mousePressed() in the right place (and starting it at all!).

Using "break;" between switch cases, so one doesn't fall into the next.

Not using a switch statement when a simple if statement will do.

I also suggest:

Restructuring draw() so that if starts with a call to background(), then has a if(...){...}else{...} statement that either draws the sphere or does the image.

Calling fill() instead of stroke() when drawing a 3D object.

Also calling noStroke();

Pressing Ctrl-t.

Top Reply