Loading images within an Ellipse

dcbvoice

Hello,

I have a very beginner question- I use processing mostly to create visual collages, nothing too complicated. Currently, I'm working with a code to generate images selected at random to the canvas. What I would like to do, is have the images only load within the invisible boundaries of an ellipse. Say my canvas is 500px by 500px- well I would like to draw images only within the boundaries of an ellipse that has the coordinates (250, 250) and a radius of 100px. Thanks for any help.

adrock42

the pixelwise version I have come up with uses the pixel array

draw a pgraphics object with a white background and black circle and call it mask

PGraphics mask;
void setup(){
  size(500,500);
  img=loadImage("XXX.jpg");
  background(200);
  mask=createGraphics(width,height);//draw the mask object
  mask.beginDraw();
  mask.smooth();//this really does nothing, i wish it did
  mask.background(255);//background color to target
  mask.fill(0);
  mask.ellipse(width/2,height/2,200,200);
  mask.endDraw();


  mask.loadPixels();
  img.loadPixels();

  for(int i=0;i<mask.pixels.length;i++){
    //if white, change the color of the image to back with alpha = 0;
    if(mask.pixels[i] == color(255){
      color alphaCol = color(0,0);
      img.pixels[i] = alphaCol;
    }
  }

  img.updatePixels();
  image(img,0,0);
}

_vk

Or just use the builtin function mask()

PGraphics mask;
PImage img;
void setup(){
  img=loadImage("http://www.wallsave.com/wallpapers/1920x1080/nasa-earth/399479/nasa-earth-wa-nature-at-n-399479.jpg");
  img.resize(500,0);
    size(img.width,img.height);
  background(40);
  mask=createGraphics(width,height);//draw the mask object
  mask.beginDraw();
  mask.smooth();//this really does nothing, i wish it did
  mask.background(0);//background color to target
  mask.fill(255);
  mask.ellipse(width/2,height/2,250,250);
  mask.endDraw();


  img.mask(mask);
  image(img,0,0);
}

@adrock42, I think you forgot to declare img. And a closing parenthesis at line 20 : )

adrock42

indeed, its hard coding on a phone. I have been ignoring mask until they include it in processing.js

dcbvoice

Thanks for both of your help!! I don't want to use a mask though, if possible. I am trying to use the ellipse just as a barrier that images don't get drawn past so that the images that start populating the screen seem to be contained, but contained organically. Is there any way to define the barrier using the coordinates? Here is the code I am presently working with:

_    _    PImage fragment;

         void setup() {
          size(2000, 2000);

         }

         void draw() {
           float imageRotation = random(-90,90);
        float imageX = random(0, 2000);
        float imageY = random(0, 2000);
        float a = random(1,2);
        float imageScaleWidth = random(60,300);
        float imageScaleHeight = imageScaleWidth*.77;
        int fragNumber = int (a);

          // rotate + scale images
          imageMode(CENTER);
          translate(imageX, imageY);
          rotate(radians(imageRotation));


          fragment = loadImage(fragNumber +".png");
          image(fragment, imageX, imageY, imageScaleWidth, imageScaleHeight);
          smooth();

          if (mousePressed) {
            noLoop ();
            saveFrame();}


        }__

dcbvoice

I mean the mask works for sure, but the rim of the circle will cut off the images.