coverrt 1D image array to 2d arrays

Ash160195

hi, I have this program which displays images in an array, but I need to convert them into a 2D array. This is for loading a single array, i need to create a 2d array of images at the same place, so i have two arrays of two different sets of images, that i need to display at the same place. PImage [][] movEyes1 = new PImage[24] [17] ;/ how can i create this into a 2d array? Will something like this work

`` for (int i=0; i< movEyes1.length; i++)`

    for (int j=0; i< movEyes1.length; i++) 

  {
    PImage img = loadImage( i +"h.jpg","c.jpg");// rebecca
    PImage img1 = loadImage( j+"c.jpg");// rebecca

    movEyes1[i] [j] = img.get(130, 170, 310, 100); //Get a portion of the loaded image with displaying it

  }``

in setup and then in draw i write

`// have to make 2d arrays, for mov, with three arrays to call at random

 int idx = (int)map(mouseX, 0, 2*width, 0.0, movEyes1.length -1);
  image(movEyes1[i], 0, 0, movEyes1[idx].width, movEyes1[idx].height -1);
  `

Can someone help? Thanks

Chrisir

You might want to format your code

Select, hit ctrl-o

In the 2nd for-loop you want to use only j (and not a mix of j and i)

also j<movEyes[i].length

Now you load 2 images but you use only 1 ...?

Ash160195

     for (int i=0; i< movEyes1.length; i++) 
       for (int j=0; j< movEyes1.length; j++) 

      {
        PImage img = loadImage( i +"h.jpg","c.jpg");// rebecca
        PImage img1 = loadImage( j+"c.jpg");// rebecca

        movEyes1[i] [j] = img.get(130, 170, 310, 100); //Get a portion of the loaded image with displaying it

      }

Ah sorry, stupid error, I am confused on what to put in the draw function?

int idx = (int)map(mouseX, 0, 2*width, 0.0, movEyes1.length -1);
 image(movEyes1[idx], 0, 0, movEyes1[idx].width, movEyes1[idx].height -1);
 `

Is for a single array, I want the same for both arrays . I want to draw both arrays one after the other, looped ? how would i do that?

thanks!

Chrisir

Hm..... not sure why you need a 2D Array at all

Anyway, you can just use mouseY and apply it to idy (the way you do now for idx)

then use idx and idy together to access one image in the 2D array

Ash160195

i get an error which says the global variable width doesn't exist? which is weird because int idx = (int)map(mouseX, 0, 2*width, 0.0, mEyes1.length -1); image(mEyes1[idx], 0, 0, mEyes1[idx].width, mEyes1[idx].height -1);

There are two separate arrays with a set of images in each. I want to call one array after the other. So it cycles through one array and then jumps to the other.

thanks!

Chrisir

Are we still talking 2D arrays? Because they are not separated

Chrisir

Why

  2 *

Chrisir

mEyes1[idx][idy].width

Chrisir

I guess that's the width that's causing the error - because you try to access a 2D arrray as if it were 1D....

Ash160195

Oh it works, but displays only one image. I think declaring PImage [][] movEyes1 = new PImage[24] [17] ;/is wrong?

because I assume this is a matrice? Because the values I put in are the number of images I have in that array?

Chrisir

No this line is ok

If you have 24*17 images

Chrisir

But as I said your loading process is a bit surprising

Try to println idx and idy if they come out right

Ash160195

The values are 0, because its only displaying one image. I'm sorry, I am new at this so I might be very wrong. I need it to cycle through the 1st array with 24 images, then the second array with 17 images. One after another, in the same position.

Chrisir

Atm you are using the mouse pos

When you want to use automatic switch from image to image like in a Grid (showing one image at a time) :

increase idx by 1 in draw() until 24 is reached then say idy++; and idx=0;

This is like when you read you start a new line

Repeat while idy<17

etc.

there is a Tutorial on 2D arrays. A 2D array is a grid (like a Game of chess board)

You have 24 x 17 images!!!!!! So over 300 images

Not 2 arrays with 24 + 17 images. As you said.

You need to get the difference.

A grid with the sides 24 and 17 long.

(You can make a 2D array with only 2 rows, the first 24 long and the second 17 but thats different from what you have now)

Chrisir

//VARIABLES

// size of the grid (x * y) 
int npointsX=24;
int npointsY=17;

// the grid (2D array)
CPoint[][] cpoints=new CPoint[npointsX+1][npointsY+1];

// --------------------------------------------

void setup()
{
  size(1170, 890);

  float cdiam=39; // diameter
  color ccolor=color(255, 255, 255); // White 

  // screen coordinates 
  float xcoord=0;
  float ycoord=0;

  // init the grid 
  for (int j=0; j<npointsY; j++)
  {  
    for (int i=0; i<npointsX; i++)
    {
      xcoord=i*40+11;
      ycoord=j*40+11;
      cpoints[i][j]=new CPoint(xcoord, ycoord, 
        cdiam, 
        ccolor, 
        i+":"+j);
    }//for
  }//for
} // func setup()

void draw() {
  background(0);

  // display the grid 
  for (int j=0; j<npointsY; j++)
  {
    for (int i=0; i<npointsX; i++)
    {
      cpoints[i][j].display();
    }//for
  }// for 

  // show the text on the right  
  fill(255, 2, 2);
  text("grid", width-120, 40);
} // func draw() 

//Point Class =============================

class CPoint
{  
  //VARIABLES
  float x, y;
  float diameter;
  color pcolor;
  String text; 

  //CONSTRUCTOR
  CPoint(float CPx, float CPy, 
    float CPdiam, 
    color CPcolor, 
    String CPtext)
  {
    x=CPx;
    y=CPy;

    diameter = CPdiam;
    pcolor   = CPcolor;

    text = CPtext;
  }

