We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › Take part of image using mouse
‹ Previous Topic | Next Topic ›
Pages: 1 2 
Take part of image using mouse (Read 3452 times)
Giles
Re: Take part of image using mouse
Reply #15 - Mar 18th, 2010, 4:47pm  
Just use ints... and then it will round to nearest one, which is what you want anyway.

And use the map function to get the x coordinate in the large image from the x coordinate in the small image. Same with the y coordinate.

xbig = map(xsmall, xsmallleftlimit, xsmallrightlimit, xbigleftlimit, xbigrightlimit);

where small is the small image, and big is the bigger one....
reference for the map function here:
http://processing.org/reference/map_.html
Back to top
 
 
vincent verheyen
Re: Take part of image using mouse
Reply #16 - Mar 21st, 2010, 11:51am  
Hey Giles!  Smiley

This cleaned-up code works with:

- klas.jpg (1440x680)
- klas_klein.jpg (360x170).

BUT...  Shocked

The size () HAS TO BE set to (1440x680) or more! Else the get() will fail!

    -> Is there a way to make only part of the size() visible to users?

     or...

    -> Is it smarter to replace the get() code by a pixels[] code?

     Or will pixels[] also only grab pixels from the visible part of the screen?

Code:


int venster,start,geslacht,startX,startY;
int startX_klein,startY_klein,moveX,moveY;
PImage klas,selectie,klas_klein;
PFont lettertype1;


void setup(){
  
   size(1440,680);
   textAlign(CENTER);
   imageMode(CENTER);
   lettertype1=createFont("Verdana",20);
   textFont(lettertype1);
   klas_klein=loadImage("klas_klein.jpg");
   klas=loadImage("klas.jpg");}
   
   
void mousePressed(){
  
  if(venster==2){
    
   if((mouseX>=70)&&
	(mouseX<=430)&&
	(mouseY>=165)&&
	(mouseY<=335)){
	  
    start=1;
    startX_klein=mouseX;
    startY_klein=mouseY;}}}


void mouseReleased(){
  
  if(venster==0){
    
   if((mouseX>=215)&&
	(mouseX<=285)&&
	(mouseY>=235)&&
	(mouseY<=265)){
			  
    {venster=1;}}}

  if(venster>0){ 
    
   if((mouseX>=30)&&
	(mouseX<=100)&&
	(mouseY>=30)&&
	(mouseY<=60))
			 
    {start=0;
     venster=venster-1;}}

  if(venster==1){
    
   if((mouseX>=140)&&
	(mouseX<=210)&&
	(mouseY>=235)&&
	(mouseY<=265))
	
    {geslacht=1; 
     venster=2;}

   if((mouseX>=290)&&
	(mouseX<=360)&&
	(mouseY>=235)&&
	(mouseY<=265))
						  
    {geslacht=2;
     venster=2;}}

  if(venster==2){
    
   if(start==1){
   
    if((mouseX<70)||
	(mouseX>430)||
	(mouseY<165)||
	(mouseY>335))
			 
     {start=0;}
     
    if((mouseX>=70)&&
	 (mouseX<=430)&&
	 (mouseY>=165)&&
	 (mouseY<=335))
			  
     {background(255);
	image (klas,720,340);
	float startX=map(startX_klein,70,430,0,1440);
	float startY=map(startY_klein,165,335,0,680);
	float moveX=map(mouseX,70,430,0,1440);
	float moveY=map(mouseY,165,335,0,680);
	selectie=get(min(int(moveX),int(startX)),
	min(int(moveY),int(startY)),abs(int(moveX)-int(startX)),
	abs(int(moveY)-int(startY)));
	venster=3;}}}}
	
	
void draw(){
  
  if(venster>0)
  
   {background(255);
    fill(255);
    rect(30,30,70,30);
    fill(0);
    text("<-",65,53);}
    
  if(venster==0)
  
   {background(255);
    fill(0);
    rect(215,235,70,30);
    text("Welcome to the Body-program.",250,450);
    fill (255);
    text("Start",250,257);}
    
  if(venster==1)
  
   {fill(0);
    rect(150,235,60,30);
    rect(290,235,60,30);
    text("First choose your gender.",250,450);
    fill(255);
    text("M",180,257);
    text("F",320,257);}
    
  if(venster==2){
    
   {fill(0);
    rect(65,160,370,180);
    text("Now select your head.",250,450);
    image(klas_klein,250,250);}
    
    if(start==1)
    
     {fill(255,50);
	rect(startX_klein,startY_klein,
	mouseX-startX_klein,mouseY-startY_klein);}}
	
  if(venster==3)
  
   {text("Is this the head you wanted?",250,450);
    image(selectie,250,250);}}
    


Back to top
« Last Edit: Mar 22nd, 2010, 8:52am by vincent verheyen »  
 
Giles
Re: Take part of image using mouse
Reply #17 - Mar 22nd, 2010, 8:50am  
I see what you are doing - drawing the large image to the screen so you can get from it..... Don't do this...

delete this: image (klas,720,340);

And use this:

selectie=klas.get(.......etc.);

