Javascript draw figures

talk design
1

Hi, I want to replicate this image. I do not imagine how to specify the “radio”. Does anyone have any ideas?
Thanks!

circulos_progresivos
circulos_progresivos.jpg2048×1936 89 KB

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();

2

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?

3

The second, solve it with the module of the distance to the center. Thanks!.

4

Gotcha! This is a fun little problem :slight_smile:

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>
5

I think this comes close:

image
image.png904×902 20 KB

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>