Creating a 3d rendering in python with a camera. objects get progressively deformed toward the edge of the screen

Question

So basically, the projection matrix works, as I move the camera arround and look at the cube, there's no problem. But, When I look to the side and the cube should be at the side of the screen, it gets deformed and scaled back.

From what I heard, the projection matrix is supposed to be:

1. translate (points - camera)

2. rotate by - the angles of the camera so that z is foward. x is right and y is up. You now have points in a 3d coordinate system of the cameras.

3. divide x/z and y/z so that points twice as far from you become twice closer to each other.

Step one and step two is taken into account into the projection matrix Step 3 is the perspective.

But as I said, it gets fucked when the object isn't at the middle of the screen

I tried posting images, but I don'T have the reputation, when I posted links, it says it's spam. I AM forced to upload the code as a whole

https://jsfiddle.net/PoutineErable/w3z0mtes/69/ This is a version of the code that I modified from a youtube video (in js) that works (asdw) and (ijkl) for player and mouse movement.

I tried for arround 4 days to get it working, Today, I took the second video's code in js and made some light modification that allows movement

using wasd for movement and ijkl for mouse movement, and it works.

Then, I redid my code using the current model.

And Even more stripped down if you want, this has no input, just renders an image. Gotta input the view angle

import numpy as np
import math as m
import pygame, sys, random
pygame.init() #Needed to get pygame initiated

print("\n"*20+"-"*11,"start of program","-"*11)
#---------------------------------------------------------Start of math construct
#defining constants
PI = m.pi
WIDTH , HEIGHT = 600, 1000
fov = 70 * PI/180

#initialising the player variables.
player_pos = np.array([0,0,-5])
camera_rot_y = PI/180 * float(input("what's the horizontal angle (degrees)?:"))
camera_rot_x = PI/180 * float(input("what's the vertical angle (degrees)?:"))
camera_rot_z = 0


#defining math functions
def a(x,y): # it's to put (0,0) at the center of the screen
    ''' (num,num) -> (num,num)
    takes a coordinates in cartesian and output the number in shitty 
    coordinates png style
    '''
    return(x + WIDTH/2,HEIGHT/2 - y)

def b(array):
    ''' (array or list) -> list
    takes an arrray corresponding to a coordinates in cartesian
    | output the coordinate in array form in a shitty png style'''
    return(a(array[0],array[1]))

def Rx(rot_x):  #The rotation matrix over the x axis
    z   = np.matrix([
    [ 1, 0, 0, 0],
    [ 0, m.cos(rot_x), m.sin(rot_x), 0],
    [ 0, -m.sin(rot_x), m.cos(rot_x), 0],
    [ 0, 0, 0, 1 ]
    ])
    return(z)

def Ry(rot_y):#The rotation matrix over the y axis
    z = np.matrix([
    [ m.cos(rot_y), 0,m.sin(rot_y), 0],
    [ 0, 1, 0, 0],
    [ -m.sin(rot_y), 0, m.cos(rot_y), 0],
    [ 0, 0, 0, 1 ],
    ])
    return(z)

def Rz(rot_z): #The rotation matrix over the z axis
    z = np.matrix([
    [ m.cos(rot_z), m.sin(rot_z), 0, 0],
    [- m.sin(rot_z), m.cos(rot_z), 0, 0],
    [ 0, 0, 1, 0],
    [ 0, 0, 0, 1 ]
    ])
    return(z)

#----------------------------------------------------------------------End of math construct.
#initialising the cube:
cube_ini = []

for i in [-1,1]:
    for j in [-1,1]:
        for k in [-1,1]:
            cube_ini.append([i,j,k,1])
cube = np.matrix(np.transpose(cube_ini))

#----------------------------------------------------pygame boiler plate part 2
screen = pygame.display.set_mode((WIDTH,HEIGHT))
pygame.display.set_caption("3d_renderer")
clock = pygame.time.Clock()

