如何在p5.js中循环绘制带间距的对角线排列正方形（9个）

核心逻辑很直接：对角线排列本质是x和y坐标按固定步长同步偏移，和圆形的偏移逻辑一致，区别仅在于正方形需要明确绘制基准点（比如左上角），再通过循环重复绘制即可。

关键步骤 #

• 定义基础参数：正方形边长、间距、起始坐标
• 编写单个正方形的绘制函数
• 循环9次，每次计算当前正方形的位置并调用绘制函数

代码示例（Python Turtle） #

import turtle

# 配置参数
square_side = 50
spacing = 10
start_x = -140
start_y = 140

# 以左上角为基准点绘制单个正方形
def draw_square(top_left_x, top_left_y, side):
    turtle.penup()
    turtle.goto(top_left_x, top_left_y)
    turtle.pendown()
    # 绘制四条边
    for _ in range(4):
        turtle.forward(side)
        turtle.right(90)
    turtle.penup()

# 循环绘制9个对角线排列的正方形
for idx in range(9):
    # 计算当前正方形坐标：x右移、y下移，步长=边长+间距
    curr_x = start_x + idx * (square_side + spacing)
    curr_y = start_y - idx * (square_side + spacing)
    draw_square(curr_x, curr_y, square_side)

turtle.hideturtle()
turtle.done()

代码说明 #

• 选左上角作为基准点是适配turtle默认绘图方向，若想以中心为基准，只需把goto的位置调整为(curr_x - square_side/2, curr_y + square_side/2)
• 偏移步长square_side + spacing确保了两个正方形边缘之间的间距为spacing
• 对比你之前的圆形代码，核心偏移逻辑完全一致，只是把绘制圆形的circle()方法换成了正方形的四边绘制逻辑

另一种实现（Pygame） #

如果用Pygame，逻辑相同，仅绘制方式换成矩形绘制：

import pygame

pygame.init()
screen = pygame.display.set_mode((600, 600))
clock = pygame.time.Clock()

square_side = 50
spacing = 10
start_x, start_y = 50, 50

running = True
while running:
    screen.fill((255,255,255))
    for idx in range(9):
        curr_x = start_x + idx * (square_side + spacing)
        curr_y = start_y + idx * (square_side + spacing)
        pygame.draw.rect(screen, (0,0,0), (curr_x, curr_y, square_side, square_side), 2)
    
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
    pygame.display.flip()
    clock.tick(60)

pygame.quit()

内容的提问来源于stack exchange，提问作者Lillie Coussee