Skip to content
Related Articles

Related Articles

p5.js Image mask() Method
  • Last Updated : 23 Sep, 2020

The mask() method of p5.Image in p5.js library is used to apply the given mask to the image. This is done by using the alpha channel of the mask image as the alpha channel of this image.

Syntax:

mask( srcImage )

Parameters: This function accepts a single parameter as mentioned above and described below.

  • srcImage: It is a p5.Image that would be used as the mask to be applied.

The following libraries are included in the “head” section of the HTML page while implementing the following example.

<script src=”p5.Image.js”></script>
<script src=”p5.min.js”></script>



Example: The example below illustrates the mask() method in p5.js library.

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

function preload() {
    img_orig =
      loadImage("sample-image.png");
    img_mask =
      loadImage("image-mask.png");
}
  
function setup() {
    createCanvas(500, 500);
    textSize(20);
  
    btnBlur =
      createButton("Add a mask to the image");
    btnBlur.position(30, 420);
    btnBlur.mousePressed(applyMask);
}
  
function draw() {
    clear();
  
    text("Click on the button to add " +
         "a mask to the image", 20, 20);
    text('Image:', 20, 60);
    image(img_orig, 20, 80, 200, 100);
  
    text("Mask:", 20, 220);
    image(img_mask, 20, 220, 180, 180);
}
  
function applyMask()
{
    // Apply the given mask to the image
    img_orig.mask(img_mask);
}

chevron_right


Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Image/mask

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :