Media Art ProgrammingWeek 08 · Midterm Handout

p5.js / Media Art Programming

중간고사 안내

1~7주차 P5.js 기초 범위를 정리하고 중간고사 응시 방식, 제출물, 핵심 개념 체크리스트를 안내합니다.

WEEK 08 MIDTERM P5.JS MEDIA ART

중간고사 안내

시험 개요
항목 내용
시험명 중간고사
범위 1~7주차 전체
시험 일시 8주차 수업 시간
시험 시간 1시간 20분 (80분)
시험 방식 재택 시험 (각자 집에서 응시)
배점 전체 성적의 20%

시험 방식


제출 방법

제출물: zip 파일 1개

다음 파일들을 하나의 zip 파일로 묶어 LMS에 제출합니다.

midterm_홍길동.zip
├── urls.txt          ← 문제별 P5.js Public URL 목록
├── problem1.png      ← 1번 코드 스크린샷
├── problem2.png      ← 2번 코드 스크린샷
├── problem3.png      ← 3번 코드 스크린샷
├── problem4.png      ← 4번 코드 스크린샷
├── problem5.png      ← 5번 코드 스크린샷
└── problem6.png      ← 6번 코드 스크린샷

URL 또는 스크린샷이 누락된 문제는 채점하지 않습니다.

urls.txt 작성법

메모장이나 텍스트 편집기에서 아래 형식으로 작성합니다.

문제1: https://editor.p5js.org/student/sketches/xxxxx
문제2: https://editor.p5js.org/student/sketches/xxxxx
문제3: https://editor.p5js.org/student/sketches/xxxxx
문제4: https://editor.p5js.org/student/sketches/xxxxx
문제5: https://editor.p5js.org/student/sketches/xxxxx
문제6: https://editor.p5js.org/student/sketches/xxxxx

P5.js Public URL 만드는 법

  1. P5.js Web Editor에서 스케치 저장 (Ctrl+S / Cmd+S)
  2. 상단 메뉴 File → Share → 링크 복사
  3. 복사한 링크를 urls.txt에 붙여넣기

코드 스크린샷 촬영 방법

  1. P5.js Web Editor에서 코드 전체가 보이도록 화면 조정
  2. 스크린샷 촬영 (Windows: Win+Shift+S / Mac: Cmd+Shift+4)
  3. 코드가 길면 여러 장 캡처해도 됩니다 (problem5_1.png, problem5_2.png 등)
  4. 파일명에 문제 번호를 넣어주세요

zip 파일 만드는 법

왜 스크린샷도 필요한가요?

시험 종료 후 URL의 코드를 수정하는 것을 방지하기 위해서입니다. 제출 시점의 코드를 스크린샷으로 기록합니다.


LLM 사용 허용

AI 도구 사용 정책

ChatGPT, Gemini, Claude 등 LLM 사용을 허용합니다.

단, 다음을 유의하세요: - LLM이 만들어준 코드가 조건을 전부 충족하는지 확인하는 건 여러분의 몫입니다 - 조건이 여러 개인 문제에서 LLM은 일부 조건을 빠뜨리거나 잘못 구현하는 경우가 많습니다 - 반드시 P5.js에서 직접 실행하고, 조건을 하나씩 체크한 후 제출하세요

수업 내용을 이해하고 있다면 LLM은 좋은 도우미가 됩니다. 이해하지 못하고 있다면 LLM의 답을 검증할 수 없습니다.


시험 범위 및 핵심 개념

1~2주차: 도형과 좌표

핵심 개념 확인
createCanvas(), 좌표계 (왼쪽 위가 0,0) [ ]
도형 함수: ellipse(), rect(), line(), triangle() [ ]
색상: fill(), stroke(), noStroke(), noFill(), background() [ ]
RGB 색상 모델, 투명도 (4번째 인자) [ ]
setup()draw()의 역할과 차이 [ ]

3주차: 반복문과 패턴

