Creating a "choose and zoom image" program

Core Library Questions

Alan Slade

Creating a "choose and zoom image" program

in Core Library Questions • 8 months ago

Good morning.
I'm a new user of Processing and also a new user in this forum.

I wanted to create a program in which if a person in front of a webcam raise his finger and touch a photo, the photo will zoom at the center of the screen.
Something like this (the person shoul not be displayed, of course):

Now, I have this code, and I wanted to create this project.
Could you give me a hand?
Thanks a lot.

import processing.video.*;

int numPixels;
int[] backgroundPixels;
int[] hist;
int[] histTop;
Capture video;
int pressed=0;
float presenceSum=0;

void setup() {
size(640, 480, P2D);

video = new Capture(this, width, height, 24);
numPixels = video.width * video.height;
backgroundPixels = new int[numPixels];

loadPixels();
}

void draw() {
if (video.available()) {
    video.read();
    video.loadPixels();

      hist = new int[width];
      float maxval = 0;
      int maxposx=0;
      int maxposy=0;


    for (int i = 0; i < numPixels; i++) {



      color currColor = video.pixels[i];
      color bkgdColor = backgroundPixels[i];



      float currR = red(currColor);
      float currG = green(currColor);
      float currB = blue(currColor);


      float bkgdR = red(bkgdColor);
      float bkgdG = green(bkgdColor);
      float bkgdB = blue(bkgdColor);

      float diffR = abs(currR - bkgdR);
      float diffG = abs(currG - bkgdG);
      float diffB = abs(currB - bkgdB);



      if (diffR>20 && diffG>20 && diffB>20 && pressed==1){
        pixels[i] = color(255, 255, 255);
        presenceSum = presenceSum + 1;
      }
      else{
        pixels[i] = color(0, 0, 0);
      }

      if(pressed==0){
        pixels[i] = color(diffR, diffG, diffB);
      }

    }

    updatePixels();
    filter(ERODE);
    filter(ERODE);
    filter(ERODE);
    filter(ERODE);
    filter(ERODE);


if(pressed==1 && presenceSum>width*height/100){

    for (int i=0; i<width; i++) {
      for (int j=0; j<height; j++) {
        if( int(red(get(i, j))) == 255 && int(green(get(i, j)))==255 && int(blue(get(i, j)))==255 )
        hist[i]=hist[i]+1;
          }
    }


    for (int i=0; i<width; i++) {
      if(hist[i] > maxval) {
      maxval = hist[i];
      maxposx = i;
}
}
maxposy=height-int(maxval);

if(key=='g'){

    //I want to put here the "choose image" program


     background(127);
     fill(0,0,255);
     ellipse(width-maxposx,maxposy,50,50);
}

}

if(key=='v'){
for (int i = 1; i < width; i++) {
    for (int j = 0; j < hist[i]; j++) {
      color c = color(255, 0, 0);
      set(i, j, c);
}
}

for (int i = maxposx-3; i < maxposx+4; i++) {
    for (int j = 0; j < height; j++) {
      color c = color(0, 255, 0);
      set(i, j, c);
    }
}

    for (int j = height-int(maxval)-3; j < height-int(maxval)+4; j++) {
    for (int i = 0; i < width; i++) {
      color c = color(0, 255, 0);
      set(i, j, c);
    }
}

}

    println(presenceSum);


}
}

void keyPressed() {
if(key==' '){
video.loadPixels();
arraycopy(video.pixels, backgroundPixels);
pressed=1;
}
}

Replies(28)

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Nobody can help me?

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

I have no idea about video - I don't even have a cam....
I easily can simulate the image stuff with the mouse...

what is your exact problem?

Does the code work?

What does it, what can't it do?

Maybe you need to be more specific...

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Sorry.
If you could suggest me how to do that program with the mouse, i think I could insert that code into this.
The problem is that I don't know how to realize the "image stuff with the mouse" program :(

I think you know what the background subtraction code can do, right?
More specifically, the part inside the "void draw {.......}" of the program I wanted to realize, will going inside the part where I wrote " //I want to put here the "choose image". And the values mouseX and mouseY, will became maxposX and maxposY, so instead of the mouse, the cursor will be the highest part of the body.

Thanks a lot

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

like this

