# Adding an image as "mask" to existing code

**URL:** <https://discourse.processing.org/t/adding-an-image-as-mask-to-existing-code/34824>\
**Category:** Coding Questions\
**Created:** [January 24, 2022, 3:33pm UTC](https://discourse.processing.org/t/adding-an-image-as-mask-to-existing-code/34824 "2022-01-24T15:33:06Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![marieeiko](https://avatars.discourse-cdn.com/v4/letter/m/e8c25b/32.png) [@marieeiko](https://discourse.processing.org/u/marieeiko)\
**Post date:** [January 24, 2022, 3:33pm UTC](https://discourse.processing.org/t/adding-an-image-as-mask-to-existing-code/34824/1 "2022-01-24T15:33:06Z")

</div>

Hello !

I’m having issues to add in image as background : I created a light on a sphere, following my mouse, but I would like it to be all over an image background, not on the sphere as in P5js references…  
How can I add a light spectrum over an image ?

Thanks in advance,  
have a good day 🙂

 ![Capture d’écran 2022-01-24 à 16.25.55](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6d4cccb2de2d0116ce58f450aa43346637afefd7.jpeg)

```auto
var img;
function setup () {
  createCanvas(500,500,WEBGL);
}
function draw () {
  background (0,0,0);
  let locX = mouseX - width / 2;
  let locY = mouseY - height / 2;
  
  ambientLight(40);
  spotLight(255, 0, 0, locX, locY, 500, 0, 0, -1, Math.PI / 10);
  st
![Capture d’écran 2022-01-24 à 16.25.47|690x431](upload://4foJKpts9eWDa4OI3wtQHMVIICZ.jpeg)
roke(0);
  sphere(100);
}

```