Built with blockbuilder.org
forked from tomshanley's block: matrix inside circle
forked from tomshanley's block: matrix inside circle
license: mit |
Built with blockbuilder.org
forked from tomshanley's block: matrix inside circle
forked from tomshanley's block: matrix inside circle
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { | |
margin: 50; | |
} | |
circle { | |
fill: none; | |
stroke: black; | |
stroke-width: 2px; | |
} | |
rect { | |
stroke: black; | |
stroke-width: 1px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<div id="count"></div> | |
<script> | |
console.clear() | |
let radius = 200 | |
let diameter = radius * 2 | |
let margin = 20 | |
let squareWidth = 18 | |
let n = Math.floor(diameter / squareWidth) | |
let offset = (diameter - (n * squareWidth)) / 2 | |
let width = diameter | |
let height = width | |
let numberOfSquaresInsideCircle = 0 | |
// let percent = 40 | |
let svg = d3.select("#chart").append("svg") | |
.attr("width", width + (margin * 2)) | |
.attr("height", height + (margin * 2)) | |
let g = svg.append("g") | |
.attr("transform", "translate(" + margin + ", " + margin + ")") | |
let circle = g.append("circle") | |
.attr("cx", radius) | |
.attr("cy", radius) | |
.attr("r", radius) | |
.style("fill", "grey") | |
for (var i = 0; i < n; i++) { | |
for (var j = 0; j < n; j++) { | |
let x = (j * squareWidth) + offset | |
let y = (i * squareWidth) + offset | |
if(isSquareOutsideCircle(x, y, squareWidth, radius)) { | |
} else { | |
numberOfSquaresInsideCircle = numberOfSquaresInsideCircle + 1 | |
g.append("rect") | |
.attr("x", x) | |
.attr("y", y) | |
.attr("width", squareWidth) | |
.attr("height", squareWidth) | |
.style("fill", "white") | |
.attr("id", "cell-" + i + "-" + j) | |
} | |
} | |
} | |
/*let squares = d3.selectAll("rect") | |
.style("fill", function(d, i){ | |
return ((numberOfSquaresInsideCircle - i)/numberOfSquaresInsideCircle) * 100 < percent | |
? "orange" | |
: "white" | |
})*/ | |
d3.select("#count") | |
.text(numberOfSquaresInsideCircle) | |
function isSquareOutsideCircle(squareX, squareY, squareW, circleR) { | |
if (isPointOutsideCircle(squareX, squareY, circleR)) { | |
return true | |
} else if (isPointOutsideCircle((squareX + squareW), squareY, circleR)) { | |
return true | |
} else if (isPointOutsideCircle(squareX, (squareY + squareW), circleR)) { | |
return true | |
} else if (isPointOutsideCircle((squareX + squareW), (squareY + squareW), circleR)) { | |
return true | |
} else { | |
return false | |
} | |
} | |
function isPointOutsideCircle(x, y, r) { | |
return hypothenuese(Math.abs(r - x), Math.abs(r - y)) > r ? true : false | |
} | |
function hypothenuese(side1, side2) { | |
return Math.sqrt((side1 * side1) + (side2 * side2)) | |
} | |
</script> | |
</body> |