Creating Pointillism effect on an image

huimc

Hello, I am currently working on a project in Processing to develop an interface by using face detection to view and interact with an image. When users entered to modify mode, the image will modify the image by adding pointillism effect on it with the face region. The small circle should be retained when the position indicator moves away. I am currently testing the function by using mouse movement. However, the small circle didn't retain and it seems like they were covered by the original image.

Any suggestion? I can't see what went wrong since I didn't place the image after drawing the circle.

import gab.opencv.*;
import processing.video.*;
import java.awt.*;

PImage img; 
PImage imgBlur, imgBefore, imgPoint, imgPointAfter;
Capture cam;
OpenCV opencv;
OpenCV imgOpenCV;

int camWidth = 320;
int camHeight = 240;

int mode = 0; //0: default; 1: view; 2: modify; 3: replace;

void setup() {

  //hint(DISABLE_DEPTH_SORT);
  size(1000, 647);
  cam = new Capture(this, 320, 240);  
  cam.start();
  opencv = new OpenCV(this,320,240);
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);
  imageMode(CENTER);
  img = loadImage("selfies.jpg");  // Load the image into the program
  imgPoint = img.get(0,0,width,height);
  imgBlur = loadImage("selfies.jpg");
  imgBlur.filter(BLUR, 5);


}

void draw() {

  if (cam.available()) {

    image(img, img.width/2, img.height/2);  // Displays the image at its actual size at point (0,0)
    cam.read();  
    opencv.loadImage(cam);  
    image(cam, width - cam.width/2, height - cam.height/2);

    Rectangle[] faces = opencv.detect();
    noFill();
    stroke(0,255,0);
    strokeWeight(3);

    if (faces.length>0) {

        if (mode == 1) {

         image(imgBlur, 0, 0);
         imgBefore = img.get(faces[0].x, faces[0].y, faces[0].width, faces[0].height);
         image(imgBefore,faces[0].x,faces[0].y);

        } else if ( mode == 2) {

          noStroke();
          loadPixels();
          imgPointAfter = imgPoint.get(mouseX,mouseY,100,100);
          int x = (int)random(mouseX,mouseX+imgPointAfter.width);
          int y = (int)random(mouseY,mouseY+imgPointAfter.height);
          int i = x + imgPoint.width*y;
          color c = pixels[i];
          fill(c);
          ellipse(x, y, 17,17);
        }

        for( int i=0; i<faces.length; i++) {      

          rect(width - camWidth + faces[i].x, height - camHeight + faces[i].y, faces[i].width, faces[i].height); // cam face detect
          rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height); // position indicator

          }

        } else if (mode == 1) {

          image(imgBlur, 0, 0);
      }
  }
}

void keyPressed(){
  switch (key) {
    case 'v':
      mode = 1;
      break;
    case 'm':
      mode = 2;
      break;
    case 'r':
      mode = 3;
      break;
    case 'e':
      mode = 0;
      break;
  }
}

Lord_of_the_Galaxy

I don't have my device to test it, but I think you're on the right track, the circle (drawn by ellipse(x, y, 17, 17) I think) gets covered by the rectangles drawn later.
Use a Boolean variable to fix this.