# Weird image glitch. p5.geolocation & CSS

**URL:** <https://discourse.processing.org/t/weird-image-glitch-p5-geolocation-css/3518>\
**Category:** Libraries\
**Created:** [September 13, 2018, 3:13pm UTC](https://discourse.processing.org/t/weird-image-glitch-p5-geolocation-css/3518 "2018-09-13T15:13:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![currymike](https://avatars.discourse-cdn.com/v4/letter/c/f08c70/32.png) [@currymike](https://discourse.processing.org/u/currymike)\
**Post date:** [September 13, 2018, 3:13pm UTC](https://discourse.processing.org/t/weird-image-glitch-p5-geolocation-css/3518/1 "2018-09-13T15:13:46Z")

</div>

I am using the p5.geolocation library to measure the distance between the app user and a trigger point location. As the user moves closer to the trigger point the blur effect on an image is adjusted, the closer they are the more in focus the image is. The image blur is controlled by adjusting the CSS blur filter through javascript. I have already tried the p5 blur filter and the rendering is too slow for mobile. I am getting a strange glitch in the image, see the photo below. As the image blur changes there are lines appearing across the image. Does anyone have an idea what is causing it?

 ![Image_glitch](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8c171ede4dc293d632d762509092b9221eb1eab8.png)

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [September 13, 2018, 4:36pm UTC](https://discourse.processing.org/t/weird-image-glitch-p5-geolocation-css/3518/2 "2018-09-13T16:36:52Z")

</div>

Can I ask you to provide enough code for me to reproduce the bug?

---

<div class="post-metadata">

**Author:** ![currymike](https://avatars.discourse-cdn.com/v4/letter/c/f08c70/32.png) [@currymike](https://discourse.processing.org/u/currymike)\
**Post date:** [September 13, 2018, 8:51pm UTC](https://discourse.processing.org/t/weird-image-glitch-p5-geolocation-css/3518/3 "2018-09-13T20:51:02Z")

</div>

```auto
//Create a geoFenceCircle 
fence = new geoFenceCircle(triggerPoint.latitude, triggerPoint.longitude, 0.009, watchOptions);

//Use the distance from the geoFenceCircle to map the blur.
blurFactor = map(fence.distance,0,0.12,0,40,true);

//Select the image and adjust the blur filter.
var gameImage = document.querySelector(".game-image");
  gameImage.style.filter = "blur(" + blurFactor + "px)";

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [September 14, 2018, 2:59am UTC](https://discourse.processing.org/t/weird-image-glitch-p5-geolocation-css/3518/4 "2018-09-14T02:59:41Z")

</div>

You can decouple your location events from the blurring so to isolate the glitch effect and to reproduce it more easily. You could use the mouse event and the map function to simulate the factors that drive the blurring effect. Notice is important to provide full code for this type of issues as well as browser version and OS.

Did you try any other browsers by any chance? Do you see the problem there as well?

Kf