선형 변환: 이미지 회전·크기 조절

회전 행렬 (각도 θ):
R(θ) = [[cos(θ), -sin(θ)],
        [sin(θ),  cos(θ)]]

크기 행렬 (sx, sy):
S = [[sx, 0],
     [0,  sy]]

이동은 일반 행렬로 안 됨 → 동차 좌표 (3x3) 사용

import numpy as np
import matplotlib.pyplot as plt

# 점 (1, 0)을 90도 회전
def rotate_2d(point, angle_rad):
    R = np.array([
        [np.cos(angle_rad), -np.sin(angle_rad)],
        [np.sin(angle_rad),  np.cos(angle_rad)],
    ])
    return R @ point


point = np.array([1, 0])

# 0, 30, 60, 90도 회전
for angle_deg in [0, 30, 60, 90]:
    angle_rad = np.deg2rad(angle_deg)
    rotated = rotate_2d(point, angle_rad)
    print(f"{angle_deg}°: {rotated}")
# 0°:  [1.   0.  ]
# 30°: [0.87 0.5 ]
# 60°: [0.5  0.87]
# 90°: [0.   1.  ]

def scale_2d(point, sx, sy):
    S = np.array([
        [sx, 0],
        [0, sy],
    ])
    return S @ point


point = np.array([2, 3])

print(scale_2d(point, 2, 1))    # [4 3] (가로 2배)
print(scale_2d(point, 1, 0.5))  # [2 1.5] (세로 절반)
print(scale_2d(point, 2, 2))    # [4 6] (전체 2배)

# 2D 점을 3D 벡터 [x, y, 1]로 표현
# 3x3 행렬로 회전+크기+이동 한 번에

def transform_2d(point, scale=1, angle_deg=0, tx=0, ty=0):
    """동차 좌표 변환"""
    p = np.array([point[0], point[1], 1])

    angle = np.deg2rad(angle_deg)
    M = np.array([
        [scale * np.cos(angle), -scale * np.sin(angle), tx],
        [scale * np.sin(angle),  scale * np.cos(angle), ty],
        [0, 0, 1],
    ])
    result = M @ p
    return result[:2]


# 점 (1, 0)을 45도 회전 + 2배 확대 + (5, 3) 이동
result = transform_2d([1, 0], scale=2, angle_deg=45, tx=5, ty=3)
print(result)  # [6.41 4.41]

import matplotlib.pyplot as plt

# 사각형 (4 점)
square = np.array([
    [0, 0],
    [1, 0],
    [1, 1],
    [0, 1],
    [0, 0],  # 닫기
])


def rotate_shape(shape, angle_deg):
    angle = np.deg2rad(angle_deg)
    R = np.array([
        [np.cos(angle), -np.sin(angle)],
        [np.sin(angle),  np.cos(angle)],
    ])
    return shape @ R.T  # 행 벡터에 R.T 곱셈


fig, ax = plt.subplots()
for angle in [0, 30, 60, 90]:
    rotated = rotate_shape(square, angle)
    ax.plot(rotated[:, 0], rotated[:, 1], label=f"{angle}°")

ax.set_aspect('equal')
ax.legend()
ax.grid(True)
plt.show()

import numpy as np

# Z축 회전
def rotate_3d_z(point, angle_deg):
    angle = np.deg2rad(angle_deg)
    R = np.array([
        [np.cos(angle), -np.sin(angle), 0],
        [np.sin(angle),  np.cos(angle), 0],
        [0, 0, 1],
    ])
    return R @ point


# Y축 회전
def rotate_3d_y(point, angle_deg):
    angle = np.deg2rad(angle_deg)
    R = np.array([
        [ np.cos(angle), 0, np.sin(angle)],
        [0, 1, 0],
        [-np.sin(angle), 0, np.cos(angle)],
    ])
    return R @ point


# X축 회전
def rotate_3d_x(point, angle_deg):
    angle = np.deg2rad(angle_deg)
    R = np.array([
        [1, 0, 0],
        [0, np.cos(angle), -np.sin(angle)],
        [0, np.sin(angle),  np.cos(angle)],
    ])
    return R @ point


# 큐브의 한 점
point = np.array([1, 0, 0])

# 90도씩 회전
print(rotate_3d_z(point, 90))  # [0 1 0]
print(rotate_3d_y(point, 90))  # [0 0 -1]

# 회전 후 이동 vs 이동 후 회전 — 결과 다름
import numpy as np

def make_rotate(angle_deg):
    a = np.deg2rad(angle_deg)
    return np.array([
        [np.cos(a), -np.sin(a), 0],
        [np.sin(a),  np.cos(a), 0],
        [0, 0, 1],
    ])

def make_translate(tx, ty):
    return np.array([
        [1, 0, tx],
        [0, 1, ty],
        [0, 0,  1],
    ])


R = make_rotate(90)
T = make_translate(5, 0)

# 합성 1: 이동 후 회전 (R 다음 T)
M1 = R @ T  # 점 → T → R
# 점 (1, 0) → (6, 0) (이동) → (0, 6) (회전)

# 합성 2: 회전 후 이동
M2 = T @ R  # 점 → R → T
# 점 (1, 0) → (0, 1) (회전) → (5, 1) (이동)

p = np.array([1, 0, 1])
print(M1 @ p)  # [0 6 1]
print(M2 @ p)  # [5 1 1]
# 결과 다름 — 행렬 곱은 비가환


# 변환 N개를 행렬 1개로 합성 가능 → 매 프레임 효율

// CSS matrix() = 2D 변환 행렬 (이동 포함)
// matrix(a, b, c, d, e, f) =
//   [[a, c, e],
//    [b, d, f],
//    [0, 0, 1]]

// CSS transform: rotate(45deg) scale(2) translate(100px, 50px)
// 같은 변환을 matrix()로 표현
const angle = 45 * Math.PI / 180;
const cos45 = Math.cos(angle);
const sin45 = Math.sin(angle);
const scale = 2;
const tx = 100, ty = 50;

const matrixCss = `matrix(
  ${cos45 * scale}, ${sin45 * scale},
  ${-sin45 * scale}, ${cos45 * scale},
  ${tx}, ${ty}
)`;

document.getElementById('el').style.transform = matrixCss;