I though I could load it then duplicate it as img2 and only apply the mask to the first img object.

Is that possible or is there a different way to do it?

function preload() {
  img = loadImage("assets/moonwalk.jpg");
  imgMask = loadImage("assets/mask.png");
  img2 = ? ? ? ? ? ?; // how do i clone the first img?
}

function setup() {
  createCanvas(720, 400);
  img.mask(imgMask);
  imageMode(CENTER);
}

function draw() {
  background(250, 255, 3);
  image(img2, width/2, height/2);
  image(img, mouseX, mouseY);
}

In the end I'm hoping to make a grid of shapes like that where the colors, width of rectangles, and number of rectangles varies. Thanks in advance for your help.

I try to create something like this : https://www.youtube.com/watch?v=YBKkVpRxUfs, using a kinect. At the moment I made some test with something like this :

class User {
  PGraphics pgBodyBg; 
  PImage bodyImg; 
  float colorIndexCounter; 
  int id; 
  ArrayList<DelayImg> bodyImageList = new ArrayList<DelayImg>();
  PGraphics pgTotal; 
  DelayImg[] buffer;

  User(int i) {
    colorIndexCounter=random(10); 
    pgTotal=createGraphics(512, 424);  
    pgTotal.beginDraw(); 
    pgTotal.background(0, 0); 
    pgTotal.endDraw(); 
    buffer=new DelayImg[50];
  }


  void delayEffect() {
    fillBuffer(); 
    changeColor(); 
    display();
  }

  void fillBuffer() {
    PImage bi= bodyImg.copy(); 
    DelayImg di=new DelayImg(bi); 
    for (int i = buffer.length-1; i > 0; i--) {
      buffer[i] = buffer[i-1];
    }
    buffer[0]=di;
  }



  void changeColor() {
    pgTotal.beginDraw(); 
    pgTotal.clear(); 
    pgTotal.pushStyle(); 
    for (int j=buffer.length-1; j>=0; j--) { 
      if (buffer[j]!=null) buffer[j].changeColor(pgTotal);
    }
    pgTotal.popStyle();
    pgTotal.endDraw();
  }

  void display() {
    image(pgTotal, 0, 0);
  }
}



class DelayImg {
  PImage img; 
  float alf=255; 
  PShape shape; 
  PGraphics pgBg; 
  int partSize=200; 
  DelayImg(PImage _img) {
    img=_img; 
    img.filter(THRESHOLD); 
    pgBg=createGraphics(512, 424);
  }

  void display(PGraphics pg) {
    pg.tint(255, alf); 
    pg.image(img, 0, 0); 
    if (alf>0)alf-=0.5;
    else alf=0;
  }

  void changeColor(PGraphics pg) {
    pgBg.beginDraw(); 
    pgBg.background(random(255), random(255), random(255));  
     pgBg.mask(img);
    pgBg.endDraw();
    pg.image(pgBg, 0, 0);
  }
}

bodyImg is update each frame, coming from kinect.

I want to be able to change the color everytime, that why pgTotal is clear every frame and display fresh new images, but the way I do it is very slow (10 fps). Do you have any suggestion, different kind of algorithm to improve frameRate? I try to use some vertex and textures aswell, but no real improvement...

Thanks for your help!

A.

The masked area becomes entirely opaque (the black rect). I would have used blending mode but I'm not using 100% white or black text.

I've looked here: https://forum.processing.org/two/discussion/23886/masking-a-shape-with-another-shape

but I see that also that has similar behavior.

here's the masked pgraphics:

mask = createGraphics(width, height);
pg = createGraphics(width, height);
for (int x=0; x< labels.length/2; x++){
pg.beginDraw();
pg.fill(0,0,255);
pg.text("#"+labels[x].labelText.toUpperCase(), labels[x].xLoc, labels[x].yLoc);
pg.endDraw();
}

here's the code for the masking:

  mask.beginDraw();
  mask.clear();
  mask.fill(255);
  mask.noStroke();
  mask.rect(random(0,width/2), random(0,height/2), random(width/2, width), random(height/2, height));
  mask.endDraw();
  pg.mask(mask);
  image(pg, 0, 0);

