5 İmages in Circles

blackday

Hi, I have 6 different images with different sizes, one of them will be background image and the other ones will be placed to screen randomly within circles. Circle sizes and sizes of 5 images will be same also. And this circles wont overlap eachother.

Please see this image:

Could you please help me, which methods, codes should i use?

PhiLho

"I can't handle it."
Might help to indicate what is blocking you. We prefer not to give canned solutions to what appears to be homework...
Have you read the tutorials? Some of them explain how to use loadImage() and image(), among other things.

blackday

Oh sorry for missunderstanding my english is not good actually. İ know codes what u mean.

But i am having trouble images in circle. I can post them in square without any mask. But i cant post them in circles.

I wrote a sample code here:

PImage[] imgs = new PImage[5];
PImage back;
int a=0;
int i=0;

void setup() {
  noStroke();
  size(500, 300);
  imageMode(CORNER);
  back =loadImage("http://webdesignandsuch.com/posts/stainless/2.jpg");
  image(back,0,0);

  }



void draw() {

  imageMode(CENTER);
  rectMode(CENTER);
  if(a<3){
  float x = random(0,500);
  float y= random(0,300);
  imgs[i] = loadImage( i + ".png" );  
  rect(x,y,30,30);
  image(imgs[i], x, y, 25, 25);

  }

  a++;
  i++;
}

GoToLoop

You should take a peek @ mask() method:
http://processing.org/reference/PImage_mask_.html

blackday

i tried that. but i hhave difference size pics, i get "mask can only used with an image thats the sime size" message. how can i make them same size? i resize images in the program

GoToLoop

Use createGraphics() to instantiate a PGraphics w/ same width & height as your image. *-:)
In there, draw an ellipse() as your mask. W/ some effort, I expect it's gonna work! =:)

blackday

I am using it also, i see some part of images in circles.

PImage[] imgs = new PImage[5];
PImage back;
PGraphics mask1;
int a=0;
int i=0;
PImage maskImage;

void setup() {
  noStroke();
  size(500, 300);
  imageMode(CORNER);
  back =loadImage("http://webdesignandsuch.com/posts/stainless/2.jpg");
  image(back,0,0);

  }



void draw() {

  imageMode(CENTER);
  rectMode(CENTER);
  if(a<3){
  float x = random(0,500);
  float y= random(0,300);
   //rect(x,y,30,30);
 imgs[i] = loadImage( i + ".png" );  
  mask1 = createGraphics(imgs[i].width, imgs[i].height, JAVA2D);
  mask1.beginDraw();
  // Erase graphics
  mask1.background(0);
  mask1.fill(255);
  mask1.noStroke();
  mask1.ellipse(x, y,imgs[i].width, imgs[i].height);
  mask1.stroke(128);
  mask1.strokeWeight(5);
  mask1.endDraw();
  //image(imgs[i], x, y, 25, 25);
  // Copy the original image (kept as reference)
  maskImage = imgs[i].get();
  // Apply the mask
  maskImage.mask(mask1);
  // Display the result
  image(maskImage, x, y, 50,50);
  }

  a++;
  i++;
}

blackday

Hi guys, What is wrong with these codes?

PhiLho

mask1.ellipse(x, y,imgs[i].width, imgs[i].height);

Replace x, y, with 0, 0, the variables are used when drawing the result, not when creating the mask.

blackday

If i use 0,0 instead of x,y at this time quarter circles are displayed.

koogs

ok, first off, don't call loadImage() inside draw() - it's inefficient to read the file every loop. read them once in setup()

the quarter circles things looks like a ellipseMode() problem. read the reference and try some of the alternatives.