I'd like to blur the edges of holes created by mouse clicks. This is my example. Now I've used g.js to create differences of two shapes (circles and a rectangle), and then I'd like to blur the edges of these holes on the rectangle. I've tried fliter(BLUR), but the effect was not ideal because it will blur both the holes and the maps under it. I just want to blur the rectangle with holes. Is there any way to do that?
var e2 = [];
var light = [];
var img;
var pg;
var pgPos = [];
function preload() {
img = loadImage("https://2328a0b8-e236-4076-9848-a3275ab1c3e3.id.repl.co/map%20test.jpg");
}
function setup() {
createCanvas(600, 600);
background(100, 100, 100);
pg = createGraphics(600, 600);
}
function mouseClicked() {
push();
let e = g.ellipse({ x: mouseX, y: mouseY }, 100, 100);
e2.push(e);
pop();
light.push(createVector(mouseX, mouseY));
pgPos.push(createVector(mouseX, mouseY));
}
function draw() {
image(img, 0, 0);
push();
var e1 = g.rect({ x: width / 2, y: height / 2 }, width, height);
let pathD = g.compound(e1, e2, 'difference');
pathD.fill = "rgb(30, 30, 30)";
pathD.draw(drawingContext);
pop();
for (i = 0; i < light.length; i++) {
noStroke();
fill(255, 255, 102);
circle(light[i].x, light[i].y, 30);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdn.rawgit.com/nodebox/g.js/master/dist/g.min.js"></script>The p5.js filter() function seems to apply to the current content of the canvas (and is also very slow). However you can use the native CanvasRenderingContext2D.filter property to achieve the effect you want:
drawingContext.filter = 'blur(20px)';
// draw things you want to be blurred
drawingContext.filter = 'none';
var e2 = [];
var light = [];
var img;
var pg;
var pgPos = [];
function preload() {
img = loadImage("https://2328a0b8-e236-4076-9848-a3275ab1c3e3.id.repl.co/map%20test.jpg");
}
function setup() {
createCanvas(600, 600);
background(100, 100, 100);
pg = createGraphics(600, 600);
}
function mouseClicked() {
push();
let e = g.ellipse({ x: mouseX, y: mouseY }, 100, 100);
e2.push(e);
pop();
light.push(createVector(mouseX, mouseY));
pgPos.push(createVector(mouseX, mouseY));
}
function draw() {
image(img, 0, 0);
push();
drawingContext.filter = 'blur(20px)';
var e1 = g.rect({ x: width / 2, y: height / 2 }, width, height);
let pathD = g.compound(e1, e2, 'difference');
pathD.fill = "rgb(30, 30, 30)";
pathD.draw(drawingContext);
drawingContext.filter = 'none';
pop();
for (i = 0; i < light.length; i++) {
noStroke();
fill(255, 255, 102);
circle(light[i].x, light[i].y, 30);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdn.rawgit.com/nodebox/g.js/master/dist/g.min.js"></script>