/** * Brightness Tracking * by Golan Levin. * * Tracks the brightest pixel in a live video signal. */

PImage bg;
int y;
import processing.video.*;

Capture video;

void setup() {
  size(640, 480);
  video = new Capture(this, width, height);
  video.start();  
  bg = loadImage("02.jpg");
  noStroke();
  smooth();
}

void draw() {

  if (video.available()) {
    video.read();
    background(bg);
    image(video, 0, 0, 20, 20); 
    int brightestX = 0; 
    int brightestY = 0; 
    float brightestValue = 0;
    video.loadPixels();
    int index = 0;
    for (int y = 0; y < video.height; y++) {
      for (int x = 0; x < video.width; x++) {
        int pixelValue = video.pixels[index];
        float pixelBrightness = brightness(pixelValue);

        if (pixelBrightness > brightestValue) {
          brightestValue = pixelBrightness;
          brightestY = y;
          brightestX = x;
        }
        index++;
      }

    }
    fill(255, 204, 0, 80);
    ellipse(brightestX, brightestY, 250, 250);

  }
}

I was looking at doing some image animation and transitions with image masks. The effect I'm working towards is having an image mask rotate depending on where a user's mouse is positioned around the border of a circle. So as the user moves their mouse around the circle's border the image mask rotates revealing a previously covered part of the bottom image. To do this, the image mask would need to be able to rotate dynamically based on the user's interactions with the sketch. Being able to rotate the image mask would prevent having to create a mask for every possible angle of the circle.

From what I could find, there wasn't a way to rotate or transform an image mask before it is applied to an image in a P5.js sketch. Is this possible with the current p5.js library?

Referencing the image mask example from the documentation is there a solution to rotate the preloaded image before you apply it to the image?

var photo, maskImage;
function preload() {
    photo = loadImage('assets/rockies.jpg');
    maskImage = loadImage('assets/mask2.png');
}
    
function setup() {
    createCanvas(100, 100);
    photo.mask(maskImage);
    image(photo, 0, 0);
}

Would be something like the following sudo code...

var photo, maskImage;
function preload() {
    photo = loadImage('assets/rockies.jpg');
    maskImage = loadImage('assets/mask2.png');
}
    
function setup() {
    createCanvas(100, 100);
    // SUDO CODE:
    // =======
    // Rotate the maskImage 90degrees via rotate(PI/2.0);
    // Apply the newly rotated mask to the image
    // END OF SUDO Code
    // =======
    photo.mask(maskImage);
    image(photo, 0, 0);
}

Thanks!

I have a 3D printer using a DLP projector. The projector illumination falls off around the edges of the build area. I am creating an image that will map the amount of falloff across the entire image and I want to apply this image as a correction filter to a series of images (the layer slices). This way, the resin 'sees' an even illumination across the the entire slice and my accuracy and curing is even.

One thing that I will need to account for is any black pixels in the target image need to stay black. I think creating a mask is needed to do this.

As for the parts of the image that do get affected, it would seem that I would need to somehow compare each pixel in the two images and then apply an inverse adjustment from the filter image to the target image.

Is there a function like Shaders or PImage::mask() that will do this?

Here is code:

