The copy-function

Imagine for a moment that you are looking through a window. If you peer through the window at a distance of a few meters, you will see a section of what is behind it. Or imagine a smartphone: When you open the camera app, the display shows a section of your surroundings.

Showing a section of a motif – that’s exactly what the copy()-function does. To use it, you need to specify three things:

1. the motif from which a section is to be displayed.
2. the position and size of the section to be displayed
3. the destination where it should be displayed

For this 9 parameters are necessary:

1. the image object to be copied from
2. the x-position of the source
3. the y-position of the source
4. the width of the source
5. the height of the source
6. the x-position of the target
7. the y-position of the target
8. the width of the target
9. the height of the target

Processing

int sourceX = 0;
int sourceY = 0;
int sourceWidth = 100;
int sourceHeight = 100;
int destinationX = 100;
int destinationY = 100;
int destinationWidth = 200;
int destinationHeight = 200;

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

P5.js

let sourceX = 0;
let sourceY = 0;
let sourceWidth = 100;
let sourceHeight = 100;
let destinationX = 100;
let destinationY = 100;
let destinationWidth = 200;
let destinationHeight = 200;

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

Logically, if the width and height of the source are different from the width and height of the target, the image will be scaled or distorted. We can take advantage of this in a variety of ways for creative experimentation.

---

Language Comparison

Processing	p5.js
copy()	copy()