핵심 개념 확인
for문 구조: for (let i = 0; i < n; i++) [ ]
중첩 for문으로 격자 패턴 [ ]
colorMode(HSB), HSB 색상 모델 [ ]
map() 함수: 값의 범위 변환 [ ]

4주차: 조건문과 인터랙션

핵심 개념 확인
if / else if / else 조건문 [ ]
mouseX, mouseY, mouseIsPressed [ ]
mousePressed(), keyPressed() 이벤트 함수 [ ]
비교 연산자: ===, !==, <, >, <=, >= [ ]
논리 연산자: &&, \|\|, ! [ ]

5주차: 움직임과 애니메이션

핵심 개념 확인
변수 갱신으로 움직임: x += speed; [ ]
바운싱: if (x > width) speed *= -1; [ ]
random() 함수 [ ]
frameCount 활용 [ ]
좌표 변환: translate(), rotate(), push()/pop() [ ]

6주차: 함수와 배열

핵심 개념 확인
사용자 정의 함수: function 이름(매개변수) { } [ ]
매개변수와 인자의 관계 [ ]
배열 선언: let arr = []; [ ]
배열 접근: arr[0], arr.length, arr.push() [ ]
배열 + for문으로 다수의 오브젝트 관리 [ ]

7주차: 클래스와 객체

핵심 개념 확인
class 선언, constructor() [ ]
this의 의미: “이 객체 자신의” [ ]
프로퍼티와 메서드 [ ]
new 키워드로 객체 생성 [ ]
객체 배열: let balls = []; balls.push(new Ball(...)); [ ]
배열 방식(6주차) vs 클래스 방식(7주차)의 차이 [ ]

출제 유형

6문제, 만점 20점입니다.

모든 문제는 “다음 조건을 모두 만족하는 P5.js 스케치를 작성하시오” 형식입니다. 문제마다 4~10개의 구체적 조건이 주어지며, 조건별 부분 점수로 채점합니다.

# 난이도 조건 수 주요 범위 배점
1 쉬움 4~5개 1~3주차 (도형, 색상, 반복문) 2점
2 쉬움 4~5개 3~4주차 (반복문, 조건문, 인터랙션) 2점
3 보통 6~7개 4~5주차 (조건문, 움직임, 바운싱) 3점
4 보통 6~7개 5~6주차 (함수, 배열, 다중 오브젝트) 3점
5 어려움 8~10개 6~7주차 (배열 + 클래스 + 인터랙션) 5점
6 어려움 8~10개 1~7주차 통합 5점
채점 방식

조건별 부분 점수입니다. 예를 들어 3점짜리 문제에 조건 6개이면, 조건 1개당 0.5점입니다. 4개를 충족하면 2점을 받습니다. 완벽하지 않아도 부분 점수를 받을 수 있으니, 먼저 제출하세요.

시험 준비 팁
  1. 1~7주차 학생용 핸드아웃을 다시 읽어보세요
  2. 코드를 직접 P5.js 에디터에서 실행해보세요 — 조건을 하나씩 추가하며 확인하는 연습
  3. 각 주차의 핵심 코드 패턴을 이해하세요:
    • for문 + 배열 순회
    • if문 + 바운싱/조건 분기
    • class + constructor + 메서드 + 객체 배열
  4. 7주차 Ball 클래스 코드를 완전히 이해하면 1~7주차가 정리됩니다
  5. LLM을 활용하더라도 조건을 하나씩 실행해서 확인하는 습관이 중요합니다

핵심 줄거리 — 이것만 기억하세요

도형을 그리고 (1~2주)
→ 반복해서 패턴을 만들고 (3주)
→ 클릭/키보드에 반응하고 (4주)
→ 변수를 바꿔서 움직이고 (5주)
→ 함수와 배열로 정리하고 (6주)
→ 클래스로 하나로 묶는다 (7주)

이 흐름을 이해하고 있으면 시험 준비의 큰 그림이 잡힙니다.


문의

시험 관련 질문은 수업 시간 또는 개별 연락을 통해 문의해주세요.