PImage light, screen, bg, lightImage, mask;
PGraphics pg, lightMask;
int up, down, right, left;
float x, y, speed = 1;
color randomColor;
float camX=0, camY=0;
float  Ox1, Ox2, Oy1, Oy2;
int globalMX, globalMY;
void setup() {
  size(480, 270, P3D);
  frameRate(60);
  background(0);
  bg = loadImage("https://" + "ichef.bbci.co.uk/images/ic/480xn/p01lckx1.jpg");
  lightImage = loadImage("https://" + "i.stack.imgur.com/NaD6F.png");
  bg.resize(width, height);
  light = bg.copy();
  lightMask = createGraphics(width, height);
  randomColor = color(random(256), random(256), random(256));
  bullets = new ArrayList<Bullet>();
  reloadLights();
  x = width/2;
  y = height/2;
}
void draw() {  
  background(0);
  x += (right - left) * speed;
  y += (down - up) * speed;
  Ox1=camX-width+x;
  Ox2=camX+x;
  Oy1=camY-y;
  Oy2=camY+height-y;
  ortho(Ox1, Ox2, Oy1, Oy2);
  println(x + "  " + y);
  imageMode(CORNER);
  image(bg, 0, 0);
  pushMatrix();
  translate(x,y);
  screen = get(0, 0, width, height);
  popMatrix(); 
  fill(0, 125);
  noStroke();
  rectMode(CENTER);
  rect(x, y, width, height);
  screen.mask(lightMask);
  image(screen, 0,0);
  fill(255, 255, 0);
  textAlign(LEFT, TOP);
  textSize(39);
  text(int(frameRate) + " FPS", 5, 5);
  ellipse(globalMX,globalMY,20,20);
  //popMatrix();
}
void reloadLights() {
  pg = lightMask;
  pg.beginDraw();
  pg.background(0);
  pg.blendMode(ADD);
  for (int i = bullets.size()-1; i >= 0; i--) {
    Bullet bullet = bullets.get(i);
    drawLight(bullet.x, bullet.y, bullet.r);
  }
  //mask = pg;
  pg.endDraw();
}
void drawLight(int xL, int yL, int rL) {
 // pushMatrix();
 // translate(x,y);
  pg.imageMode(CENTER);
  pg.image(lightImage, xL,yL, rL, rL);
  //popMatrix();
}
 
void mousePressed() {
  bullets.add( new Bullet(globalMX, globalMY, 50));
  reloadLights();
}
ArrayList<Bullet> bullets;
class Bullet {
  int x, y, r;
  public Bullet(int x_, int y_, int r_) {
    x = x_;
    y = y_;
    r = r_;
  }
}
void keyPressed() {
  if (key == 'a' || key == 'A') {
    left = 1;
  }
  if (key == 'd' || key == 'D') {
    right = 1;
  }
  if (key == 'w' || key == 'W') {
    up = 1;
  }
  if (key == 's' || key == 'S') {
    down = 1;
  }
}
void keyReleased() {
  if (key == 'a' || key == 'A') {
    left = 0;
  }
  if (key == 'd' || key == 'D') {
    right = 0;
  }
  if (key == 'w' || key=='W') {
    up = 0;
  }
  if (key == 's' || key == 'S') {
    down = 0;
  }
}
void mouseMoved() {
  globalMX=mouseX;
  globalMY=mouseY;
}

/**
 * Draw rectangles inside of circles
 * 2017-08-22
 **/