So you are getting from the larger image, but without drawing it. You can now make the size of the sketch small again.... as for the negative array size error - I think that is because there's an error in your calculations. It only occurs when you try to select from lower down in the image. Also, what you select doesn't correspond exactly to what you get - another sign your calculations are out.

I would make a smaller program which just does this bit, and get it working properly and then implement it in your main program....
Back to top
 
 
vincent verheyen
Re: Take part of image using mouse
Reply #18 - Mar 22nd, 2010, 9:17am  
Wow, thanks Giles! What you said worked like a charm!

It finally got to work.

With the code below, i can draw my selection from
anywhere in the image, to anywhere in the image,
and the selection will correspond perfectly!

Greets,
Vincent.

Code:


int venster,start,geslacht,startX,startY;
int startX_klein,startY_klein,moveX,moveY;
PImage klas,selectie,klas_klein;
PFont lettertype1;


void setup(){
  
   size(500,500);
   textAlign(CENTER);
   imageMode(CENTER);
   lettertype1=createFont("Verdana",20);
   textFont(lettertype1);
   klas_klein=loadImage("klas_klein.jpg");
   klas=loadImage("klas.jpg");}
   
   
void mousePressed(){
  
  if(venster==2){
    
   if((mouseX>=70)&&
	(mouseX<=430)&&
	(mouseY>=165)&&
	(mouseY<=335)){
	  
    start=1;
    startX_klein=mouseX;
    startY_klein=mouseY;}}}


void mouseReleased(){
  
  if(venster==0){
    
   if((mouseX>=215)&&
	(mouseX<=285)&&
	(mouseY>=235)&&
	(mouseY<=265)){
			  
    {venster=1;}}}

  if(venster>0){ 
    
   if((mouseX>=30)&&
	(mouseX<=100)&&
	(mouseY>=30)&&
	(mouseY<=60))
			 
    {start=0;
     venster=venster-1;}}

  if(venster==1){
    
   if((mouseX>=140)&&
	(mouseX<=210)&&
	(mouseY>=235)&&
	(mouseY<=265))
	
    {geslacht=1; 
     venster=2;}

   if((mouseX>=290)&&
	(mouseX<=360)&&
	(mouseY>=235)&&
	(mouseY<=265))
						  
    {geslacht=2;
     venster=2;}}

  if(venster==2){
    
   if(start==1){
   
    if((mouseX<70)||
	(mouseX>430)||
	(mouseY<165)||
	(mouseY>335))
			 
     {start=0;}
     
    if((mouseX>=70)&&
	 (mouseX<=430)&&
	 (mouseY>=165)&&
	 (mouseY<=335))
			  
     {background(255);
	float startX=map(startX_klein,70,430,0,1440);
	float startY=map(startY_klein,165,335,0,680);
	float moveX=map(mouseX,70,430,0,1440);
	float moveY=map(mouseY,165,335,0,680);
	selectie=klas.get(min(int(moveX),int(startX)),
	min(int(moveY),int(startY)),abs(int(moveX)-int(startX)),
	abs(int(moveY)-int(startY)));
	venster=3;}}}}
	
	
void draw(){
  
  if(venster>0)
  
   {background(255);
    fill(255);
    rect(30,30,70,30);
    fill(0);
    text("<-",65,53);}
    
  if(venster==0)
  
   {background(255);
    fill(0);
    rect(215,235,70,30);
    text("Welcome to the Body-program.",250,450);
    fill (255);
    text("Start",250,257);}
    
  if(venster==1)
  
   {fill(0);
    rect(150,235,60,30);
    rect(290,235,60,30);
    text("First choose your gender.",250,450);
    fill(255);
    text("M",180,257);
    text("F",320,257);}
    
  if(venster==2){
    
   {fill(0);
    rect(65,160,370,180);
    text("Now select your head.",250,450);
    image(klas_klein,250,250);}
    
    if(start==1)
    
     {fill(255,50);
	rect(startX_klein,startY_klein,
	mouseX-startX_klein,mouseY-startY_klein);}}
	
  if(venster==3)
  
   {text("Is this the head you wanted?",250,450);
    image(selectie,250,250);}}
    
Back to top
« Last Edit: Mar 22nd, 2010, 10:40am by vincent verheyen »  
 
Giles
Re: Take part of image using mouse
Reply #19 - Mar 22nd, 2010, 10:48am  
OK....good. Still doesn't get the right region on my computer....are you sure you posted the most recent version?
Back to top
 
 
vincent verheyen
Re: Take part of image using mouse
Reply #20 - Mar 22nd, 2010, 11:20am  
Yes, but i am working with different images now.

I have found a bigger original picture,
so now the sizes and names are:

- klas.jpg (1440x680)
- klas_klein.jpg (360x170).
Back to top
 
 
Giles
Re: Take part of image using mouse
Reply #21 - Mar 22nd, 2010, 4:38pm  
Oh yes, I see...well done...carry on Smiley
Back to top
 
 
vincent verheyen
Re: Take part of image using mouse
Reply #22 - Mar 27th, 2010, 4:26am  
Hi All! (and Giles in special)

