創建等軸測網格

Question

我正在嘗試創建一個等距網格，但我對數學不是很好，我試圖以奇數為條件，但它並沒有給我預期的結果

這是我想要得到的一個例子

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const cols = 8
const rows = 8

const PI = Math.PI
const TAU = PI * 2

const particles = []
const width = window.innerWidth
const height = window.innerHeight
const radius = 5
const offset =  width / cols

canvas.width = width
canvas.height = height

const init = () => {
  for (i = 0; i < rows; i++) {
    for (j = 0; j < cols; j++) {

      const x = j * offset
      const y = i * offset
      
      particles.push({
        x,
        y
      })
    }
  }
}

const update = () => {
  particles.forEach(particle => {
    ctx.beginPath()
    ctx.arc(particle.x, particle.y, radius, 0, TAU)
    ctx.fill()
    ctx.closePath()
  })

  window.requestAnimationFrame(update)
}

init()
window.requestAnimationFrame(update)```

Answer 1

讓我們定義點D之間的距離（也許是您的offset ）

您可以使所有行的 y 間距相等，它是D/2

X-spacing 是D*sqrt(3) ，x-shift 取決於行，對於偶數它是D*sqrt(3)/2 ，對於奇數它是 0。

代碼可能是這樣的：（我對 JS 不是很熟悉）

const SQ3 = Math.Sqrt(3)
const SQ32 = Math.Sqrt(3) / 2
...
const D = offset   

for (i = 0; i < rows; i++) {
   for (j = 0; j < cols; j++) {

     const y = i * D / 2
     const x = j * D * SQ3 + (1 - i % 2) * D * SQ32
  
  particles.push({
    x,
    y
  })
}