How to Resize images in a String and/or an Array and for images to stop glitching

Frostbite180

Hey everyone. I am new to processing and new to this website. I'm working on a project with the end goal of being a dress-up game but right now I am just testing out some code to make sure whether or not I can actually code it. I did find some code that is useful but I am experiencing some problems with it and I was hoping someone could point me in the right direction. My problem is that I cannot resize the images I am using within my sketch. I've played around with various numbers in my code but just can't seem to change anything. The images appear as squished tiny things but I would like them to be bigger (so I can actually see what they are :) ). My other problem is that when one image drags over another one, they glitch and will 'jump' away from one another. If this cannot be fixed, it's fine but some more information as to why that is happening would be most kind.

For the most part, I do understand what it happening. I just want to know these few things will not work and how to fix them. Thank you in advance!

I've used the following examples to help me out so far:

https://forum.processing.org/two/discussion/4229/help-with-dragging-and-dropping-multiple-images-in-an-array https://processing.org/discourse/beta/num_1256052533.html

My code is as follows:

String[] images = {
  "Sprite.png", "Sprite2.png", "Sprite3.png"
};

float[] positions =new float [images.length*2] ;

// 0,1,2,3,4,5
// 4,5,6,7,8,9
float bx;
float by;
int bs = 40;
int bz = 30;
boolean bover = false;
boolean locked = false;
float bdifx = 0.0; 
float bdify = 0.0; 
PImage[] image1 = new PImage [images.length]; 
float newx, newy;
int whichImage;

void setup() 
{
  imageMode (CENTER);
  size(600, 400);
  bx = width/2.0;
  by = height/2.0;

  for (int i=0; i < images.length; i++) {
    image1 [i]= loadImage(images[i]); //loads in the images
   // image (image1[i], random(width), random(height), 50, 50) ;
  } 

  for (int j=0; j < images.length*2; j+=2) { //Positions for Images
    positions[j]= random(100);
    positions[j+1]= random(100);
  }
}

void draw() 
{ 
  background(255);
  // Test if the cursor is over the box 
  for (int i=0; i < images.length; i++) {
    if (mouseX > positions[i*2]-bs && mouseX < positions[i*2]+bs && 
      mouseY > positions[i*2+1]-bs && mouseY < positions[i*2+1]+bs) 
    {
      println ("mouseover image: "+i);
      whichImage=i;

      bover = true;  
      if (!locked) 
      { 
        stroke(255); 
        fill(153);
      }
      break;
    } 
    else
    {
      stroke(153);
      fill(153);
      bover = false;
    }
  }
  for (int j=0; j < images.length; j++) {
    image (image1[j], positions[j*2], positions[j*2+1], 50, 50) ;
  }
}
void mousePressed() {
  if (bover) { 
    locked = true;
  } 
  else {
    locked = false;
  }
}
void mouseReleased() {
  locked = false;
}
void mouseDragged() {
  if (locked) {
    newx = mouseX; 
    newy = mouseY;
  } 
  positions [whichImage*2] = newx;
  positions [(whichImage*2)+1] = newy;
}

jeremydouglass

The images appear as squished tiny things but I would like them to be bigger

To solve this, look at your line 66:

 image (image1[j], positions[j*2], positions[j*2+1], 50, 50) ;

Here is where you display a PImage from the image1[] list using the image() command. Look at the reference for the command:

• image() reference page

As you can see from the list of arguments:

image( img, x, y, width, height )

...in your code, you say that you wanted the image to be 50 pixels wide, 50 pixels tall. So it does what you told it to do!

GoToLoop

If all your images are gonna be 50x50, why not resize() them right off the bat?
https://Processing.org/reference/PImage_resize_.html

( image1[i]= loadImage(images[i]) ).resize(50, 50);

jeremydouglass

@GoToLoop --

The images appear as squished tiny things but I would like them to be bigger

I thought the point was that @Frostbite180 doesn't wan't them to be resized... so original size?

image (image1[j], positions[j*2], positions[j*2+1]) ;