if (mouseX>100&&mouseX<100+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img1a.get(0, 0, img1a.width, img1a.height);
}
else if (mouseX>300&&mouseX<300+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img2a.get(0, 0, img1a.width, img1a.height);
}
else if (mouseX>500&&mouseX<500+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img3a.get(0, 0, img1a.width, img1a.height);
}
//

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Thank you very much.
Sorry but I haven't understand how to write the program properly with your code, because I started used Processing only a month ago..
Which kind of var should I add to my code? And how\where can I tell to your code program the name of my images ( exampleimage = loadImage("exampleimage.jpg"); )?

GoToLoop

Re: Creating a "choose and zoom image" program

8 months ago

You can't load files before callback function setup(),
b/c Processing still isn't aware of the /data folder!
Moreover, it isn't aware of the canvas dimensions either ( width & height).

The most appropriate place to load files is within setup() itself.

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

After reading your message I was like this:

Could you please explain me more easily what I have to do?
As I said, I'm a total newbie with Processing...

PhiLho

Re: Creating a "choose and zoom image" program

8 months ago

PImage exampleImage;
void setup()
{
size( ... );
exampleImage = loadImage("someImage.jpg");
}
void draw()
{
// Stuff
image(exampleImage, 5, 10); // Or other location
// Other stuff
}

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Thanks.
Before making the program for the webcam I would like to try if it works with the mouse, as Chrisir suggested before.
So this my temporary code:

PImage img1;
PImage img2;
PImage img3;
PImage img4;
void setup()
{
size(1280,720, P2D);
img1 = loadImage("img1.jpg");
img2 = loadImage("img2.jpg");
img3 = loadImage("img3.jpg");
img4 = loadImage("img4.jpg");
}
void draw()
{
image (img1,250,20);
image (img2,550,20);
image (img3,850,20);
image (img4,1150,20);
// Stuff
// Other stuff
}

The problem is that the images are too big:

and I don't know how to resize them like this image so I can zoom them by clicking on them:

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

see resize()

in the reference probabaly under PImage

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Thanks.
But I don't know if it will be ok for my program.
If I use resize() to create the small previews of the photos, when I'll try to use the "zoom image" code, the images will look pixelated or not?

And after creating the thumbnails, how should I mix this code

if (mouseX>100&&mouseX<100+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img1a.get(0, 0, img1a.width, img1a.height);
}
else if (mouseX>300&&mouseX<300+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img2a.get(0, 0, img1a.width, img1a.height);
}
else if (mouseX>500&&mouseX<500+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img3a.get(0, 0, img1a.width, img1a.height);
}
//

with mine?

Chrisir

Re: [WatchList] Creating a "choose and zoom image" program

8 months ago - via EMail-to-forum

First store the big images in an array

You could use resize to make the small images - put them in another array

Big image and small image have the same index in both arrays --- 0 to 0, 1 to 1....

When mouse is over a small image set the index for showing the big image to the index of the small image that has the mouse over it

Good luck!

Alan Slade

Re: Re: [WatchList] Creating a "choose and zoom image" program

8 months ago

Wait...
I don't know why I complipcated so much mine and your lifes.

If I simply create a background in Photoshop with the photos already small on top, and in the code when I pass the mouse\finger on them, they are shown big in the center of the image? It would be simple I think?
Is there a way so I cant tell to the program that if the mouse\finger is in the position mouseX>20 && mouseY<50 must be loaded the file photo1.jpg at the center of the backgorund?
Sorry everybody

Chrisir

Re: [WatchList] Creating a "choose and zoom image" program

8 months ago - via EMail-to-forum

I tried but the program got stuck.

So advise:

Copy your images on the hard deive resize there manually (or batch with irfanview) and name them 0big.jpg - 0small.jpg etc and load them in the arrays

Don't use resize in processing

Maybe increase memory

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Thanks.
What a pity it doesn't worked

Okay, I'll resize the images and put them in data folder like 0big.jpg - 0small.jpg, and I'll load in the code with.

0big = loadImage("0big.jpg.jpg")

After loading all the images, how I should modify the code you gave me before? Thanks again

if (mouseX>100&&mouseX<100+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img1a.get(0, 0, img1a.width, img1a.height);
}
else if (mouseX>300&&mouseX<300+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img2a.get(0, 0, img1a.width, img1a.height);
}
else if (mouseX>500&&mouseX<500+100&&mouseY>10&&mouseY<10+100)
{
imgBig=img3a.get(0, 0, img1a.width, img1a.height);
}
//

