How do I move specific regions in a photo? For instance, I want to move the first block of 800 x 40 to the left, the next block to the right, and so forth!

you can use get

http://processing.org/reference/get_.html

So it's

PImage c = get(x, y, w, h);

and then

image(c, xNew, yNew );

in a for loop you probably have to get the complete screen first and then
work with this image

then you can also use get, but it's another get, being a method of class PImage (whereas the above mentioned get is a stand alone command in processing)

http://processing.org/reference/PImage.html


Greetings, Chrisir     

Oh that's very interesting...

But from what I understand, if you are to use [get], you have to define and pick each region separately, right? I was thinking more in lines of a loop that automates selection, for instance: for 800 x 0-40, drag with scrollbar to left, for 800 x 40-80, drag to right, and so forth.

in a for loop you probably have to get the complete screen first and then
work with this image 

By the time I execute the program, my image is loaded! Wouldn't that normally be enough to take it from there?

Thanks again, I start to understand now!

Yiannis

yes, you should apply get in a for-loop
and give it another x value each time and another
value for  xNew as well.

Oh, I see, well that was my initial logical assumption, but the problem is that I don't know how to do that!

Would I have to do that here, perhaps? (copy/paste from my link above)

void draw() {
  background(0);
  int x = int(bar.getPos());
  image(img, x, 0);
  bar.update(mouseX, mouseY);
  bar.display();

Hi again!

I was playing a bit with that program and found that:

// Returns the current value of the thumb
float getPos() {
  float scalar = sw/(sw - sh);
  float ratio = (pos - x) * scalar;
  float offset = minVal + (ratio/sw * (maxVal - minVal)); // If you make that + into a -, it reverts the direction, so...
  return offset;
}
} 

I was trying to play around with it, but I couldn't get past this:

// Returns the current value of the thumb
float getPos() {
  float scalar = sw/(sw - sh);
  float ratio = (pos - x) * scalar;
  float offset;
  for(int y = 0; y < 1200; y = y + 1) {
    if(y % 40 == 0) {
     minVal + (ratio/sw * (maxVal - minVal));
    } else if(y % 40 =! 0) {
      minVal - (ratio/sw * (maxVal - minVal));
    }
  }
  return offset;
}
}

Of course, it returns errors because I have no idea what I'm doing, haha, but I gave it a fair shot. Essentially, what I'm trying to do is to be able to move certain regions left and some right. Specifically, I want the first block of 800 x 0-40 to be able to be dragged to the left, the next to the right and so forth, til the end!

Am I on the right track, or is this complete bogus? Could somebody help a poor beginner with some insight? Again, here's the code: http://pastie.org/private/s3tjgy57ann7lbbl817gfa

Thank you,
Yiannis

hello,

sorry, I was away on a mini journey.

