Loading...
Logo
Processing Forum
Hi guys,

I'm asking for some help again.

I have a code, which amasing Chrisir ( http://forum.processing.org/user/chrisir) helped me with.

Copy code
  1.  
    PImage img;       // The source image
    PImage img2; // declare it
    int cellsize = 2; // Dimensions of each cell in the grid
    int columns, rows;   // Number of columns and rows in our system


    void setup() {
      size(750, 500, P3D);
      img = loadImage("img1.jpg");  // Load the image
      img2 = loadImage("img2.jpg"); // load it
      columns = img.width / cellsize;  // Calculate # of columns
      rows = img.height / cellsize;  // Calculate # of rows
    }

    void draw() {
      background(0);
      // Begin loop for columns
      for ( int i = 0; i < columns; i++) {
        // Begin loop for rows
        for ( int j = 0; j < rows; j++) {
          int x = i*cellsize + cellsize/2;  // x position
          int y = j*cellsize + cellsize/2;  // y position
          int loc = x + y*img.width;  // Pixel array location
          color c = img.pixels[loc];  // Grab the color
          // Calculate a z position as a function of mouseX and pixel brightness
          float z = (mouseX / float(width)) * brightness(img2.pixels[loc]) - 20.0; // use it
          // Translate to the location, set fill and stroke, and draw the rect
          pushMatrix();
          translate(x + 200, y + 100, z);
          fill(c, 204);
          noStroke();
          rectMode(CENTER);
          rect(0, 0, cellsize, cellsize);
          popMatrix();
        }
      }
    }



'Mouse horizontal location controls breaking apart of image and Maps pixels from a 2D image1 into 3D space using image2 as a mapping guide.
Pixel brightness of image2 controls translation of image1 along z axis.'

In other words when I apply this code for two images
Pixels of image1 that situated in the same positions where the brighter pixels of image2 are, comes up. So image2 becomes a 'map' of positions for the pixels of image1.

That's how this code works at the moment. What I need to do is to incorporate third image into this code (image3).

Image3 looks like a pattern of black or white cells.



The size of all 3 images is the same.

I need black cells of image3 not to show, and white cells to grow and create white lines (rays) behind image1. The length of the white rays should be determined by the same 'z' mapped by image 2.

This is an illustration of this idea.




 Please help guys to change the existing coding to be able to do that.

I'm really really looking forward to hearing from you.

Thank you.



Replies(18)


[edited]

hello,

ok, here's what you do.
Before setup() declare img3 (like the other two).
Load your black and white image within setup()

Now

white cells to grow and create white lines (rays) behind image1. The length of the white rays should be determined by the same 'z' mapped by image 2.

Hm, please remember that the command line() comes with 2+2 or 3+3 parameters.
  • Meaning a 2D point is connected to another 2D point (2+2):
    line(x1, y1, x2, y2)
  • or a 3D point is connected to another 3D point (3+3)
    line(x1, y1, z1, x2, y2, z2)
Anyway, when I understand you correctly, you want the latter,
heading for something like
Copy code
  1. stroke(255);  // white
  2. color myColorWhite = color(255);  // white
  3. if (img.pixels[loc] == myColorWhite)  // Grab the color
  4.     line (x + 200, y + 100, z , x,y,0); // that you need to figure out
You need to figure out the last line.
And you probably need to figure out the if-statement.

Please remove
Copy code
  1.       // Translate to the location, set fill and stroke, and draw the rect
  2.       pushMatrix();
  3.       translate(x + 200, y + 100, z);
  4.       fill(c, 204);
  5.       noStroke();
  6.       rectMode(CENTER);
  7.       rect(0, 0, cellsize, cellsize);
  8.       popMatrix();

Hope this helps.

Chrisir

http://forum.processing.org/user/chrisir
Hi Chrisir,

wow, that's quick!

I incorporated the code that you've kindly provided this way:

Copy code
  1.  
    PImage img;      
    PImage img2;
    PImage img3;
    int cellsize = 2; // Dimensions of each cell in the grid
    int columns, rows;   // Number of columns and rows in our system


    void setup() {
      size(750, 500, P3D);
      img = loadImage("img1.jpg");  // Load the image
      img2 = loadImage("img2.jpg"); // load it
      img3 = loadImage("img3.jpg"); // load it
      columns = img.width / cellsize;  // Calculate # of columns
      rows = img.height / cellsize;  // Calculate # of rows
    }

    void draw() {
      background(0);
      // Begin loop for columns
      for ( int i = 0; i < columns; i++) {
        // Begin loop for rows
        for ( int j = 0; j < rows; j++) {
          int x = i*cellsize + cellsize/2;  // x position
          int y = j*cellsize + cellsize/2;  // y position
          int loc = x + y*img.width;  // Pixel array location
          color c = img.pixels[loc];  // Grab the color
          // Calculate a z position as a function of mouseX and pixel brightness
          float z = (mouseX / float(width)) * brightness(img2.pixels[loc]) - 20.0; // use it
          // Translate to the location, set fill and stroke, and draw the rect
          pushMatrix();
          translate(x + 200, y + 100, z);
          fill(c, 204);
          noStroke();
          rectMode(CENTER);
          rect(0, 0, cellsize, cellsize);
          popMatrix();
          stroke(255);  // white
          color myColorWhite = color(255);  // white
          if (img.pixels[loc] == myColorWhite)  // Grab the color
          line (x + 200, y + 100, z , x,y,0); // that you need to figure out
     }
      }
    }



But when I play it, it works exactly as it did before, no changes.

is it because of these lines that you left for me to work out? these ones:
Copy code
  1. if (img.pixels[loc] == myColorWhite)  // Grab the color
Copy code
  1.     line (x + 200, y + 100, z , x,y,0); // that you need to figure out
Sorry, I'm still a dumb :(

If you are too busy to explain, that's fine. I'll have to ask my teacher, you've already helped me so much!!!
He was deeply impressed, by the way, last time, when I showed him the sound visual code that you helped me with! My whole course was amazed, actually - seeing that cells moving while the sound was playing, remember that one?
Many thanks!
xxx





hello,

when you post your program with the images to www.openprocessing.org , we can run and test it...

that would be great!

I think you forgot to remove

Copy code
  1.       pushMatrix();
  2.       translate(x + 200, y + 100, z);
  3.       fill(c, 204);
  4.       noStroke();
  5.       rectMode(CENTER);
  6.       rect(0, 0, cellsize, cellsize);
  7.       popMatrix();

if you do your if with {.................}

you can use println in the {  }  and thus test whether the if-statement is ok.

Greetings, Chrisir





Many Thanks, Chrisir
xxx

I've changed what you've mentioned, but unfortunately it doesn't work for me :(
probably i'm doing something wrong

what I've noticed also is that in the code in the 'if part' we don't mention that the colour white should be taken from image3 to create my rays/lines of white. shouldn't image3 be included somewhere in the 'if...' section?

Copy code
  1.  
    PImage img;      
    PImage img2;
    PImage img3;
    int cellsize = 2; // Dimensions of each cell in the grid
    int columns, rows;   // Number of columns and rows in our system


    void setup() {
      size(750, 500, P3D);
      img = loadImage("img1.jpg");  // Load the image
      img2 = loadImage("img2.jpg"); // load it
      img3 = loadImage("img3.jpg"); // load it
      columns = img.width / cellsize;  // Calculate # of columns
      rows = img.height / cellsize;  // Calculate # of rows
    }

    void draw() {
      background(0);
      // Begin loop for columns
      for ( int i = 0; i < columns; i++) {
        // Begin loop for rows
        for ( int j = 0; j < rows; j++) {
          int x = i*cellsize + cellsize/2;  // x position
          int y = j*cellsize + cellsize/2;  // y position
          int loc = x + y*img.width;  // Pixel array location
          color c = img.pixels[loc];  // Grab the color
          // Calculate a z position as a function of mouseX and pixel brightness
          float z = (mouseX / float(width)) * brightness(img2.pixels[loc]) - 20.0; // use it
          // Translate to the location, set fill and stroke, and draw the rect
        }
     {
       stroke(255);   // white
          color myColorWhite = color(255);  // white
          if (img.pixels[loc] == myColorWhite)  // Grab the color
          line (x + 200, y + 100, z , x,y,0); // that you need to figure out
          }

      }
    }



I've uploaded the old code to www.openprocessing.org:

http://www.openprocessing.org/sketch/66366

but it works with only 2 images there.

Thanks a lot
if you have a chance to have a look it would be wonderful. x


Hello,

I'm sorry, I'm on a Journey now and can't reply.

You're right, the if clause must refer to img3 , sorry for that.

Sorry, I can't be of much help, I don't have processing here.

Greetings, Chrisir


Hi Chrisir,

You've helped me so much already, thanks a lot x

If you will be able to have a look after you come back I'll be very very gratefull
I'll try to sor it out myself until than
I'll publish here if there will be any success
(I will wait for you anyway)

Have a lovely lovely holiday!
Thank you very much for all your help,
Ollena x

Hi Ollena,

nice to hear from you!

I'm still on holiday, but I will come back to you if I'll be back.

Anyway in theory the thing is clear: check one picture, the other picture and IF the 3rd is white paint a line.

Greetings, Chrisir


Thanks again, Chrisir,

Hope to 'see' back,
but no matter what, good luck to you wherever you are!

Very greatful,
Ollena x

hi!

I'm back from the journey.

There are a few difficulties:

1.
The image

The image (especially image number 3) has difficulties.
The image is not only black and white, but has a lot of colors.
Therefore our if-line
Copy code
  1.       if (img3.pixels[loc] == myColorWhite) {  
doesn't work.
Why is it not only black and white?
That might be
  • because it's saved as jpg- (not bmp-) file. Please try save as bmp.
  • because each cell has a frame. Please remove that (or make the rects little bigger in the program that generates the image 3.
  • Make sure it uses really white and black (color (255) or color(0)).

2.
The Scan

When you scan the image with the if-line above, the point you scan (x,y or loc) is sometimes within a cell, sometimes twice within the same cell or sometimes on the frame (border) of one cell. See image here. The green dots denote the place where the image is scanned (x,y or loc) :



So your formula
Copy code
  1.       int x = i*cellsize + cellsize/2;  // x position
  2.       int y = j*cellsize + cellsize/2;  // y position
is not so good for the images at hand (or image 3).


Apart from those bitter facts (or my interpretation which might be wrong), I made a version (see P.S.)
that delivers some nice output (but is of course not a good representation of image 3).




Please ask if you have questions, so we can continue working on it.
When you generate a new version of image 3 test it with it or send it to me.


Greetings, Chrisir   


Copy code
  1. /* OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/66366*@*        */
  2. /* !do not delete the line above, required for linking your tweak if you re-upload */
  3. PImage img1;      
  4. PImage img2;
  5. PImage img3;
  6. //
  7. int cellsize = 2; // Dimensions of each cell in the grid
  8. int columns, rows;   // Number of columns and rows in our system
  9. //
  10. color myColorWhite = color(255);  // save white color 
  11. color myColorBlack = color(0);  // save black color 
  12. void setup() {
  13.   size(750, 500, P3D);
  14.   img1 = loadImage("img1.jpg");  // Load the image
  15.   img2 = loadImage("img2.jpg"); // load it
  16.   img3 = loadImage("img3.jpg"); // load it
  17.   //
  18.   img1.loadPixels();
  19.   img2.loadPixels();
  20.   img3.loadPixels();
  21.   //
  22.   println("image data:");
  23.   print("img1: " + img1.width+ " x ");
  24.   println(img1.height);
  25.   print("img2: " + img2.width+ " x ");
  26.   println(img2.height); 
  27.   print("img3: " + img3.width+ " x ");
  28.   println(img3.height);
  29.   //
  30.   columns = img1.width / cellsize;  // Calculate # of columns
  31.   rows = img1.height / cellsize;  // Calculate # of rows
  32.   // frameRate(1);
  33.   // noLoop();
  34. } // func
  35. void draw() {
  36.   background(0);
  37.   ///
  38.   // Begin loop for columns
  39.   for ( int i = 0; i < columns; i++) {
  40.     // Begin loop for rows
  41.     for ( int j = 0; j < rows; j++) {
  42.       //
  43.       // do some calculations ************************
  44.       int x = i*cellsize + cellsize/2;  // x position
  45.       int y = j*cellsize + cellsize/2;  // y position
  46.       int loc = x + y*img1.width;  // Pixel array location
  47.       color c = img1.pixels[loc];  // Grab the color
  48.       // Calculate a z position as a function of mouseX and pixel brightness (in img2)
  49.       float z = (mouseX / float(width)) * brightness(img2.pixels[loc]) - 20.0; // use it
  50.       //
  51.       // Draw the lines ****************************
  52.       // Grab the color & compare to white
  53.       if (img3.pixels[loc] == myColorWhite) {  
  54.         // if white:
  55.         stroke(myColorWhite);  // set to white
  56.         // line (x + 200, y + 100, -20, x + 200, y + 100, 20 ); // draw a line       
  57.         line (x + 200, y + 100, -20, x + 200, y + 100, z ); // draw a line
  58.       } // if     
  59.       else if (img3.pixels[loc] == myColorBlack) {
  60.         // do nothing
  61.       }
  62.       else
  63.       {
  64.         // do nothing
  65.       }
  66.       //
  67.       // Draw the rects ****************************
  68.       // Translate to the location, set fill and stroke, and draw the rect
  69.       pushMatrix();
  70.       translate(x + 200, y + 100, z);
  71.       fill(c, 204);
  72.       noStroke();
  73.       rectMode(CENTER);
  74.       rect(0, 0, cellsize, cellsize);
  75.       popMatrix();
  76.     } // for
  77.   } // for
  78. } // func draw
  79. //


Glad glag glag that you are back, Chrisir.

This is incredible! It works so cool, Chrisir.

I'm so so grateful, I can't express.

Now I'm trying to figure out how you did it :) It's amazing.

I do have questions, if you don't mind

Regarding this scan with if-line:
how can I find out from your beautiful code, where these if-dots are positioned.
For example if my 3 images are 78 x 78 cells with each cell=4 can I put these if dots into the center of each cell?

Thanks for your advice regarding the image3 colour, I've changed that, so I have it as a bmp file with pure colour white.
By some reason I can't attach it to my message here. I'll email it to you ;)

Many thanks Chrisir,
you are a legend!
xxx


Thank you!

I'll have a look!




hey, ollena,

I looked further into it.

Thanks for making a bmp-file from image3 !

But I still think we have to get rid of the border around each cell in image3.
Can you remake image 3 without the border? So that each cell directly touches the next cell?

Also I think, the cells in image 3 are wider than 2 pixels. At least 5.
So you need to change the cellSize in your code (or re-make image3 so that it has smaller cells with width 2).


So, I hope you still are willing to go for it!

Greetings, Chrisir 



Hi Crisir,

thanks a lot!

I've emailed you image 3 without the black stroke. as for the cells size, I can't make them smaller because they should be the same size as 2 other images.

Maybe I got it wrong but if there are no stroke we don't really have cells as such in image3  - just shapes of white and black. so I don't really get why the cells should be smaller, unless the frequency of 'if-pattern' for the 'growing' lines is higher??? can you please explain?

Many thanks
Ollena xxx


hi!

thanks for the new bmp of img3.
I just made a quick scan pixel by pixel and
we still have other colors than black and white.
See protocol of the upper left corner below in the P.S..
Maybe you can use brightness() to catch the other (unknown) colors
so only black and white is recognized by the program.

To your question to the cell size: You are absolutely right, the cell size must
be the same in all 3 images. Also I would advise to use image3 with the borders
as you had before.

I was just thinking (if I am not mistaken) that the points you are scanning (x,y or loc) do not alway
hit the middle of a cell as they should be. This could be because of the border of each cell.
Let's assume you have all cells with borders. Then the 1st upper line of the screen is all
border as is the 1st line (pixel column) left on the screen. Then comes the 1st cell with width 2.
Center of the 1st cell? With width 2 there isn't really a center, only corners. Doesn't matter.
Upper left corner of 1st cell: x:1,y:1 when counting starts at 0,0.
Then comes a border again.
Then 2nd cell with 2x2 size.
Upper left corner of 2nd cell: x:4,y:1 when counting starts at 0,0.
Upper left corner of 3rd cell: x:7,y:1 when counting starts at 0,0.
Your formula
Copy code
  1.       int x = i*cellsize + cellsize/2;  // x position
  2.       int y = j*cellsize + cellsize/2;  // y position
must reflect this and give the right results.
Maybe you need just
cellSize=3 and
Copy code
  1.       int x = i*cellsize + 1;  // x position
  2.       int y = j*cellsize + 1;  // y position

That's a diagram of the image3 to clarify this (with b=border, c=cell):
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
b ccbccbccbcc
b ccbccbccbcc
b bbbbbbbbbb
b ccbccbccbcc
b ccbccbccbcc


I hope, I don't confuse you too much.


Greetings, Chrisir 


image data:
   img1: 311 x 310
   img2: 311 x 310
   img3: 311 x 311

0, 0 black
1, 0 black
2, 0 black
3, 0 black
4, 0 black
5, 0 black
6, 0 black
7, 0 black
8, 0 black
9, 0 black
10, 0 black
11, 0 black
12, 0 black
13, 0 black
14, 0 black
15, 0 black
16, 0 black
17, 0 black
18, 0 black
19, 0 black
20, 0 black
21, 0 black
22, 0 black
23, 0 black
24, 0 black
25, 0 black
26, 0 black
27, 0 black
28, 0 black
29, 0 black
30, 0 black
31, 0 black
32, 0 black
33, 0 black
34, 0 black
35, 0 black
36, 0 black
37, 0 black
38, 0 black
39, 0 black
40, 0 black
41, 0 black
42, 0 black
43, 0 black
44, 0 black
45, 0 black
46, 0 black
47, 0 black
48, 0 black
49, 0 black
0, 1 black
1, 1 black
2, 1 black
3, 1 black
4, 1 black
5, 1 black
6, 1 black
7, 1 black
8, 1 black
9, 1 black
10, 1 black
11, 1 black
12, 1 black
13, 1 black
14, 1 black
15, 1 black
16, 1 black
17, 1 black
18, 1 black
19, 1 black
20, 1 black
21, 1 black
22, 1 black
23, 1 black
24, 1 black
25, 1 black
26, 1 black
27, 1 black
28, 1 black
29, 1 black
30, 1 black
31, 1 black
32, 1 black
33, 1 black
34, 1 black
35, 1 black
36, 1 black
37, 1 black
38, 1 black
39, 1 black
40, 1 black
41, 1 black
42, 1 black
43, 1 black
44, 1 black
45, 1 black
46, 1 black
47, 1 black
48, 1 black
49, 1 black
0, 2 black
1, 2 black
2, 2 black
3, 2 black
4, 2 black
5, 2 black
6, 2 black
7, 2 black
8, 2 black
9, 2 black
10, 2 black
11, 2 black
12, 2 black
13, 2 black
14, 2 black
15, 2 black
16, 2 black
17, 2 black
18, 2 black
19, 2 black
20, 2 black
21, 2 black
22, 2 black
23, 2 black
24, 2 black
25, 2 black
26, 2 black
27, 2 black
28, 2 black
29, 2 black
30, 2 black
31, 2 black
32, 2 black
33, 2 black
34, 2 black
35, 2 black
36, 2 black
37, 2 black
38, 2 black
39, 2 black
40, 2 black
41, 2 black
42, 2 black
43, 2 black
44, 2 black
45, 2 black
46, 2 black
47, 2 black
48, 2 black
49, 2 black
0, 3 other
1, 3 other
2, 3 other
3, 3 other
4, 3 other
5, 3 other
6, 3 other
7, 3 other
8, 3 black
9, 3 black
10, 3 black
11, 3 black
12, 3 black
13, 3 black
14, 3 black
15, 3 black
16, 3 black
17, 3 black
18, 3 black
19, 3 black
20, 3 other
21, 3 other
22, 3 other
23, 3 other
24, 3 other
25, 3 other
26, 3 other
27, 3 other
28, 3 black
29, 3 black
30, 3 black
31, 3 black
32, 3 black
33, 3 black
34, 3 black
35, 3 black
36, 3 black
37, 3 black
38, 3 black
39, 3 black
40, 3 black
41, 3 black
42, 3 black
43, 3 black
44, 3 black
45, 3 black
46, 3 black
47, 3 black
48, 3 black
49, 3 black
0, 4 other
1, 4 other
2, 4 other
3, 4 other
4, 4 other
5, 4 other
6, 4 other
7, 4 other
8, 4 other
9, 4 black
10, 4 black
11, 4 black
12, 4 black
13, 4 black
14, 4 black
15, 4 black
16, 4 black
17, 4 black
18, 4 black
19, 4 other
20, 4 other
21, 4 other
22, 4 other
23, 4 other
24, 4 other
25, 4 other
26, 4 other
27, 4 other
28, 4 other
29, 4 black
30, 4 black
31, 4 black
32, 4 black
33, 4 black
34, 4 black
35, 4 black
36, 4 black
37, 4 black
38, 4 black
39, 4 black
40, 4 black
41, 4 black
42, 4 black
43, 4 black
44, 4 black
45, 4 black
46, 4 black
47, 4 black
48, 4 black
49, 4 black
0, 5 white
1, 5 white
2, 5 white
3, 5 white
4, 5 white
5, 5 white
6, 5 white
7, 5 other
8, 5 other
9, 5 black
10, 5 black
11, 5 black
12, 5 black
13, 5 black
14, 5 black
15, 5 black
16, 5 black
17, 5 black
18, 5 black
19, 5 other
20, 5 other
21, 5 white
22, 5 white
23, 5 white
24, 5 white
25, 5 white
26, 5 white
27, 5 other
28, 5 other
29, 5 black
30, 5 black
31, 5 black
32, 5 black
33, 5 black
34, 5 black
35, 5 black
36, 5 black
37, 5 black
38, 5 black
39, 5 black
40, 5 black
41, 5 black
42, 5 black
43, 5 black
44, 5 black
45, 5 black
46, 5 black
47, 5 black
48, 5 black
49, 5 black
0, 6 white
1, 6 white
2, 6 white
3, 6 white
4, 6 white
5, 6 white
6, 6 white
7, 6 other
8, 6 other
9, 6 black
10, 6 black
11, 6 black
12, 6 black
13, 6 black
14, 6 black
15, 6 black
16, 6 black
17, 6 black
18, 6 black
19, 6 other
20, 6 other
21, 6 white
22, 6 white
23, 6 white
24, 6 white
25, 6 white
26, 6 white
27, 6 other
28, 6 other
29, 6 black
30, 6 black
31, 6 black
32, 6 black
33, 6 black
34, 6 black
35, 6 black
36, 6 black
37, 6 black
38, 6 black
39, 6 black
40, 6 black
41, 6 black
42, 6 black
43, 6 black
44, 6 black
45, 6 black
46, 6 black
47, 6 black
48, 6 black
49, 6 black
0, 7 white
1, 7 white
2, 7 white
3, 7 white
4, 7 white
5, 7 white
6, 7 white
7, 7 other
8, 7 other
9, 7 other
10, 7 other
11, 7 other
12, 7 other
13, 7 other
14, 7 other
15, 7 other
16, 7 other
17, 7 other
18, 7 other
19, 7 other
20, 7 other
21, 7 white
22, 7 white
23, 7 white
24, 7 white
25, 7 white
26, 7 white
27, 7 other
28, 7 other
29, 7 other
30, 7 other
31, 7 other
32, 7 other
33, 7 other
34, 7 other
35, 7 other
36, 7 other
37, 7 other
38, 7 other
39, 7 other
40, 7 other
41, 7 other
42, 7 other
43, 7 other
44, 7 other
45, 7 other
46, 7 other
47, 7 other
48, 7 other
49, 7 other
0, 8 white
1, 8 white
2, 8 white
3, 8 white
4, 8 white
5, 8 white
6, 8 white
7, 8 other
8, 8 other
9, 8 other
10, 8 other
11, 8 other
12, 8 other
13, 8 other
14, 8 other
15, 8 other
16, 8 other
17, 8 other
18, 8 other
19, 8 other
20, 8 other
21, 8 white
22, 8 white
23, 8 white
24, 8 white
25, 8 white
26, 8 white
27, 8 other
28, 8 other
29, 8 other
30, 8 other
31, 8 other
32, 8 other
33, 8 other
34, 8 other
35, 8 other
36, 8 other
37, 8 other
38, 8 other
39, 8 other
40, 8 other
41, 8 other
42, 8 other
43, 8 other
44, 8 other
45, 8 other
46, 8 other
47, 8 other
48, 8 other
49, 8 other
0, 9 white
1, 9 white
2, 9 white
3, 9 white
4, 9 white
5, 9 white
6, 9 white
7, 9 white
8, 9 white
9, 9 white
10, 9 white
11, 9 white
12, 9 white
13, 9 white
14, 9 white
15, 9 white
16, 9 white
17, 9 white
18, 9 white
19, 9 white
20, 9 white
21, 9 white
22, 9 white
23, 9 white
24, 9 white
25, 9 white
26, 9 white
27, 9 white
28, 9 white
29, 9 white
30, 9 white
31, 9 white
32, 9 white
33, 9 white
34, 9 white
35, 9 white
36, 9 white
37, 9 white
38, 9 white
39, 9 white
40, 9 white
41, 9 white
42, 9 white
43, 9 white
44, 9 white
45, 9 white
46, 9 white
47, 9 white
48, 9 white
49, 9 white
End --------------

Hooray, Success!
I finally get it! Thanks Chrisir for your detailed explanation
I understand now how the cells size and the position of the center of the cell is calculated:
Copy code
  1. int cellsize = 2;
Copy code
  1. int x = i*cellsize + cellsize/2;
  2. int y = j*cellsize + cellsize/2;
So What I'm doing now is fixing my 3 images so that their cells are exactly the same size and position, then it should perfectly match. as for the cell size of image 3 it's been created originally cell size 4.

so i'm just changing the code and it looks like it's perfectly in the center now

Copy code
  1. int cellsize = 4;
Copy code
  1. int x = i*cellsize + cellsize/4;
  2. int y = j*cellsize + cellsize/4;
can you please explane what's going on with the color of image 1 now? I really like how it looks, but i don't know what exactly is happening. it looks like it averages the colour, doesn't it?

Thanks again dear Chrisir,
You are opening the whole new world for me. xxx
 


hello,

you wrote:


can you please explain what's going on with the color of image 1 now?

I am not sure if I understand the question.
Do you mean in the generating of image1 or in the usage of image 1 in this program here?

in the generating of image1

You are saving as jpg. jpg is a image format that compresses images to save disc space. But therefore the colors are changed (it's a compression method with losses). Better use the type BMP for all three images. There you don't have losses or changes (I hope).


in the usage of image 1 in this program here

You grab the color of image 1 here:
Copy code
  1.   color c = img1.pixels[loc];  // Grab the color

You then use c for the color of the rects which are flying out of the image when you move the mouse:
Copy code
  1.       fill(c, 204);

in line 71.

Image 1 is not used for the white lines that come out of the image like rays though.
They are only derived from image 2 & 3.
You could color the lines of cours using stroke(c); in line 55.

Does this answer your question?

Greetings, Chrisir  

Hi Chrisir,

yes, it does perfectly answer my question


in the usage of image 1 in this program here

You grab the color of image 1 here:
Copy code
Copy code
  1.   color c = img1.pixels[loc];  // Grab the color

You then use c for the color of the rects which are flying out of the image when you move the mouse:
Copy code
Copy code
  1.       fill(c, 204);

in line 71.

Thanks a lot!

also Chrisir, stroke(c) looks fantastic, thanks for this brilliant idea!!!
You are amazing as always xxx