The body-program is now getting pretty finished!
Check it out @ www.openprocessing.org

Here's the exact link:

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

Let me know what you think!  Tongue
Back to top
 
 
Giles
Re: Take part of image using mouse
Reply #23 - Mar 29th, 2010, 3:05pm  
Cool...

One thing you could do is get rid of the black border when you draw the head..... you could also try to "feather" the edges - set the transparency (alpha) closer to zero at the edges of the head image....

This way the head would blend much better with the backround image.
Back to top
 
 
rickr543210
Re: Take part of image using mouse
Reply #24 - Mar 29th, 2010, 5:18pm  


vincent verheyen wrote on Mar 17th, 2010, 9:30am:
Hi Giles! Wink Thank you so much for your code!
It's wonderful!  Cheesy

Could you take a look at my program  Undecided
(The program works with a "test.jpg" image in the sketch directory).

Here is the code: (I added some remarks in the code as to where
                      i think the code should be written.)  Shocked

Code:
int venster = 0;
int volgendvenster = 0;
int geslacht = 0;
PFont lettertype1;
PImage backgrnd;
PImage selection;
float startX, startY;

void setup () {
    textAlign(CENTER);
    imageMode(CENTER);
    size(500,500);
    background(255);
    lettertype1 = createFont("Verdana", 20);
    textFont(lettertype1);
    backgrnd = loadImage("test.jpg");}
    
void mousePressed(){
  if((mouseButton==LEFT) && (venster == 0) && (mouseX>=215) && (mouseX<=285) && 
     (mouseY>=235) && (mouseY<=265)) {
   volgendvenster = 1;}
   
  if((mouseButton==LEFT) && (venster == 1) && (mouseX>=145) && (mouseX<=215) && 
     (mouseY>=235) && (mouseY<=265)) {
   volgendvenster = 1;
   geslacht = 1;}
   
   if((mouseButton==LEFT) && (venster == 1) && (mouseX>=285) && (mouseX<=355) && 
     (mouseY>=235) && (mouseY<=265)) {
   volgendvenster = 1;
   geslacht = 2;}

   if((mouseButton==LEFT) && (venster == 2) && (mouseX>=68) && (mouseX<=432) && 
     (mouseY>=201) && (mouseY<=299)) {
   volgendvenster = 1;
   
   
	 // when if is true, i think the user should be able to start to select a part of the test.jpg here
	 
	 
   }}

void mouseReleased(){
  if((mouseButton==LEFT) && (venster == 0) && (mouseX>=215) && (mouseX<=285) && 
     (mouseY>=235) && (mouseY<=265)) {
   volgendvenster = 2;}
 
   if((mouseButton==LEFT) && (venster == 1) && (geslacht == 1) && 
	(mouseX>=145) && (mouseX<=215) && (mouseY>=235) && (mouseY<=265)) {
   volgendvenster = 2;}
   
   if((mouseButton==LEFT) && (venster == 1) && (geslacht == 2) && 
	(mouseX>=285) && (mouseX<=355) && (mouseY>=235) && (mouseY<=265)) {
   volgendvenster = 2;
   geslacht = 2;}
   
  if((mouseButton==LEFT) && (venster == 2) && (mouseX>=68) && 
     (mouseX<=432) && (mouseY>=201) && (mouseY<=299) && 
     (volgendvenster == 1)) {
    volgendvenster = 2;
    
    
    // when if is true, i think the selected part of the test.jpg should be decided and saved here
    
    
}}
    
void draw() {

  if (venster == 0) {
    background(255);
    fill (0);
    rect(215,235,70,30);
    text("Welcome to the Body-program.",250,450);
    fill (255);
    text("Start",250,257);}
  if ((venster == 0) && (volgendvenster == 2)) {
    venster = 1;
    volgendvenster = 0;}
    
   if (venster == 1) {
    background(255);
    fill (0);
    rect(145,235,70,30);
    rect(285,235,70,30);
    text("First choose your gender.",250,450);
    fill (255);
    text("M",180,257);
    text("F",320,257);}
   if ((venster == 1) && (volgendvenster == 2)) {
    venster = 2;
    volgendvenster = 0;}
    
   if (venster == 2) {
    background(255);
    fill (0);
    rect (0,0,0,0);
    text("Now select your head.",250,450);
    image (backgrnd,250,250,364,98);}
   if ((venster == 2) && (volgendvenster == 2)) {
    venster = 3;
    volgendvenster = 0;}

    if (venster == 3) {
    background(255);
    text("Is this the head you wanted?",250,450);
    
    
    // when if is true, i think the selected part of the test.jpg should appear here
    
    
}}


Visually speaking the remarks inside the code mean:

  - The user should be able to select a part of the test.jpg
  when the 'Now select your head.' screen
  is shown.

  - Then the selected part of the the test.jpg should appear
  when the 'Is this the head you wanted?.'      
  screen is shown.  Cool

Giles, you really kick ass for helping me out man!!!  Cool
I really mean that!  Wink


I was looking for this too it works great thank you
Back to top
 
WWW  
Pages: 1 2 
‹ Previous Topic | Next Topic ›