p5.js 비주얼포트폴리오
- 숭실대학교
- 정기철
페이스북
트위터
카카오톡
네이버밴드
링크복사
-
- 주제분류
- 공학 >컴퓨터ㆍ통신 >멀티미디어학
-
- 강의학기
- 2025년 2학기
-
- 조회수
- 1,089
-
- 강의계획서
- 강의계획서
프로그래밍 입문자가 그림을 그리듯이 코딩을 배울 수 있는 JavaScript 기반의 p5.js를 이용하여, 자신이 만든 프로그램 결과물(작품)을 웹 상에서 시각적인 포트폴리오로 구성하는 것을 목표로 한다
차시별 강의
| 1. | |
오리엔테이션 | 과목, 교재, 주차별 내용 소개 및 평가 방법 |  |
|
1장: 프로그래밍 개론(PPT) 1장: 프로그래밍 개론(e-book) | 1장 PPT로 설명 1장 e-book으로 설명 | |
|
| 2. | |
2장: p5.js 개론 2장: 웹 에티터 사용 방법 2장: 그래픽 좌표계 | p5.js에 대한 소개 개발 환경인 웹에디터 사용법 그래픽 좌표계 개념 소개 | |
|
2장: 간단한 원 그리기 2장: 함수의 개념 2장: 색상 표현 방법 | 캔버스 위에 간단한 도형 그리기 p5.js의 내장 함수 사용법 흑백/컬러 색상 표현법 | |
|
| 3. | |
2장: 스스로 코딩 공부하는 방법 2장: p5.js 사이트 사용법 | 스스로 정보 찾는 방법 p5.js의 참고 페이지 사용법 | |
|
2장: 디버깅 방법 과제#1: 추상화 그리기 3장: 벽돌깨기 게임 시작 | 에러 검출을 위한 디버깅 방법 과제#1: 추상화 그리기 벽돌깨기 게임 구현 소개 | |
|
| 4. | |
3장: 변수의 개념 | 변수의 개념 및 사용법 | |
|
3장: 자료형의 개념 | 자료형의 개념 및 사용법 | |
|
| 5. | |
3장: 연산자 과제#2: 캐리커처 그리기 | 연산자의 개념 및 사용법 과제#2: 자신의 캐리커처 그리기 | |
| 6. | |
3장: 조건문 3장: 중첩 조건문 | if 조건문의 사용법 중첩 조건문의 의미와 사용법 | |
|
3장: 마우스 인터랙션 3장: 키보드 인터랙션 | 마우스의 위치와 인터랙션 키보드 입력과 인터랙션 | |
|
| 7. | |
3장: 랜덤 함수 과제#3: 움직이는 캐리커처 | 랜덤 함수의 개념과 활용 과제#3: 움직이는 캐리커처 만들기 | |
|
4장: 고급 문법 시작 4장: 반복문 | 4장 시작 반복문의 개념과 활용 | |
|
| 8. | |
4장: 이미지 파일 사용 4장: 이미지 파일 저장 4장: 오디오 파일 사용 | 이미지 파일 사용하기 캔버스 결과를 이미지파일로 저장 오디오 파일 사용하기 | |
| 9. | |
4장: 배열 4장: 인공 지능 라이브러리(ml5.js) | 배열 변수의 개념과 활용 인공지능 라이브러리 활용 | |
|
4장: 이미지 필터링 4장: 함수 4장: 벽돌깨기 게임 함수 구현 | 이미지 픽셀 필터링 사용자 정의 함수 게임에 함수 적용 | |
|
| 10. | |
4장: Transform 4장: Style 4장: 벽돌깨기 게임의 벽돌 구현 | Transform Style 벽돌깨기 게임 완성 | |
|
4장: copilot 사용법 4장: 2차원 배열 | AI Coding Assistant(Copilot) 사용 2차원 배열 | |
|
| 11. | |
4장: 폰트 사용 과제#4: 소개(optional) 5장: 5장 시작 | 폰트 사용을 이용한 화면 구성 과제#4 5장 시작 | |
| 12. | |
5장: 시간 관련 함수 5장: 프레임 관련 함수 | 시간 관련 함수를 이용한 콘텐츠 프레임 관련 함수를 이용한 콘텐츠 | |
|
과제#5: 추상화 작품에 시간을 5장: 원 직접 그리기 5장: Perlin 노이즈 과제#6: 벽돌깨기 게임 완성(optional) | 과제#5: 추상화 작품에 시간을 원을 픽셀로 직접 그리기 Perlin noise 과제#6(optional) | |
|
| 13. | |
6장: github에 호스팅하기 7장: 재귀 함수 소개 | github에 자신의 작품 호스팅하기 재귀 함수 | |
| 14. | |
7장: 재귀함수 예제들 | 재귀함수 예제를 통한 학습 | |
연관 자료
