How to make an image the face of a prism in Pygame

Question

I want to add images to the rectangular faces of the prism, but I don't know what to do. I want it so that the images are the faces of the prism and you can see it being rotated so that it’s on a slant.

This is what I have so far:

import pygame # Import module
from math import *
pygame.init() # Initialise it
WINDOW_SIZE = 800
ROTATE_SPEED = 0.02
SCREEN = pygame.display.set_mode((WINDOW_SIZE, WINDOW_SIZE)) # Create a screen
clock = pygame.time.Clock() # Add clock

projection_matrix = [[1, 0, 0],
                     [0, 1, 0],
                     [0, 0, 0]]

prism_points = [n for n in range(6)] # Creating points of prism
prism_points[0] = [[-2], [-1], [2]]
prism_points[1] = [[2],  [-1], [2]]
prism_points[2] = [[0],  [2],  [2]]
prism_points[3] = [[-2], [-1], [-2]]
prism_points[4] = [[2],  [-1], [-2]]
prism_points[5] = [[0],  [2],  [-2]]

def multiply_m(a, b): # Multiplication of matrices
    a_rows = len(a)
    a_cols = len(a[0])

    b_rows = len(b)
    b_cols = len(b[0])
    # Dot product matrix dimensions = a_rows x b_cols
    product = [[0 for _ in range(b_cols)] for _ in range(a_rows)]

    if a_cols == b_rows:
        for i in range(a_rows):
            for j in range(b_cols):
                for k in range(b_rows):
                    product[i][j] += a[i][k] * b[k][j]
    else:
        print("INCOMPATIBLE MATRIX SIZES") # Dimension error
    return product

def connect_points(i, j, points):
    pygame.draw.line(SCREEN, (255, 255, 255), (points[i][0], points[i][1]), (points[j][0], points[j][1])) # Connecting points of the vertices

# Main loop
scale = 100
angle_x = angle_y = angle_z = 0 # Starting angles
while True:
    clock.tick(60)
    SCREEN.fill ((0, 0, 0))

    # Rotation matrices
    rotation_x = [[1, 0, 0],
                    [0, cos(angle_x), -sin(angle_x)],
                    [0, sin(angle_x), cos(angle_x)]]

    rotation_y = [[cos(angle_y), 0, sin(angle_y)],
                    [0, 1, 0],
                    [-sin(angle_y), 0, cos(angle_y)]]

    rotation_z = [[cos(angle_z), -sin(angle_z), 0],
                    [sin(angle_z), cos(angle_z), 0],
                    [0, 0, 1]]

    points = [0 for _ in range(len(prism_points))]
    i = 0
    for point in prism_points:
        rotate_x = multiply_m(rotation_x, point)
        rotate_y = multiply_m(rotation_y, rotate_x)
        rotate_z = multiply_m(rotation_z, rotate_y)
        point_2d = multiply_m(projection_matrix, rotate_z)

        x = (point_2d[0][0] * scale) + WINDOW_SIZE/2
        y = (point_2d[1][0] * scale) + WINDOW_SIZE/2

        points[i] = (x, y)
        i += 1

        pygame.draw.circle(SCREEN, (255, 0, 0), (x, y), 5)

    connect_points(0, 1, points)
    connect_points(0, 2, points)
    connect_points(0, 3, points)
    connect_points(1, 2, points)
    connect_points(1, 4, points)
    connect_points(2, 5, points)
    connect_points(3, 4, points)
    connect_points(3, 5, points)
    connect_points(4, 5, points)

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            exit()
        keys = pygame.key.get_pressed()
        if keys[pygame.K_r]:
            angle_y = angle_x = angle_z = 0
        if keys[pygame.K_a]:
            angle_y += ROTATE_SPEED
        if keys[pygame.K_d]:
            angle_y -= ROTATE_SPEED
        if keys[pygame.K_w]:
            angle_x += ROTATE_SPEED
        if keys[pygame.K_s]:
            angle_x -= ROTATE_SPEED
        if keys[pygame.K_q]:
            angle_z -= ROTATE_SPEED
        if keys[pygame.K_e]:
            angle_z += ROTATE_SPEED
    pygame.display.update()

All I know is how to load the image, and I don't know what to do after that. I want to line up the images with the corners of the rectangle.

*"I don't know what to do"* is not an appropriate question. You need to be more specific. What have you tried so far, and where are you struggling? — Rabbid76, Jul 30 '23 at 12:14
You may find some inspiration here: [Does PyGame do 3d?](https://stackoverflow.com/questions/4865636/does-pygame-do-3d) or here: [How do I fix wall warping in my raycaster?](https://stackoverflow.com/questions/74060836/how-do-i-fix-wall-warping-in-my-raycaster) — Rabbid76, Jul 30 '23 at 12:36

score -2 · Answer 1 · answered Jul 30 '23 at 13:34

To add images to the rectangular faces of the prism and rotate it in 3D space, you can follow these steps:

Load the images you want to use for each face of the prism. Map the images to the corresponding faces of the prism based on their vertices. Update the drawing code to use the mapped images for each face. Here's the modified code with explanations for each step:

import pygame
from math import *

# ... Your existing code ...

# Step 1: Load the images for each face of the prism
image_front = pygame.image.load("front.jpg")
image_back = pygame.image.load("back.jpg")
image_left = pygame.image.load("left.jpg")
image_right = pygame.image.load("right.jpg")
image_top = pygame.image.load("top.jpg")
image_bottom = pygame.image.load("bottom.jpg")

# Step 2: Map the images to the corresponding faces of the prism
prism_faces = [
    {'vertices': [0, 1, 2], 'image': image_front},
    {'vertices': [3, 4, 5], 'image': image_back},
    {'vertices': [0, 1, 4, 3], 'image': image_left},
    {'vertices': [2, 1, 4, 5], 'image': image_right},
    {'vertices': [0, 2, 5, 3], 'image': image_top},
    {'vertices': [1, 2, 5, 4], 'image': image_bottom}
]

# ... Your existing code ...

# Step 3: Modify the drawing code to use the mapped images for each face
def draw_face(face, points):
    vertices = face['vertices']
    image = face['image']
    vertex_list = [points[i] for i in vertices]

    # Get the average position of the vertices to determine the center of the face
    center_x = sum([v[0] for v in vertex_list]) / len(vertex_list)
    center_y = sum([v[1] for v in vertex_list]) / len(vertex_list)

    # Calculate the angle of the face based on the orientation of the vertices
    angle = atan2(vertex_list[1][1] - vertex_list[0][1], vertex_list[1][0] - vertex_list[0][0])

    # Rotate the image based on the calculated angle
    rotated_image = pygame.transform.rotate(image, degrees(angle))

    # Calculate the position to blit the image on the screen
    x = center_x - rotated_image.get_width() / 2
    y = center_y - rotated_image.get_height() / 2

    SCREEN.blit(rotated_image, (x, y))

# ... Your existing code ...

# Inside the main loop, update the drawing part:
while True:
    # ... Your existing code ...

    # Clear the screen
    SCREEN.fill((0, 0, 0))

    # Draw the faces of the prism with mapped images
    for face in prism_faces:
        draw_face(face, points)

    # ... Your existing code ...

    pygame.display.update()

Make sure to replace "front.jpg", "back.jpg", "left.jpg", "right.jpg", "top.jpg", and "bottom.jpg" with the filenames of the images you want to use for each corresponding face of the prism. This code will apply the images to the faces of the prism and rotate the prism in 3D space while keeping the images oriented correctly on the faces.

How to make an image the face of a prism in Pygame

1 Answers1