Hello, I am interested in creating an effect where two circles change color when they overlap. Specifically, I would like the overlapped section to become white to represent sets.
var canvas = d3.select("canvas"),
context = canvas.node().getContext("2d"),
width = canvas.property("width"),
height = canvas.property("height"),
radius = 32;
var circles = d3.range(4).map(function(i) {
return {
index: i,
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
render();
canvas.call(d3.drag()
.subject(dragsubject)
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
.on("start.render drag.render end.render", render));
function render() {
context.clearRect(0, 0, width, height);
for (var i = 0, n = circles.length, circle; i < n; ++i) {
circle = circles[i];
context.beginPath();
context.moveTo(circle.x + radius, circle.y);
context.arc(circle.x, circle.y, radius, 0, 2 * Math.PI);
context.fillStyle = color(circle.index);
context.fill();
if (circle.active) {
context.lineWidth = 2;
context.stroke();
}
}
}
function dragsubject() {
for (var i = circles.length - 1, circle, x, y; i >= 0; --i) {
circle = circles[i];
x = circle.x - d3.event.x;
y = circle.y - d3.event.y;
if (x * x + y * y < radius * radius) return circle;
}
}
function dragstarted() {
circles.splice(circles.indexOf(d3.event.subject), 1);
circles.push(d3.event.subject);
d3.event.subject.active = true;
}
function dragged() {
d3.event.subject.x = d3.event.x;
d3.event.subject.y = d3.event.y;
}
function dragended() {
d3.event.subject.active = false;
}<canvas width="800" height="500"></canvas>
<script src="//d3js.org/d3.v4.min.js"></script>Ideally, I want a solution that allows me to change the color of the overlapping section to another color, representing the intersection between two sets.
Thank you for your help
Edit: Some updates have been made. However, I have only managed to color static elements instead of moving ones.
var x1 = 100,
y1 = 100,
x2 = 150,
y2 = 150,
r = 70;
var svg = d3.select('svg')
.append('svg')
.attr('width', 500)
.attr('height', 500);
svg.append('circle')
.attr('cx', x1)
.attr('cy', y1)
.attr('r', r)
.style('fill', 'steelblue')
.style("fill-opacity",0.5)
.style("stroke","black");
...
function intersection(x0, y0, r0, x1, y1, r1) {
...
return [xi, xi_prime, yi, yi_prime];
}<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de9becdbea3b8a3be">[email protected]</a>" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<svg width="500" height="500"></svg>Please note that the above code works for static elements.
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 32;
var circles = d3.range(4).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
...
<svg width="500" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>This code snippet showcases my moving circles, and I am looking to add the aforementioned effect on them as well.
Is there any way to combine the two codes to achieve this effect?
Thank you once again