p5.js 라이브러리의 기능을 이용해 그래픽을 그리면서 자바스크립트 문법을 배우고,
인터랙션과 애니메이션을 직접 만들어보면서 인터랙티브한 아트 작업의 과정을 경험해봅니다.
p5js로 배우는 자바스크립트와 아트코딩
Art, js, p5js
시작일
매주 2019년 10월 10일
진행일시
매주
모집현황

data-product-id="11551" data-recruit-progress="0" data-activity-progress="0"

진행장소
캠퍼스
학습대상
- 인터랙티브한 미디어작업에 도전해보고 싶으나 어떻게 시작해야할지 몰라 어려움을 겪고 계신 분들.
- 아직 프로그래밍 경험이 없으며 자바스크립트를 통해 코딩에 입문해보고 싶으신 분들.
- 자신의 아트웍에 인터랙티브를 더하고 싶은 디자이너분들.
과목난이도

쉬움 (1단계) ~ 어려움(5단계)

학습목표
자신이 원하는 그래픽을 프로그래밍을 통해 그리고 마우스/키보드등 기본적인 입력장치를 이용해 상호작용하면서 움직이는 시각작업물을 만들어내는 것이 이 과정의 목표입니다.
운영방식
1. 목표하는 예제 코드를 함께 재생해봅니다.
2. 자바스크립트 문법에 대한 이론적인 개념들을 배웁니다.
3. p5js의 기능들을 활용해 실제 코딩을 실습해봅니다.
4. 각자 만든 작업물을 공유합니다. (필수적이진 않습니다)
선수지식
프로그래밍 경험이 없는 입문자도 참여할 수 있는 기초과정입니다.
학습 및 참고자료
매주 자체제작한 p5.js 프로젝트 예제들을 따라하면서 수업을 진행합니다.
커리큘럼
/
주차 모임내용 학습자료
1 주차 오리엔테이션 : p5js 소개 및 웹에디터 인터페이스 설명 자체 제작 자료
2 주차 자바스크립트 함수와 연산자 / 도형그리기 자체 제작 자료
3 주차 자바스크립트 변수 / 도형그리기 자체 제작 자료
4 주차 p5js 시스템 변수 / 키보드와 마우스 입력 적용해보기 자체 제작 자료
5 주차 애니메이션 만들기 1 자체 제작 자료
6 주차 애니메이션 만들기 2 / 유용한 삼각함수 자체 제작 자료
7 주차 반복문을 이용해 '많이' 그려보자 자체 제작 자료
8 주차 배열을 이용해 '많이' 그려보자 자체 제작 자료
9 주차 객체를 이용해 독립적인 움직임 만들기 자체 제작 자료
10 주차 인터랙티브하고 제네레이티브한 그래픽 만들기 1 자체 제작 자료
11 주차 인터랙티브하고 제네레이티브한 그래픽 만들기 2 자체 제작 자료
퍼실소개
정효

정효

프론트앤드 개발자로 프로그래밍을 이용한 시각예술을 꾸준히 해오고 있습니다. 인스타그램 @doodlefingers 에서 작업물들을 보실 수 있습니다. 더 많은 사람들이 코딩을 이용해 미적인 시각물들을 만드는 즐거움을 함께해봤으면 하는 마음에 과정을 개설하게 되었습니다.

프론트앤드 개발자로 프로그래밍을 이용한 시각예술을 꾸준히 해오고 있습니다. 인스타그램 @doodlefingers 에서 작업물들을 보실 수 있습니다. 더 많은 사람들이 코딩을 이용해 미적인 시각물들을 만드는 즐거움을 함께해봤으면 하는 마음에 과정을 개설하게 되었습니다.



풀잎스쿨 신청 및 결제를 위해서 로그인을 해주세요