Hi, I want to replicate this image. I do not imagine how to specify the “radio”. Does anyone have any ideas?
Thanks!
var n = 17
var radio = 6
function draw() {
var ctx = document.getElementById(‘canvas’).getContext(‘2d’);
for (var i = 0; i < n; i++) {
for (var j = 0; j < n; j++) {
ctx.fillStyle = “black”;
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i * 25, radio, 0, Math.PI * 2, true);
ctx.fill();
}
}
}
draw();
Are you trying to just get a grid of circles to appear, or are you also trying to get the size of the circles towards the middle to get larger?
The second, solve it with the module of the distance to the center. Thanks!.
Gotcha! This is a fun little problem 
I only spent a few minutes on it and it isn’t even remotely done, but it may help get you thinking in a different direction:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas Grid</title>
<style>
body {
background-color: #FFF;
padding: 100px;
}
#myCanvas {
border: 10px solid #333;
}
</style>
</head>
<body>
<div id="container">
<canvas id="myCanvas" width=425 height=425>
</canvas>
</div>
<script>
var n = 17;
var radius = 1;
var x_adjust = 0;
var y_adjust = 0;
function draw() {
var ctx = document.getElementById("myCanvas").getContext("2d");
for (var i = 0; i < n; i++) {
if (i < (n / 2)) {
x_adjust++;
} else {
x_adjust--;
}
console.log(x_adjust);
for (var j = 0; j < n; j++) {
if (j < (n / 2)) {
y_adjust++;
} else {
y_adjust--;
}
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i * 25, radius + x_adjust, 0, Math.PI * 2, true);
ctx.fill();
}
}
}
draw();
</script>
</body>
</html>I think this comes close:
The code is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas Grid</title>
<style>
body {
background-color: #FFF;
padding: 100px;
}
#myCanvas {
border: 10px solid #333;
}
</style>
</head>
<body>
<div id="container">
<canvas id="myCanvas" width=440 height=440>
</canvas>
</div>
<script>
var rows = 17;
var columns = 17;
var radius = 1;
var x_adjust = 0;
var y_adjust = 0;
var targetXY = { x:220, y:220 };
var maxDistance = getDistance(0, 0, 440, 440);
function draw() {
var ctx = document.getElementById("myCanvas").getContext("2d");
for (var y = 0; y < columns; y++) {
for (var x = 0; x < rows; x++) {
var xPos = 20 + x * 25;
var yPos = 20 + y * 25;
radius = intensity(
{
x: xPos,
y: yPos
},
{
x: targetXY.x,
y: targetXY.y
}
);
console.log(x + " " + y);
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(xPos, yPos, radius, 0, Math.PI * 2, true);
ctx.fill();
}
}
}
function intensity(current, target) {
var distance = getDistance(current.x, current.y, target.x, target.y);
var size = 5 * (100 / (distance + 50));
if (size < 1) {
return 1;
} else {
return size;
}
console.log(size);
return size;
}
// pythagorean theorem
function getDistance(xA, yA, xB, yB) {
var xDiff = xA - xB;
var yDiff = yA - yB;
return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
}
draw();
</script>
</body>
</html>