function
preload() {
img_orig =
loadImage(
"sample-image.png"
);
img_filter =
loadImage(
"sample-image.png"
);
}
function
setup() {
createCanvas(500, 400);
textSize(20);
btnBlur = createButton(
"Add Blur filter"
);
btnBlur.position(30, 360);
btnBlur.mousePressed(applyBlur);
btnInvert = createButton(
"Add Invert filter"
);
btnInvert.position(160, 360);
btnInvert.mousePressed(applyInvert);
}
function
draw() {
clear();
text(
"Click on the button to add a "
+
"filter to the image"
, 20, 20);
text(
"Original Image:"
, 20, 60);
image(img_orig, 20, 80, 200, 100);
text(
"Filter Image:"
, 20, 220);
image(img_filter, 20, 240, 200, 100);
}
function
applyBlur() {
img_filter.filter(BLUR, 10);
}
function
applyInvert() {
img_filter.filter(INVERT);
}