Masking with the copy-function

The simplest use case of the copy() function is the masking of images. Here are a few examples.

Processing

PImage sourceImage;

void setup() {
  size(900, 900);
  sourceImage = loadImage("source.jpg");
}

void draw() {
  background(0);

  int sourceX = 0;
  int sourceY = 0;
  int sourceWidth = width/2;
  int sourceHeight = height;

  int destinationX = 0;
  int destinationY = 0;
  int destinationWidth = width/2;
  int destinationHeight = height;

  copy(
    sourceImage, 
    sourceX,
    sourceY,
    sourceWidth, 
    sourceHeight, 
    destinationX, 
    destinationY, 
    destinationWidth, 
    destinationHeight);
}

P5.js

let sourceImage;

function setup() {
  createCanvas(900, 900);
  sourceImage = loadImage("sourceImage.jpg");
}

function draw() {
  background(0);

  let sourceX = 0;
  let sourceY = 0;
  let sourceWidth = width/2;
  let sourceHeight = height;

  let destinationX = 0;
  let destinationY = 0;
  let destinationWidth = width/2;
  let destinationHeight = height;
  
  copy(
      sourceImage,
      sourceX,
      sourceY,
      sourceWidth,
      sourceHeight,
      destinationX,
      destinationY,
      destinationWidth,
      destinationHeight
    );
}

---

Processing

PImage src;

void setup() {
  size(900, 900);
  src = loadImage("18.jpg");
}

void draw() {
  background(0);

  int sx = 300;
  int sy = 300;
  int sw = 300;
  int sh = 300;

  int dx = 300;
  int dy = 300;
  int dw = 300;
  int dh = 300;
  
  copy(src,sx,sy,sw,sh,dx,dy,dw,dh);
}

P5.js

let sourceImage;

function setup() {
  createCanvas(900, 900);
  sourceImage = loadImage("8.jpg");
}

function draw() {
  background(0);
  
  image(src,0,0);

  let sourceX = mouseX;
  let sourceY = mouseY;
  let sourceWidth = 300;
  let sourceHeight = 300;

  let destinationX = mouseX;
  let destinationY = mouseY;
  let destinationWidth = 500;
  let destinationHeight = 500;

  copy(
    sourceImage,
    sourceX, 
    sourceY, 
    sourceWidth,
    sourceHeight, 
    destinationX, 
    destinationY, 
    destinationWidth,
    destinationHeight
  );
}

---

Processing

PImage sourceImage;

void setup() {
  size(600, 600);
  sourceImage = loadImage("sourceImage.jpg");
  sourceImage.resize(width,height);
}

void draw() {
  background(0);

  int offsetX = int(map(mouseX, 0, width, -200, 200));
  int offsetY = int(map(mouseY, 0, height, -200, 200));

  int sourceX = 200 + offsetX;
  int sourceY = 200 + offsetY;
  int sourceWidth = 200;
  int sourceHeight = 200;

  int destinationX = 200;
  int destinationY = 200;
  int destinationWidth = 200;
  int destinationHeight = 200;

  copy(
    sourceImage,
    sourceX, 
    sourceY, 
    sourceWidth,
    sourceHeight, 
    destinationX, 
    destinationY, 
    destinationWidth,
    destinationHeight
  );
}

P5.js

let sourceImage;

function preload() {
  sourceImage = loadImage("sourceImage.jpg");
}

function setup() {
  createCanvas(600, 600);
  sourceImage.resize(600,600);
}

function draw() {
  
  console.log(sourceImage.width);
  console.log(sourceImage.height);
  
  background(0);

  let offsetX = Math.floor(map(mouseX, 0, width, -200, 200));
  let offsetY = Math.floor(map(mouseY, 0, height, -200, 200));

  let sourceX = 200 + offsetX;
  let sourceY = 200 + offsetY;
  let sourceWidth = 200;
  let sourceHeight = 200;

  let destinationX = 200;
  let destinationY = 200;
  let destinationWidth = 200;
  let destinationHeight = 200;

  copy(
    sourceImage,
    sourceX, 
    sourceY, 
    sourceWidth,
    sourceHeight, 
    destinationX, 
    destinationY, 
    destinationWidth,
    destinationHeight
  );
}

---

Processing

PImage sourceImage;

void setup() {
  size(600, 600);
  sourceImage = loadImage("sourceImage.jpg");
  sourceImage.resize(width,height);
}

void draw() {
  background(0);

  int offsetX = int(map(mouseX, 0, width, -200, 200));
  int offsetY = int(map(mouseY, 0, height, -200, 200));

  int sourceX = 200 + offsetX;
  int sourceY = 200 + offsetY;
  int sourceWidth = 200;
  int sourceHeight = 200;

  int destinationX = 200 + offsetX;
  int destinationY = 200 + offsetY;
  int destinationWidth = 200;
  int destinationHeight = 200;

  copy(
    sourceImage,
    sourceX, 
    sourceY, 
    sourceWidth,
    sourceHeight, 
    destinationX, 
    destinationY, 
    destinationWidth,
    destinationHeight
  );
}

P5.js

let sourceImage;

function preload() {
  sourceImage = loadImage("sourceImage.jpg");
}

function setup() {
  createCanvas(600, 600);
  sourceImage.resize(600,600);
}

function draw() {
  
  console.log(sourceImage.width);
  console.log(sourceImage.height);
  
  background(0);

  let offsetX = Math.floor(map(mouseX, 0, width, -200, 200));
  let offsetY = Math.floor(map(mouseY, 0, height, -200, 200));

  let sourceX = 200 + offsetX;
  let sourceY = 200 + offsetY;
  let sourceWidth = 200;
  let sourceHeight = 200;

  let destinationX = 200 + offsetX;
  let destinationY = 200 + offsetY;
  let destinationWidth = 200;
  let destinationHeight = 200;

  copy(
    sourceImage,
    sourceX, 
    sourceY, 
    sourceWidth,
    sourceHeight, 
    destinationX, 
    destinationY, 
    destinationWidth,
    destinationHeight
  );
}