JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

JavaScript

const moveAround = (centerX, centerY, startX, startY, angle) => {
		const a = angle * (Math.PI / 180)

		return {
			x: centerX + (startX - centerX) * Math.cos(a) - (startY - centerY) * Math.sin(a),
			y: centerY + (startY - centerY) * Math.cos(a) + (startX - centerX) * Math.sin(a),
		}
	}

const grid = (width, height, meter = .2, centerX = 0,
	centerY = 0, rotateCenterX = 0, rotateCenterY = 0,
	angle = 0, spacing = 1) => {
	
	let x, y
	const cx = centerX * meter * spacing
	const cy = centerY * meter * spacing
	const rx = rotateCenterX * meter * spacing
	const ry = rotateCenterY * meter * spacing

	return Array(width * height).fill(0).map((_, index) => {
		y = ~~(index / width)
		x = index - y * width

		const pos = moveAround(rx - cx, ry - cy,
			spacing * meter * (x - (width - 1) * 0.5),
			spacing * meter * (y - (height - 1) * 0.5),
			angle)

		return {
			x: pos.x + cx,
			y: pos.y + cy
		}
	}, width * height)
}

console.log(grid(8, 8))