#-----------------------------------------------------------Start of animation code
while True:
    keys = pygame.key.get_pressed()
    for event in pygame.event.get():
        if event.type == pygame.QUIT or keys[pygame.K_ESCAPE]:
            pygame.quit()
            #print("The program finished running \n \n")
            sys.exit()


    #Creating the projection matrix
    translation_matrix = np.matrix([[ 1 , 0 , 0 , -player_pos[0]],
                          [ 0 , 1 , 0 , -player_pos[1]],
                          [ 0 , 0 , 1 , -player_pos[2]],
                          [ 0, 0, 0, 1 ]])
    rotation_matrix = np.dot(Ry(-camera_rot_y),Rz(-camera_rot_z))
    rotation_matrix = np.dot(Rx(-camera_rot_x),rotation_matrix)
    projection_matrix = np.dot(rotation_matrix,translation_matrix)


    #making the calculation for the projection of the cube
    pos_cam_proj = np.dot(projection_matrix,cube)
    pos_cam_perspective = np.zeros((8,2))
    for i in range(8):
        pos_cam_perspective[i,0] =  (0.5 * HEIGHT * pos_cam_proj[0,i] * (1/m.tan(fov))) /pos_cam_proj[2,i] 
        pos_cam_perspective[i,1] =  (0.5 * HEIGHT * pos_cam_proj[1,i] * (1/m.tan(fov))) /pos_cam_proj[2,i] 

    cube_screen = np.array(pos_cam_perspective)

    #-----------------------drawing the lines
    screen.fill("Black")
    for i in range(8):
        for j in range(i,8): #
            pygame.draw.line(screen, "white", b(cube_screen[i][0:2]),b(cube_screen[j][0:2]))


    #---final two boiler plate lines
    pygame.display.update()
    clock.tick(30)
#------------------------------------------------------------End of animation code

The snippet of the code of importance:

#Creating the projection matrix
translation_matrix = np.matrix([[ 1 , 0 , 0 , -player_pos[0]],
                      [ 0 , 1 , 0 , -player_pos[1]],
                      [ 0 , 0 , 1 , -player_pos[2]],
                      [ 0, 0, 0, 1 ]])
rotation_matrix = np.dot(Ry(-camera_rot_y),Rz(-camera_rot_z))
rotation_matrix = np.dot(Rx(-camera_rot_x),rotation_matrix)
projection_matrix = np.dot(rotation_matrix,translation_matrix)


#making the calculation for the projection of the cube
pos_cam_proj = np.dot(projection_matrix,cube)
pos_cam_perspective = np.zeros((8,2))
for i in range(8):
    pos_cam_perspective[i,0] =  (0.5 * HEIGHT * pos_cam_proj[0,i] * (1/m.tan(fov))) /pos_cam_proj[2,i] 
    pos_cam_perspective[i,1] =  (0.5 * HEIGHT * pos_cam_proj[1,i] * (1/m.tan(fov))) /pos_cam_proj[2,i] 

cube_screen = np.array(pos_cam_perspective)

#-----------------------drawing the lines
screen.fill("Black")
for i in range(8):
    for j in range(i,8): #
        pygame.draw.line(screen, "white", b(cube_screen[i][0:2]),b(cube_screen[j][0:2]))

Answer 1

Your code is correct. However, you need to translate the cube instead of rotating it. Just try:

fov = 45 * PI/180
player_pos = np.array([0,0,-4], dtype=np.float32)    # <-- dtype=np.float32
#camera_rot_y = PI/180 * float(input("what's the horizontal angle (degrees)?:"))
#camera_rot_x = PI/180 * float(input("what's the vertical angle (degrees)?:"))
camera_rot_y = 0
camera_rot_x = 0
camera_rot_z = 0

# [...]

angle = 0
while True:
    player_pos[0] = m.sin(m.radians(angle)) * 1.5
    angle += 2

    # [...]

Answer 2

Yes, My code did work. The problem was that I had the wrong fov and I was way too close to the cube object.

fov = 60 * PI/180
# [ ... ]
player_pos = np.array([0,0,-10])

# [ ... ]

pos_cam_perspective[i,0] =  0.5 * (1/m.tan(fov/2)) * HEIGHT * pos_cam_proj[0,i]  /pos_cam_proj[2,i] 
pos_cam_perspective[i,1] =  0.5 * (1/m.tan(fov/2)) * HEIGHT  * pos_cam_proj[1,i]  /pos_cam_proj[2,i]