PGraphics sourceImage;
PGraphics maskImage;

  int colorset;
  color [] colorsetarray = { 
    color(#3AC459), 
    color(#3D8CFF), 
    color(#8CD6ED), 
    color(#F7CC68), 
    color(#F77068), 
    color(#576984), 
    color(#7A9BB0), 
    color(#D8E8ED), 
    color(#EAF4F7) };
  colorset = colorsetarray[(int)random(0, 8)];

void setup() {
  size(800, 800); //size of canvas
  noLoop();
  smooth();
}

void draw() {

  for (int y = 20; y < height-8; y += 120) {
    for (int x = 20; x < width-80; x += 120) {
      // create source
      sourceImage = createGraphics(100, 100); //size of drawing
      sourceImage.beginDraw();
      sourceImage.background(colorsetarray[(int)random(colorsetarray.length)]); //color the background
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the rectangle
      sourceImage.translate(width/2, height/2);
      sourceImage.rotate(radians(45));
      sourceImage.noStroke(); //take the stroke off of the rectangle
      sourceImage.rect(-600, -200, 80, 500); //locate the rectangle and draw it
      sourceImage.endDraw();

      // create mask
      maskImage = createGraphics(100, 100); //size of mask
      maskImage.beginDraw();
      maskImage.ellipse(50, 50, 100, 100);
      maskImage.endDraw();

      // apply mask
      sourceImage.mask(maskImage);

      // show masked source
      image(sourceImage, x, y); //move the chip here
    }
  }
}

I was wondering though if there is a way I can, instead of drawing over the circle, just remove parts of it so I am not actually drawing anything in those areas.

void setup () {
  size(500, 500);
  background(100, 40, 150);
}
void draw () {
  if (mousePressed) {
    stroke(#85FCA1);
    fill(#85FCA1);
    ellipse(mouseX, mouseY, 200, 200);
    fill(100, 40, 150);
    stroke(100, 40, 150);
    rect(mouseX-100, mouseY, 200, 100);
    ellipse(mouseX-75, mouseY, 50, 50);
    ellipse(mouseX-25, mouseY, 50, 50);
    ellipse(mouseX+25, mouseY, 50, 50);
    ellipse(mouseX+75, mouseY, 50, 50);
  }
}

Here is the result of that code, the one on the bottom was drawn first and the one on top was drawn second. I would like to be able to only draw the green part of that when I click so I am not drawing on top of the other.

Thank you in advance.

In the code below I have two observations and I am hopping to figure out if there is a way to solve them.

First {REN =P2D; maskImageNow=false;}

When REN is set to P2D, and maskImageNow=false, a white fill ellipse is drawn on top of a background full of nonFilled mini ellipses (background black and their stroke color is white). What I am observing is that the large main filled ellipse that follows the mouse has an artifact in its fill. You can see the borders of the circles underneath the Pgraphics object. See this image showing the problem:

_

***********EDIT: For the first case, it seems it is related to the order of drawing. In P2D, because of line 67, the white ellipse is drawn first and then the mini-bubbles on top. However, if you use JAVA2D you don't get the same effect. The ellipse and bubbles are on the same level/depth/layer. Or in other words, there is some edge blending between the mini-bubbles edge and the background in the gg (PGraphics) object which is not observed in the JAVA2D renderer version. Consider this part of the question solved and the observation is not an artifact.

Second {REN =JAVA2D; maskImageNow=true;}

When I set the REN to JAVA2D, when I apply the mask (maskImageNow=true), the edges of the ellipses are not smooth. However, when the mask effect is off, the background ellipses do not display that rough edges effect. Next image shows this observation:

Notice that during the screenshot process, the edges of the ellipses do not show that rough edge I was talking about (left image). Hopefully if you run the code you can see it directly on the sketch.

Can you reproduce them and do you know any way to fix them?

Kf

//REFERENCES: https://forum.processing.org/two/discussion/23093/brightness-pixel-doesnt-work#latest

//INSTRUCTIONS:
//         *--   Click to enable or disable the masking effect


//===========================================================================
// FINAL FIELDS:
final int maxTries=9000;
final int nCircles=2000;
final String REN=P2D;


//===========================================================================
// GLOBAL VARIABLES:

ArrayList<CircleStruct> c;
PGraphics pg;
PGraphics gg;
boolean maskImageNow=false;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(400, 600, REN);
  smooth(8);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  ellipseMode(RADIUS);

  fill(255);
  strokeWeight(2);

  pg = createGraphics(width, height, REN);
  //pg.smooth(4);

  c=new ArrayList<CircleStruct>();
  gg=createGraphics(width, height, REN);  
  //gg.smooth(4);
  fillWithCircles(nCircles);
  gg.beginDraw();  
  gg.noFill();
  gg.stroke(255);
  gg.strokeWeight(2);
  gg.clear();
  for (CircleStruct pc : c) {
    pc.draw(gg);
  }
  gg.endDraw();
}



void draw() {
  background(0);

  pg.beginDraw();
  pg.clear();
  pg.ellipse(mouseX, mouseY, 100, 100);
  pg.endDraw();

  image(pg, 0, 0);

  if (maskImageNow) 
    gg.mask(pg);

  image(gg, 0, 0);
}

void keyReleased() {
}

void mouseReleased() {
  maskImageNow=!maskImageNow;  //Toggle action

  if (maskImageNow==false) {
    gg.beginDraw();
    gg.noFill();
    gg.stroke(255); 
    gg.strokeWeight(2);
    gg.clear();
    for (CircleStruct pc : c) {
      pc.draw(gg);
    }
    gg.endDraw();
  }
}



//===========================================================================
// OTHER FUNCTIONS:

void fillWithCircles(int n) {
  noFill();
  stroke(255);
  c.clear();  

  for (int i=0; i<n; i++) {
    CircleStruct cir=new CircleStruct();
    boolean overlap=true;
    int ntries=0;
    while (overlap && ntries<maxTries) {
      overlap=false;
      ntries++;
      for (CircleStruct pc : c) {
        if (cir.overlaps(pc)) {
          overlap=true;
          cir.reGenerateCircle();
          break;
        }
      }
    }

    if (ntries>=maxTries) {
      println("Stop trying placing circles at counter " + i + " out of "+n);
      break;
    }

    c.add(cir);
  }
}


class CircleStruct {

  final static int minRad=3;
  final static int maxRad=12;

  float w;
  float h;
  float rad;

  CircleStruct() {
    generateCircle();
  }

  void generateCircle() {
    w=random(width);
    h=random(height);
    rad=random(minRad, maxRad);
  }

  void reGenerateCircle() {
    generateCircle();
  }

  void draw() {
    ellipse(w, h, rad, rad);
  }

  void draw(PGraphics gg) {
    gg.ellipse(w, h, rad, rad);
  }

  boolean overlaps(CircleStruct ptrC) {
    return overlaps(ptrC.w, ptrC.h, ptrC.rad);
  }

  boolean overlaps(float _w, float _h, float _r) {
    return dist(w, h, _w, _h)<rad+_r;
  }

Just wondering if anyone would have advice on filling an irregular shape with a radial gradient. The processing examples don't seem to work with PShape in the same way they do with ellipse etc.

Thanks!

var m;
var i;

function setup() {
  createCanvas(600,600)
  m = createGraphics(600,600)
  m.ellipse(m.width/2,m.height/2,50,50)
  i = loadImage('unnamed.jpg')

}

function draw() {
  i.mask(m)
  image(i,0,0)
}

I get a p5.js:14713 Uncaught TypeError: Cannot read property 'width' of undefined error when I try this.

The code below does not work:

var img;
var mk;

function setup() {
    createCanvas(400, 400);

    img = createGraphics(200, 200);
    img.ellipse(100, 100, 100, 100);

    mk = createGraphics(200, 200);
    mk.rect(0, 0, 100, 100);

    img.mask(mk);
}

function draw() {
    background(200);
    image(img, 0, 0);
}

Then, is there a way to convert p5.Graphics to p5.Image object so that mask() method can be used?

Or, I wonder if there's other ways to apply the mask.

var topL, bottomL; //pImages
var pg;

function preload() {
  topL = loadImage("assets/topImage.jpg");
  bottomL = loadImage("assets/bottomImage.jpg");
}

function setup() {
  createCanvas(750, 750);
  pg = createGraphics(750, 750);
  pg.pixelDensity(1);
}

function draw() {

  image(topL, 0, 0);
  bottomL.mask(pg._renderer);
  image(bottomL, 0, 0);

  image(pg, 0, 0);

  push();
  translate(mouseX, mouseY);
  rect(0, 0, 20, 20);
  pop();
}


function mouseMoved() {
  pg.push();
  pg.translate(mouseX, mouseY);
  pg.fill(255);
  pg.ellipse(0, 0, 20, 20);
  pg.pop();
}

PGraphics pg0, pg1, mymask0, mymask1, whiteMask, white;
float t0 = 0;
float t1 = 0;
void setup() 
{
  size(200, 200);
  smooth();
  pg0 = createGraphics(200, 200);
  pg1 = createGraphics(200, 200);
  mymask0 = createGraphics(200, 200);  
  mymask1 = createGraphics(200, 200);  
  whiteMask = createGraphics(200, 200);  
  white = createGraphics(200, 200);  
  white.beginDraw();
  white.noStroke();
  white.fill(255);
  white.rect(0,0,200,200);
  white.endDraw();
  makepg0();
  makepg1();
}
void draw() 
{
  // white background;
  background(255);
  //image(white,0,0);  
  //updateMask1();    
  //image(pg1, 0, 0);      
  updateMask0();
  //pg0.tint(255,128);
  image(pg0, 0, 0);    
  //tint(255,128);
  updateMask1();  
  image(pg1, 0, 0);  
  //tint(255,128);
}

void whiteMask()
{
  whiteMask.beginDraw();
  whiteMask.background(255);
  whiteMask.endDraw();
  white.mask(whiteMask);
}
void updateMask1()
{
  mymask1.beginDraw();
  mymask1.background(t1);
  mymask1.endDraw();
  pg1.mask(mymask1);

}
void updateMask0()
{
  mymask0.beginDraw();
  mymask0.background(t0);
  //mymask0.background(255);
  mymask0.endDraw();
  pg0.mask(mymask0);
}
void makepg0() // yellow rect
{
  pg0.smooth();
  pg0.beginDraw();
  pg0.fill(255,255,0);
  pg0.rect(50, 50, 100, 100);
  pg0.endDraw(); 
}
void makepg1() // red rect
{
  pg1.smooth();
  pg1.beginDraw();
  pg1.fill(255,0,0);
  pg1.rect(30, 30, 100, 100);
  pg1.endDraw(); 
}
void mousePressed() 
{
  t0 = random(20, 255);
  t1 = random(20, 255);
  println(t0,t1);
}

Can you help me?

I'm working on a sketch that generates a grid of radiating concentric circles. I'm trying to find a way to create a moving gradient across the grid. Right now they're all blue. So the question is sort of twofold.

1) How do I make left to right gradient over the stroke of a circle? (I've played with fill examples - but not sure how to do it with stroke. Or if I can't maybe there's a trick/workaround?

2) What is a reasonable way for me to keep track of a 'gradient zone' that moves over time and should inform how the circles get generated?

Part 2 is hard to put into words. I'll paste the full code below - but I simulated the gradient behavior with a travelling ellipse that looks like this:

    fill(255, 162, 31, 35);
    noStroke();
    ellipse(xPos, 200, 40, 300);
    xPos=xPos+2;
    if (xPos>width+20){
      xPos=-20;
    }

That's at the bottom of the full code in the 'phase 4' section - and this happens 16 seconds in, and again every 16 seconds after it ends.

So in place of that ellipse - I want a gradient to travel across the circles themselves. As in this mockup image.

I figure I need to keep track of range of coordinates in some top level variables and reference them as I draw the circles. Can someone point me in the right direction? Thanks!

full code below:

    //PImage bg;
    int seqCounter;
    int[] sizes = { 
      80, 40, 20, 10, 0
    };
    int xoffset = 80;
    int yoffset = 0;

    int xPos=50;

    void setup(){
      size(640, 351);
      frameRate(24);
      //bg = loadImage("floorplan.jpg");
      print("setup complete");

    }

    float sizeBasedAlpha(int size){
      float alpha = 0.0;
      if (size <= 60){
          alpha = 255.0;
          //alpha = map(size, 0, 60, 0, 255);
        }
        if (size > 60){
          alpha = map(size, 60, 80, 255, 0);
        }
        return alpha;
    }

    void makeRow(int size, int rowNumber){
      float alpha = 0.0;
      noFill();
      for (int n = 0; n < 6; n++){
        strokeWeight(1);
        alpha = sizeBasedAlpha(size);
        stroke(3, 171, 255, alpha);
        ellipse (xoffset+(n*100), yoffset+(rowNumber*100), size, size);
      }
    }

    void makeRowMasking(int size, int rowNumber){
      float alpha = 0.0;
      noFill();
      for (int n = 0; n < 6; n++){
        if ((n>0) && (n<5)){
          strokeWeight(3);
          alpha = sizeBasedAlpha(size);
          stroke(3, 171, 255, alpha);
        }
        else{
          strokeWeight(1);
          alpha = sizeBasedAlpha(size);
          stroke(3, 171, 255, alpha);
        }
        ellipse (xoffset+(n*100), yoffset+(rowNumber*100), size, size);
      }
    }

    void makeConversation(int size){
      float alpha = 0.0;
      strokeWeight(3);
      alpha = sizeBasedAlpha(size);
      stroke(255, 87, 3, alpha);
      ellipse(width*0.5+10, 200, size, size);
    }

    void draw(){
      if (millis() < 5000){
        seqCounter = 0;
      }else{
      seqCounter = (millis()/4000) % 7; //7 steps, 4 seconds each
      }
      //print(seqCounter);
      //background(bg);
      background(255);

      //phase 1
      if ((seqCounter == 0) || (seqCounter == 1)){
        xPos=50;
        for (int i = 0; i < sizes.length; i++){
          // make size a little bit bigger
          makeRow(sizes[i], 1);
          makeRow(sizes[i], 2);
          makeRow(sizes[i], 3);
          makeRow(sizes[i], 4);
          sizes[i] += 2;
          //draw a circle using x as the height and width of the circle
          if(sizes[i] > 80) {
            sizes[i] = 0;
          }
        }
      }

      //phase 2
      if (seqCounter == 2){
        for (int i = 0; i < sizes.length; i++){
          makeConversation(sizes[i]);
          makeRow(sizes[i], 1);
          makeRow(sizes[i], 2);
          makeRow(sizes[i], 3);
          makeRow(sizes[i], 4);
          sizes[i] += 2;
          //draw a circle using x as the height and width of the circle
          if(sizes[i] > 80) {
            sizes[i] = 0;
          }
        }
      }
        //phase 3  
        if ((seqCounter == 3) || (seqCounter == 4)){
        for (int i = 0; i < sizes.length; i++){
          makeConversation(sizes[i]);
          makeRowMasking(sizes[i], 1);
          makeRowMasking(sizes[i], 2);
          makeRowMasking(sizes[i], 3);
          makeRowMasking(sizes[i], 4);
          sizes[i] += 2;
          //draw a circle using x as the height and width of the circle
          if(sizes[i] > 80) {
            sizes[i] = 0;
          }
        }
      }


      //phase 4 - noon sounds
       if ((seqCounter == 5) || (seqCounter == 6)){
        for (int i = 0; i < sizes.length; i++){
          // make size a little bit bigger
          makeRow(sizes[i], 1);
          makeRow(sizes[i], 2);
          makeRow(sizes[i], 3);
          makeRow(sizes[i], 4);
          sizes[i] += 2;
          //draw a circle using x as the height and width of the circle
          if(sizes[i] > 80) {
            sizes[i] = 0;
          }
        }
        fill(255, 162, 31, 35);
        noStroke();
        ellipse(xPos, 200, 40, 300);
        xPos=xPos+2;
        if (xPos>width+20){
          xPos=-20;
        }
      }
      //saveFrame();
    }

 PGraphics pg;
    PImage bgimage;
    void setup()
 {
      size(640, 480);
      bgimage = loadImage("background.jpg");
      bgimage.resize(640,480);  

      pg = createGraphics(640, 480);
      pg.beginDraw();
      pg.background(0);
      pg.smooth();
      pg.noStroke();
      pg.fill(255);
      pg.endDraw();
    }
    void draw()
    { 
      image(bgimage,640,480);

      pg.beginDraw();
      if (mousePressed)
      pg.ellipse(mouseX, mouseY, 100, 100);
      pg.endDraw();

      bgimage.mask(pg);
      image(bgimage,0,0);
    }

PGraphics pg;
PImage bgimage;
void setup() {
  size(640, 480);
  bgimage = loadImage("background.jpg");
  bgimage.resize(640,480);  

  pg = createGraphics(640, 480);
  pg.beginDraw();
  pg.background(0);
  pg.smooth();
  pg.noStroke();
  pg.fill(255);
  pg.endDraw();
}
void draw()
{ 
  image(bgimage,640,480);

  pg.beginDraw();
  if (mousePressed)
  pg.ellipse(mouseX, mouseY, 100, 100);
  pg.endDraw();

  bgimage.mask(pg);
  image(bgimage,0,0);
}

It doesn't seem to be working properly. Or am I missing something?

(This is my first post in this forum, so sorry for any confusion)

This is the code to the application, I'm drawing a letter D and i want to draw lines above it but only on the letter itself, not on the white inside and outside of it. Is there any way I can do this?

I have looked at processings copy() and get() functions and am wondering if it is possible to copy irregular shapes out of images with similar functions?

For the sake of clarity if the copy and get functions are rectangular cookie cutters, I am looking for a cookie cutter that can cut triangles/circles etc.

Thanks!!

I am a little new with this whole thing, so bear with me:

Basically, for a project of mine, I wish to create a looking glass. During the scenes in this project (its an interactive story of sorts) two gifs will be running simutaneously, one on top of the other. The gifs are run using the GifAnimation library. The idea is that the user can move the looking glass over some area of the gif on top, and, in the area of the looking glass, the user will be able to see the gif underneath; within the area of the looking glass, the gif on top becomes transparent. The two gifs will be fairly similar, however the hidden one will have small, subtle changes that reveal additional information about the story.

What I have so far:

Firstly, the LookingGlass class which is called by draw() is defined like so. lg is defined as a global variable, LookingGlass lg in the main file.

`class LookingGlass {
  float radius = 50;

  // This is a method which determines which pixels on the screen are inside of the looking glass, and which ones are not.
  void makeTransparent() {
    verticies[0] = new Vect2(mouseX-(lg.radius)/2, mouseY);
    verticies[1] = new Vect2(mouseX-(lg.radius)/3, mouseY-(lg.radius)/3);
    verticies[2] = new Vect2(mouseX, mouseY-(lg.radius)/2);
    verticies[3] = new Vect2(mouseX+(lg.radius)/3, mouseY-(lg.radius)/3);
    verticies[4] = new Vect2(mouseX+(lg.radius)/2, mouseY);
    verticies[5] = new Vect2(mouseX+(lg.radius)/3, mouseY+(lg.radius)/3);
    verticies[6] = new Vect2(mouseX, mouseY+(lg.radius)/2);
    verticies[7] = new Vect2(mouseX-(lg.radius)/3, mouseY+(lg.radius)/3);

    // I have put various things here which have all failed, as described below

    }
  }

  // Displays the looking glass, and has it gain transparency
  void display() {
    fill(255, 20);
    ellipse(mouseX, mouseY, radius, radius);
  }
}`

Originally, I though that you could use pixels[] to make each the pixels with the above listed verticies (which roughly encompass the same area as the circle) transparent, by using the point2line library's method insidePolygon, which takes a list of Vect2 (the polygon's verticies) and a Vect2 (the point which you wish to test whether it is inside the bounds defined by those verticies). Nevertheless, this is TERRIBLY inefficient - my window size is 690x388, so each time the looking glass moves, it has to recalcuate which of the 267720 pixels on the screen are inside the looking glass and which ones are not.

I don't know if I could use PGraphics to somehow resolve this issue - I don't know enough about Processing in general.

Regardless, any help would be appreciated.

EDIT: Formatting

I have coded a generative pattern that works when on mouse clicked (pattern grows from the mouse clicked position) but I would like it to be restrained within a random shape, say the shape of a person or a dog, the space around is black but the shape of the person/dog would be fillable with the generative pattern,

Ive tried merging my code with some shape fill examples but I couldn't get it to work, Is there a way to do this without having to rewrite everything?

Thanks!

Currently, I'm trying to mask images. But for some reason as soon I apply a filter, the image flips (or rotates 180º). And I just can't get them back to the current position.

This happens not only with mask() method, but also with other filters (with filter method itself or the blend() one)

I'm giving you an example code:

PGraphics mappingZone;
.. mappingZone = applet.createGraphics(kinect.width, kinect.height, PApplet.P2D);
.. filteredImg = applet.createImage(kinect.width, kinect.height, PApplet.P2D); ...

  mappingZone.beginDraw();
  mappingZone.background(0);            
  mappingZone.image(mappingTexture, 0, 0);
  mappingZone.mask(filteredImg);    
  mappingZone.endDraw();        

  applet.image(mappingZone, 0, 0, applet.width, applet.height);

I tried several things to flip the image to the correct position, like: mappingZone.scale(-1, -1);

But nothing works. However, applying a second filter usually return the image to the correct position. Any clue?

So that's rendering text using an image as "texture".

I don't know if there is some obvious way to do this I'm missing. I though it might be doable by changing the color of every pixel of the text with corresponding pixel of the source image.

Problem is, although I can access the image's pixel array I have no clue how to do it for the text.

Thanks to anyone that can help me =)