here is my approach which makes an array of the tiles (parts of the initial image and
gives it out 2 different ways:

• 0,1,2,3,4,5,6
• and
• 1,0,3,2,5,4,6

you need an image named test.jpg in your sketch's data folder

1. //
2. PImage myImage;
3. PImage[] copy1 = new PImage [7];
4. int widthOfOneTile = 110;
5. //
6. // ---------------------------------------------------------------
7. //
8. void setup()
9. {
10.   // init
11.   size(10000, 600);
12.   myImage = loadImage ("test.jpg");
13.   myImage.resize( 800, height );
14.   //
15.   for (int i=0; i < 7; i++) {
16.     copy1[i] = myImage.get(i*widthOfOneTile, 0, widthOfOneTile, widthOfOneTile);
17.   }
18.   //
19. } // func
20. //
21. //
22. void draw()
23. {
24.   background(255);
25.   image (myImage, 0, 0);
26.   //
27.   for (int i=0; i < 7; i++) {
28.     image (copy1 [i], i*(widthOfOneTile+10) + 30, widthOfOneTile );
29.   }
30.   int i;
31.   i=0;
32.   image (copy1[1], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +25 );
33.   i=1;
34.   image (copy1[0], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +25 );
35.   //
36.   i=2;
37.   image (copy1[3], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +25 );
38.   i=3;
39.   image (copy1[2], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +25 );
40.   //
41.   i=4;
42.   image (copy1[5], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +25 );
43.   i=5;
44.   image (copy1[4], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +25 );
45.   //
46.   i=6;
47.   image (copy1[6], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +25 );
48.   //
49. } // func
50. //
51. // =====================================================================

this can be simplified to

1. //
2. PImage myImage;
3. PImage[] copy1 = new PImage [7];
4. int widthOfOneTile = 110;
5. //
6. // ---------------------------------------------------------------
7. //
8. void setup()
9. {
10.   // init
11.   size(1000, 600);
12.   myImage = loadImage ("test.jpg");
13.   myImage.resize( 800, height );
14.   //
15.   for (int i=0; i < 7; i++) {
16.     copy1[i] = myImage.get(i*widthOfOneTile, 0, widthOfOneTile, widthOfOneTile);
17.   }
18.   //
19. } // func
20. //
21. //
22. void draw()
23. {
24.   background(255);
25.   image (myImage, 0, 0);
26.   //
27.   for (int i=0; i < 6; i++) {
28.     image (copy1 [i], i*(widthOfOneTile+10) + 30, widthOfOneTile );
29.   } // for
30.   //
31.   for (int i=0; i < 6; i++) {
32.     if ((i%2)==0) {
33.       // even
34.       image (copy1 [i+1], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +30 );
35.     }
36.     else {
37.       // not even
38.       image (copy1 [i-1], i*(widthOfOneTile+10) + 30, widthOfOneTile*2 +30 );
39.     }
40.   }// for
41.   //
42. } // func
43. //
44. // =====================================================================

Hi again,

Thank you so much for your response! That is very interesting. First of all, do I replace some of the existing code with what you just wrote? (because I'm getting errors)

My other question is that these alterations can be operated by a scrollbar, right? I just want to make sure that they won't be pre-loaded!

After it works, it'll be easier to understand what you just did, because there seems to be a lot of work here done, so I will start isolating parameters one by one to see what each thing does.

Thanks so much again for your help, you're really nice!

Yiannis

you wrote:

First of all, do I replace some of the existing code with what you just wrote? (because I'm getting errors)

No, my program  is a complete program of it's own.

ah, I just wrote a very long reply but my answer got crushed by my browser

do you aim at this:
http://en.wikipedia.org/wiki/Sliding_puzzle

Oh I'm sorry to hear that! If you happen to have the MIT Press Processing book, what I'm trying to do is on page 94! (but horizontally, instead of vertically)

I will try to explain as more detailed as possible...:

Basically, I have one picture, 800 x 1200 big, and a horizontal scrollbar, in the center of the picture, that moves the picture left and right. Here's what I have so far: https://dl.dropbox.com/u/43174412/Image_Tilt.zip

Now, what I'm trying to do is to have certain portions of the picture to move left, and simulaneously, some right. (and vice versa, depending on where the scrollbar goes)

Specifically, I am trying to move specific portion, again, horizontally, but this time, in portions of for eg., 40 pixels in the y-axis, so that means, we control certain portions of 800 x 40 every time! The first set goes to the left, the second to the right, third to the left and so forth.

That's it! You can check the program to see what I have so far!

Yiannis

here.........

1. class Scrollbar {
2.   int x, y; // The x- and y- coordinates
3.   float sw, sh; // Width and height of scrollbar
4.   float pos; // Position of thumb
5.   float posMin, posMax; // Max and min values of thumb
6.   boolean rollover; // True when the mouse is over
7.   boolean locked; // True when its the active scrollbar
8.   float minVal, maxVal; // Min and max values for the thumb
9.   Scrollbar (int xp, int yp, int w, int h, float miv, float mav) {
10.     x =xp;
11.     y =yp;
12.     sw = w;
13.     sh = h;
14.     minVal = miv;
15.     maxVal = mav;
16.     pos = x + sw/2 - sh/2;
17.     posMin = x;
18.     posMax = x + sw - sh;
19.   }
20.   // Updates the over bollean and the position of the thumb
21.   void update(int mx, int my) {
22.     if (over(mx, my) == true) {
23.       rollover = true;
24.     }
25.     else {
26.       rollover = false;
27.     }
28.     if (locked == true) {
29.       pos = constrain(mx - sh/2, posMin, posMax);
30.     }
31.   }
32.   // Locks the thumb so the mouse can move off and still update
33.   void press(int mx, int my) {
34.     if (rollover == true) {
35.       locked = true ;
36.     }
37.     else {
38.       locked = false;
39.     }
40.   }
41.   // Resets the scrollbar to neutral
42.   void release() {
43.     locked = false;
44.   }
45.   // Returns true if the cursor is over the scrollbar
46.   boolean over(int mx, int my) {
47.     if ((mx > x) && (mx < x + sw) && (my > y) && (my < y + sh)) {
48.       return true;
49.     }
50.     else {
51.       return false;
52.     }
53.   }
54.   // Draws the scrollbar to the screen
55.   void display() {
56.     fill(255, 80);
57.     rect(x, y, sw, sh);
58.     if ((rollover == true) || (locked == true)) {
59.       fill(255, 125, 125, 150);
60.     }
61.     else {
62.       fill(102, 150);
63.     }
64.     rect(pos, y, sh, sh);
65.   }
66.   // Returns the current value of the thumb
67.   float getPos() {
68.     float scalar = sw/(sw - sh);
69.     float ratio = (pos - x) * scalar;
70.     float offset = minVal + (ratio/sw * (maxVal - minVal));
71.     return offset;
72.   }
73. }
74. //
75. Scrollbar bar;
76. PImage img;
77. //
78. PImage[] copy1 = new PImage [7];
79. int widthOfOneTile = 110;
80. //
81. // ---------------------------------------------------------------
82. //
83. void setup() {
84.   size(800, 800);
85.   noStroke();
86.   // Inputs: x, y, width, height, minVal, maxVal
87.   bar = new Scrollbar(300, 600, 200, 20, -100.0, 100.0);
88.   img =loadImage("test.jpg");
89.   //
90.   for (int i=0; i < 7; i++) {
91.     copy1[i] = img.get( 0, i*widthOfOneTile,
92.     width, widthOfOneTile);
93.   } // for
94. } // func
95. //
96. void draw() {
97.   background(0);
98.   int x = int(bar.getPos());
99.   //image(img, 0, 0);
100.   //
101.   for (int i=1; i < 6; i++) {
102.     if ((i%2)==0) {
103.       // even
104.       image (copy1 [i], 0+x, widthOfOneTile*i );
105.     }
106.     else {
107.       // not even
108.       image (copy1 [i], 0-x, widthOfOneTile*i );
109.     }
110.   }
111.   // 
112.   bar.update(mouseX, mouseY);
113.   bar.display();
114.   fill(244);
115.   text (x,
116.   30, height-30);
117. }
118. void mousePressed() {
119.   bar.press(mouseX, mouseY);
120. }
121. void mouseRelease() {
122.   bar.release();
123. }

You are amazing! That's exactly what I wanted! But I have a question: why doesn't it load the entire picture?? The program dimensions are correct, but it loads like 1/4 of the picture!

Thank you so much for your time! I will study your code thoroughly!

Yiannis

I did a resize with about 66%
on the image.

Maybe leave this out. It's in setup().

Also you need to have the numbers match the size of your image. E.g. how many tiles (now 6, in the code the number 7) and size of the tiles in x- and y-direction etc (in the code widthOfOneTile).

Greetings, Chrisir    

Oh, but that's interesting, because I changed the dimensions, first thing I did when you sent me the code but...

If you see here: http://i48.tinypic.com/2j72td.png

The dimensions of the program are correct, yet, the picture hasn't fully loaded, as well as it doesn't fill the screen, meaning that the picture start from the middle of the program.

Remember, I am an ultra beginner, I can't find these details if you don't clarify them to me!

Cheers,
Yiannis

here:

the image was higher than wide; and the height exceeded the screen.

The height of one tile didn't fit exactly the 6th of an image.

I improved this by using resize and

1.   heightOfOneTile = int (height / 6);

1. class Scrollbar {
2.   int x, y; // The x- and y- coordinates
3.   float sw, sh; // Width and height of scrollbar
4.   float pos; // Position of thumb
5.   float posMin, posMax; // Max and min values of thumb
6.   boolean rollover; // True when the mouse is over
7.   boolean locked; // True when its the active scrollbar
8.   float minVal, maxVal; // Min and max values for the thumb
9.   Scrollbar (int xp, int yp, int w, int h, float miv, float mav) {
10.     x =xp;
11.     y =yp;
12.     sw = w;
13.     sh = h;
14.     minVal = miv;
15.     maxVal = mav;
16.     pos = x + sw/2 - sh/2;
17.     posMin = x;
18.     posMax = x + sw - sh;
19.   }
20.   // Updates the over boolean and the position of the thumb
21.   void update(int mx, int my) {
22.     if (over(mx, my) == true) {
23.       rollover = true;
24.     }
25.     else {
26.       rollover = false;
27.     }
28.     if (locked == true) {
29.       pos = constrain(mx - sh/2, posMin, posMax);
30.     }
31.   }
32.   // Locks the thumb so the mouse can move off and still update
33.   void press(int mx, int my) {
34.     if (rollover == true) {
35.       locked = true ;
36.     }
37.     else {
38.       locked = false;
39.     }
40.   }
41.   // Resets the scrollbar to neutral
42.   void release() {
43.     locked = false;
44.   }
45.   // Returns true if the cursor is over the scrollbar
46.   boolean over(int mx, int my) {
47.     if ((mx > x) && (mx < x + sw) && (my > y) && (my < y + sh)) {
48.       return true;
49.     }
50.     else {
51.       return false;
52.     }
53.   }
54.   // Draws the scrollbar to the screen
55.   void display() {
56.     fill(255, 80);
57.     rect(x, y, sw, sh);
58.     if ((rollover == true) || (locked == true)) {
59.       fill(255, 125, 125, 150);
60.     }
61.     else {
62.       fill(102, 150);
63.     }
64.     rect(pos, y, sh, sh);
65.   }
66.   // Returns the current value of the thumb
67.   float getPos() {
68.     float scalar = sw/(sw - sh);
69.     float ratio = (pos - x) * scalar;
70.     float offset = minVal + (ratio/sw * (maxVal - minVal));
71.     return offset;
72.   }
73. } // class 
74. //
75. Scrollbar bar;
76. PImage img;
77. //
78. PImage[] copy1 = new PImage [7];
79. int heightOfOneTile ; // = 110;
80. //
81. // ---------------------------------------------------------------
82. //
83. void setup() {
84.   size(800, 800);
85.   noStroke();
86.   // Inputs: x, y, width, height, minVal, maxVal
87.   bar = new Scrollbar(300, 600, 200, 20, -100.0, 100.0);
88.   img =loadImage("test.jpg");
89.   //
90.   println(height);
91.   //
92.   // using 0 as a parameter for x and the height as a parameter for y:
93.   // see http://www.processing.org/reference/PImage_resize_.html
94.   img.resize(0, height);
95.   //
96.   heightOfOneTile = int (height / 6);
97.   println(heightOfOneTile);
98.   //
99.   for (int i=0; i < 7; i++) {
100.     copy1[i] = img.get( 0, i*heightOfOneTile, img.width, heightOfOneTile );
101.   } // for
102.   //
103. } // func
104. //
105. void draw() {
106.   //
107.   //background(0);
108.   background(110);
109.   //
110.   int x = int(bar.getPos());
111.   // image(img, width/2, height/2);
112.   //
113.   imageMode(CENTER);
114.   for (int i=0; i < 7; i++) {
115.     if ((i%2)==0) {
116.       // even
117.       image (copy1 [i], width/2+x, i*heightOfOneTile + heightOfOneTile/2 );
118.     }
119.     else {
120.       // not even
121.       image (copy1 [i], width/2-x, i*heightOfOneTile + heightOfOneTile/2 );
122.     }
123.   }
124.   //
125.   bar.update(mouseX, mouseY);
126.   bar.display();
127.   fill(244);
128.   text (x,
129.   30, height-30);
130. }
131. void mousePressed() {
132.   bar.press(mouseX, mouseY);
133. }
134. void mouseRelease() {
135.   bar.release();
136. }

That's perfect man, thank you so much! You were very helpful all along and I appreciate the comments in the code too!

Great!

Good to hear!