  //DISPLAYING FUNCTION
  void display()
  {
    pushMatrix();
    translate(x, y);
    noStroke();
    fill(pcolor);
    rect(0, 0, diameter, diameter);
    fill(111);
    text(text, 4, 12);
    popMatrix();
  }
}// class
// ================================================

Chrisir

that is a typical GRID example

it has no images but just shows how to display a grid (or what it is)

Chrisir

//VARIABLES

// size of the grid (x * y) 
int npointsX=24;
int npointsY=17;

// the grid (2D array)
CPoint[][] cpoints=new CPoint[npointsX+1][npointsY+1];

// --------------------------------------------

void setup()
{
  size(1170, 890);

  float cdiam=39; // diameter
  color ccolor=color(255, 255, 255); // White 

  // screen coordinates 
  float xcoord=0;
  float ycoord=0;

  // init the grid 
  for (int j=0; j<npointsY; j++)
  {  
    for (int i=0; i<npointsX; i++)
    {
      xcoord=i*40+11;
      ycoord=j*40+11;
      cpoints[i][j]=new CPoint(xcoord, ycoord, 
        cdiam, 
        ccolor, 
        i+":"+j);
    }//for
  }//for
  frameRate(2);
} // func setup()

int i, j;

void draw() {
  background(0);

  // display the grid 
  cpoints[i][j].display();


  i++; 
  if (i>=npointsX) {
    i=0; 
    j++;
  }


  // show the text on the right  
  fill(255, 2, 2);
  text("grid", width-120, 40);
} // func draw() 

//Point Class =============================

class CPoint
{  
  //VARIABLES
  float x, y;
  float diameter;
  color pcolor;
  String text; 

  //CONSTRUCTOR
  CPoint(float CPx, float CPy, 
    float CPdiam, 
    color CPcolor, 
    String CPtext)
  {
    x=CPx;
    y=CPy;

    diameter = CPdiam;
    pcolor   = CPcolor;

    text = CPtext;
  }

  //DISPLAYING FUNCTION
  void display()
  {
    pushMatrix();
    translate(222, 222); // x,y 
    noStroke();
    fill(pcolor);
    rect(0, 0, diameter, diameter);
    fill(111);
    text(text, 4, 12);
    popMatrix();
  }
}// class
// ================================================

Chrisir

above a grid which automatically shows the 24*17 elements one after another

Chrisir

//VARIABLES


// size of the grid (x * y) 
int npointsX=2;
// int npointsY=17;

// the grid (2D array)
CPoint[][] cpoints = new CPoint[npointsX][0];

// --------------------------------------------

void setup()
{
  size(1170, 890);

  cpoints[0]=new CPoint[17];
  cpoints[1]=new CPoint[24];


  float cdiam=39; // diameter
  color ccolor=color(255, 255, 255); // White 

  // screen coordinates 
  float xcoord=0;
  float ycoord=0;

  // init the grid 
  for (int j=0; j<npointsX; j++)
  {  
    for (int i=0; i<cpoints[j].length; i++)
    {
      xcoord=i*40+11;
      ycoord=j*40+11;
      cpoints[j][i]=new CPoint(xcoord, ycoord, 
        cdiam, 
        ccolor, 
        j+":"+i);
    }//for
  }//for
} // func setup()

void draw() {
  background(0);

  // display the grid 
  for (int j=0; j<npointsX; j++)
  {
    for (int i=0; i<cpoints[j].length; i++)
    {
      cpoints[j][i].display();
    }//for
  }// for 

  // show the text on the right  
  fill(255, 2, 2);
  text("2 Arrays in an array", width-120, 40);
} // func draw() 

//Point Class =============================

class CPoint
{  
  //VARIABLES
  float x, y;
  float diameter;
  color pcolor;
  String text; 

  //CONSTRUCTOR
  CPoint(float CPx, float CPy, 
    float CPdiam, 
    color CPcolor, 
    String CPtext)
  {
    x=CPx;
    y=CPy;

    diameter = CPdiam;
    pcolor   = CPcolor;

    text = CPtext;
  }

  //DISPLAYING FUNCTION
  void display()
  {
    pushMatrix();
    translate(x, y);
    noStroke();
    fill(pcolor);
    rect(0, 0, diameter, diameter);
    fill(111);
    text(text, 4, 12);
    popMatrix();
  }
}// class
// ==================================================

Chrisir

this shows an array that contains 2 arrays of different length

(it's a 2D array but not in the common sense (which would be a full grid))

Ash160195

PImage[] mEyes= new PImage[31];
int frameNum=0;
void setup() {
 size(620, 400); 
  //fullScreen();
  frameRate(60);
  smooth();

  for (int i=0; i< 23; i++) 
  {
    PImage img = loadImage( i +"h.jpg");// rebecca
    mEyes[i] = img.get(130, 170, 310, 100); //Get a portion of the loaded image with displaying it

  }
   for (int i=0; i< 8; i++) 
  {
    PImage img = loadImage( i +"j.jpg");// johnathan
    mEyes[i+23] = img.get(120, 170, 310, 100); //Get a portion of the loaded image with displaying it
  }  
    frameNum %= mEyes.length;

}
void draw() {

  frameNum++;
  frameNum %= mEyes.length; 
  System.out.printf("%d", frameNum);
  for (int i=0; i< mEyes.length; i++) {
    image(mEyes[frameNum], 0, 0, mEyes[frameNum].width, mEyes[frameNum].height -1);
    }
}

Right so I kind of solved it, so array is compiled into one and i just call it in setup. And i added frameNum, to loop it. I actually have images which are gifs and i wanted to display them one after the other. You were right, i had to remove mouse . Thank you so MUCH!

Chrisir

Not sure the for loop in draw is needed!