Chrisir

Re: [WatchList] Creating a "choose and zoom image" program

8 months ago - via EMail-to-forum

Have a global var like
indexBigImage

In the if set it to
0
Or
1
Or
2

When painting the big image use this var as the index for the array

Alan Slade

Re: Re: [WatchList] Creating a "choose and zoom image" program

8 months ago

Sorry, as usually, I haven't understand what do you mean :(

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Finally I had some results

But of course there is a problem.

Here is the working code

PImage big1;
PImage big2;
PImage big3;
PImage big4;
PImage big5;
PImage big6;
PImage small1;
PImage small2;
PImage small3;
PImage small4;
PImage small5;
PImage small6;

    void setup()
    {
      size(800,600);

      big1 = loadImage("0big.jpg");
      big2 = loadImage("1big.jpg");
      big3 = loadImage("2big.jpg");
      big4 = loadImage("3big.jpg");
      big5 = loadImage("4big.jpg");
      big6 = loadImage("5big.jpg");
      small1 = loadImage("0small.jpg");
      small2 = loadImage("1small.jpg");
      small3 = loadImage("2small.jpg");
      small4 = loadImage("3small.jpg");
      small5 = loadImage("4small.jpg");
      small6 = loadImage("5small.jpg");
    }
    void draw()

    {
    background (255);
    image (small1,100,20);
    image (small2,200,20);
    image (small3,300,20);
    image (small4,400,20);
    image (small5,500,20);
    image (small6,600,20);

    if (mouseX>100&&mouseX<180&&mouseY>10&&mouseY<80)

      {
small1 = big1.get(0,0, big1.width, big1.height);

}

    }

And the program runs like this:

Now, I tried to enlarge the first image with the method Chrisir told me.
The problem is this: when I pass the mouse over the first image, the image is enlarged (very well), but I wanted to enlarge it under the other images.
What should I modify in the code to do this? Thanks again

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

you decided to name the big image that is chosen small1 - bad.
Because you overwrite the first of the small images - you don't want that

instead have

bigImage = big1.get(0,0, big1.width, big1.height);

and

image (bigImage,60,120);

before setup():

PImage bigImage ;

in setup()

bigImage = big1.get(0,0, big1.width, big1.height);

so draw() looks like this: ***************************************************************

void draw()
{
background (255);
// 6 times small
image (small1,100,20);
image (small2,200,20);
image (small3,300,20);
image (small4,400,20);
image (small5,500,20);
image (small6,600,20);
//
// and one bis image
image (bigImage,60,120);
if (mouseX>100&&mouseX<180&&mouseY>10&&mouseY<80)
{
bigImage = big1.get(0,0, big1.width, big1.height);
} // if
} // func

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Thanks Chrisir. Thanks for the patience and for the help.
I've changed the code, but now when I start the program the first image is already zoomed, even if the mouse is not in the trigger positions (100 <x< 180 10<y< 80). Perhaps I've done something wrong...
Could you understand why?

Here is the code:

PImage bigImage;
PImage big1;
PImage big2;
PImage big3;
PImage big4;
PImage big5;
PImage big6;
PImage small1;
PImage small2;
PImage small3;
PImage small4;
PImage small5;
PImage small6;

    void setup()
    {
      size(800,600);

      big1 = loadImage("0big.jpg");
      big2 = loadImage("1big.jpg");
      big3 = loadImage("2big.jpg");
      big4 = loadImage("3big.jpg");
      big5 = loadImage("4big.jpg");
      big6 = loadImage("5big.jpg");
      small1 = loadImage("0small.jpg");
      small2 = loadImage("1small.jpg");
      small3 = loadImage("2small.jpg");
      small4 = loadImage("3small.jpg");
      small5 = loadImage("4small.jpg");
      small6 = loadImage("5small.jpg");
      bigImage = big1.get(0,0, big1.width, big1.height);

    }
    void draw()

    {
    background (255);
    image (small1,100,20);
    image (small2,200,20);
    image (small3,300,20);
    image (small4,400,20);
    image (small5,500,20);
    image (small6,600,20);
    image (bigImage,60,120);

    if (mouseX>100&&mouseX<180&&mouseY>10&&mouseY<80)

      {
bigImage = big1.get(0,0, big1.width, big1.height);

}

    }

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

