如何在处理过程中在每个图像的每个边缘周围加一个5像素的彩色间隙？

Question

我正在尝试我的学校项目，并且我们要求在每个图像的每个边缘周围留出5像素的彩色间隙。

我尝试使用line ()，stroke ()和strokeWeight ()功能，但它没有成功。我想也许线条显示在图像下面，也许我应该让线条与图像重叠？还有其他方法可以做到吗？

这是我迄今为止所做的事情

PImage cat;
PImage cat2;
PImage cat3;
PImage cat4;
PImage cat5;
PImage cat6;
PImage cat7;
PImage cat8;

color Purple = color(186,85,211);

void setup() {
    // load the image file from the "data" folder
    cat = loadImage("cat.jpg");

    // showing the same 9 images, perfectly arranged as 3-by-3 grid
    size(cat.width + cat.width + cat.width,
      (cat.height + cat.height + cat.height));
}

void draw() {
    //  Gap
    line (0, 0, width*3, 0);
    line (0, height*2, width*3, height*2);
    stroke (186,85,211);
    strokeWeight (5);

    // The background is purple
    background (Purple);

    // purple tint
    tint(186,85,211,126);
    // The image fllows the mouse pointer 
    image(cat, mouseX, mouseY);

    // make a copy of the original
    cat2 = cat.get();
    // No Tint
    tint(255, 255);
    // apply the black & white filter
    cat2.filter (THRESHOLD, 0.7);
    //display the image
    image(cat2, cat2.width, 0);

    // make a copy of the orginal
    cat3 = cat.get();
    // apply the grayscale filter
    cat3.filter(GRAY);
    //display the image
    image(cat3, cat.width*2, 0);

    // make a copy of the original
    cat4 = cat.get();
    // apply the INVERT filter 
    cat4.filter(INVERT);
    //display the image
    image(cat4, 0, cat.height); 

    // original
    image(cat, cat.width*1, cat.height*1);

    // make a copy of the original
    cat5 = cat.get();
    // apply the Posterize filter
    cat5.filter(POSTERIZE,4);
    //display the image
    image(cat5, cat.width*2, cat.height*1);

    // make a copy of the original
    cat6 = cat.get();
    // apply the Blur filter 
    cat6.filter(BLUR,5);
    //display the image
    image(cat6, 0, cat.height*2);

    // make a copy the original
    cat7 = cat.get();
    // make the Eroded filter
    cat7.filter(ERODE);
    //display the image
    image(cat7, cat.width, cat.height*2);

    // make a copy of the original
    cat8 = cat.get();
    // apply the DILATE filter
    cat8.filter(DILATE);
    //display the image
    image(cat8, cat.width*2, cat.height*2);
}

期望的结果：

实际结果如下：

Answer 1

不要在构造方面考虑，从结果的角度考虑：你所展示的是也只是一个粉红色background()，图像间隔基于几个像素填充：

ArrayList<PImage> cats = new ArrayList<Pimage>();

...

void draw() {
  background(155,0,155);
  int padding = 5,
      w = width - 4*padding,
      h = height - 4*padding;
  for (int row=0; row<4; row++) {
    for (int col=0; col<4; col++) {
      int idx = row * 3 + col;
      image(cats.get(idx), col*(w+padding), row*(h+padding), w, h);
    }
  }
}