0
# Image Processing
1
2
Image loading, display, manipulation, filtering, and pixel-level operations for creative image effects and multimedia applications.
3
4
## Capabilities
5
6
### Image Loading and Display
7
8
Functions for loading and displaying images on the canvas.
9
10
```javascript { .api }
11
/**
12
* Load an image from a file
13
* @param {string} path - Path to image file
14
* @param {function} [successCallback] - Called when image loads successfully
15
* @param {function} [failureCallback] - Called if image fails to load
16
* @returns {p5.Image} Image object
17
*/
18
function loadImage(path, successCallback, failureCallback);
19
20
/**
21
* Display an image on the canvas
22
* @param {p5.Image} img - Image to display
23
* @param {number} x - X coordinate
24
* @param {number} y - Y coordinate
25
* @param {number} [width] - Display width
26
* @param {number} [height] - Display height
27
*/
28
function image(img, x, y, width, height);
29
30
/**
31
* Create a blank image
32
* @param {number} width - Image width in pixels
33
* @param {number} height - Image height in pixels
34
* @returns {p5.Image} New blank image
35
*/
36
function createImage(width, height);
37
```
38
39
### Image Tinting and Mode
40
41
Functions for applying color effects to images.
42
43
```javascript { .api }
44
/**
45
* Apply color tint to subsequently drawn images
46
* @param {...(number|string|p5.Color)} args - Tint color values
47
*/
48
function tint(...args);
49
50
/**
51
* Remove any applied tint
52
*/
53
function noTint();
54
55
/**
56
* Set image drawing mode
57
* @param {string} mode - CORNER, CORNERS, CENTER
58
*/
59
function imageMode(mode);
60
```
61
62
### Pixel Manipulation
63
64
Direct pixel access and manipulation functions.
65
66
```javascript { .api }
67
/**
68
* Load pixel array for direct manipulation
69
*/
70
function loadPixels();
71
72
/**
73
* Update canvas from modified pixel array
74
* @param {number} [x] - X coordinate of region to update
75
* @param {number} [y] - Y coordinate of region to update
76
* @param {number} [w] - Width of region to update
77
* @param {number} [h] - Height of region to update
78
*/
79
function updatePixels(x, y, w, h);
80
81
/**
82
* Get pixel color or image region
83
* @param {number} [x] - X coordinate
84
* @param {number} [y] - Y coordinate
85
* @param {number} [w] - Width of region
86
* @param {number} [h] - Height of region
87
* @returns {p5.Color|p5.Image} Color at point or image of region
88
*/
89
function get(x, y, w, h);
90
91
/**
92
* Set pixel color
93
* @param {number} x - X coordinate
94
* @param {number} y - Y coordinate
95
* @param {p5.Color|number|number[]} color - Color to set
96
*/
97
function set(x, y, color);
98
```
99
100
### Image Filters
101
102
Built-in image filtering functions for visual effects.
103
104
```javascript { .api }
105
/**
106
* Apply filter to canvas
107
* @param {string} filterType - Filter type constant
108
* @param {number} [filterParam] - Filter parameter where applicable
109
* Available filters: THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE,
110
* BLUR, ERODE, DILATE
111
*/
112
function filter(filterType, filterParam);
113
```
114
115
### p5.Image Class
116
117
Image object with manipulation capabilities.
118
119
```javascript { .api }
120
/**
121
* Image container class
122
*/
123
class p5.Image {
124
/** Image width in pixels */
125
width;
126
/** Image height in pixels */
127
height;
128
/** Pixel array (RGBA values) */
129
pixels;
130
131
/**
132
* Load pixel array for manipulation
133
*/
134
loadPixels();
135
136
/**
137
* Update image from pixel array
138
*/
139
updatePixels();
140
141
/**
142
* Get pixel color or region
143
* @param {number} [x] - X coordinate
144
* @param {number} [y] - Y coordinate
145
* @param {number} [w] - Width of region
146
* @param {number} [h] - Height of region
147
* @returns {p5.Color|p5.Image} Color or image region
148
*/
149
get(x, y, w, h);
150
151
/**
152
* Set pixel color
153
* @param {number} x - X coordinate
154
* @param {number} y - Y coordinate
155
* @param {p5.Color|number|number[]} color - Color to set
156
*/
157
set(x, y, color);
158
159
/**
160
* Resize image
161
* @param {number} width - New width
162
* @param {number} height - New height
163
*/
164
resize(width, height);
165
166
/**
167
* Create copy of image
168
* @returns {p5.Image} Copy of this image
169
*/
170
copy();
171
172
/**
173
* Apply mask to image
174
* @param {p5.Image} srcImage - Mask image
175
*/
176
mask(srcImage);
177
178
/**
179
* Apply filter to image
180
* @param {string} filterType - Filter type
181
* @param {number} [filterParam] - Filter parameter
182
*/
183
filter(filterType, filterParam);
184
185
/**
186
* Blend with another image
187
* @param {p5.Image} srcImage - Source image
188
* @param {number} dx - Destination X
189
* @param {number} dy - Destination Y
190
* @param {number} dw - Destination width
191
* @param {number} dh - Destination height
192
* @param {number} sx - Source X
193
* @param {number} sy - Source Y
194
* @param {number} sw - Source width
195
* @param {number} sh - Source height
196
* @param {string} blendMode - Blend mode
197
*/
198
blend(srcImage, dx, dy, dw, dh, sx, sy, sw, sh, blendMode);
199
200
/**
201
* Save image to file
202
* @param {string} filename - File name
203
* @param {string} extension - File extension
204
*/
205
save(filename, extension);
206
}
207
```
208
209
See complete usage examples and detailed documentation in the p5.js reference.