yeah it's because of

bigImage = big1.get(0,0, big1.width, big1.height);

you could delete this line and then

instead of

image (bigImage,60,120);

say

if (bigImage != null) {
image (bigImage,60,120);
} // if

not tested

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Sadly, the result doesn't change.
The image stays zoomed

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

this works for the first two images

(tested)

PImage bigImage;
PImage big1;
PImage big2;
PImage big3;
PImage big4;
PImage big5;
PImage big6;
PImage small1;
PImage small2;
PImage small3;
PImage small4;
PImage small5;
PImage small6;
void setup()
{
size(800, 600);
big1 = loadImage("0big.jpg");
big2 = loadImage("1big.jpg");
big3 = loadImage("2big.jpg");
big4 = loadImage("3big.jpg");
big5 = loadImage("4big.jpg");
big6 = loadImage("5big.jpg");
small1 = loadImage("0small.jpg");
small2 = loadImage("1small.jpg");
small3 = loadImage("2small.jpg");
small4 = loadImage("3small.jpg");
small5 = loadImage("4small.jpg");
small6 = loadImage("5small.jpg");
bigImage = null; //big1.get(0, 0, big1.width, big1.height);
}
void draw()
{
background (255);
image (small1, 100, 20);
image (small2, 200, 20);
image (small3, 300, 20);
image (small4, 400, 20);
image (small5, 500, 20);
image (small6, 600, 20);
if (bigImage != null)
image (bigImage, 60, 120);
if (mouseX>100&&mouseX<180&&mouseY>10&&mouseY<80)
{
bigImage = big1; // big1.get(0, 0, big1.width, big1.height);
}
else if (mouseX>200&&mouseX<280&&mouseY>10&&mouseY<80)
{
bigImage = big2; // big2.get(0, 0, big1.width, big1.height);
}
else
{
bigImage = null;
} // else
//
} // func
//

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Thanks. Thanks.
I don't know how did you do that, but you solved this maze.
Now I'll change this code so I can operate with my hands with the webcam and not with the mouse (I've already had a test with one image and it worked, don't worry

).

Thanks again to you and everybody for the patience..

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

You are welcome!

As said it might be faster to use arrays and just change the index

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

like this with arrays

(tested)

//
int indexBigImage = -1;
//
PImage big [] = new PImage [7];
//
PImage small [] = new PImage [7];
//
void setup()
{
size(800, 600);
//
big[1] = loadImage("0big.jpg");
big[2] = loadImage("1big.jpg");
big[3] = loadImage("2big.jpg");
big[4] = loadImage("3big.jpg");
big[5] = loadImage("4big.jpg");
big[6] = loadImage("5big.jpg");
//
small[1] = loadImage("0small.jpg");
small[2] = loadImage("1small.jpg");
small[3] = loadImage("2small.jpg");
small[4] = loadImage("3small.jpg");
small[5] = loadImage("4small.jpg");
small[6] = loadImage("5small.jpg");
//
}
void draw()
{
background (255);
// use for loop here
image (small[1], 100, 20);
image (small[2], 200, 20);
image (small[3], 300, 20);
image (small[4], 400, 20);
image (small[5], 500, 20);
image (small[6], 600, 20);
//
if (indexBigImage != -1)
{
image (big[indexBigImage], 60, 120);
}
//
if (mouseX>100&&mouseX<180&&mouseY>10&&mouseY<80)
{
indexBigImage=1;
}
else if (mouseX>200&&mouseX<280&&mouseY>10&&mouseY<80)
{
indexBigImage = 2;
}
else
{
indexBigImage = -1;
} // else
//
} // func
//

Alan Slade

Re: Creating a "choose and zoom image" program

8 months ago

Thanks again.
This procedure is interesting, but I think perhaps is a bit more complicated than the other, although it's quicker..

However, now it's time to relax.
I'm undecided about opening a new thread tomorrow, because I had in mind to create a jigsaw puzzle of four pieces with processing, but I don't know if it would be diffucult or easy to do.

Chrisir

Re: Creating a "choose and zoom image" program

8 months ago

make a new thread
pls

Top Reply