2022년 심석고등학교 Javascript, p5.js 강의 예제

어떤 내용을 다루나요?

인공지능 활용을 위한 기본적인 자바스크립트 문법
상상하는 것을 자유롭게 그릴 수 있는 그래픽 라이브러리 p5.js

자바스크립트 기본 문법에는 어떤 것이 있나요?

콘솔 츌력 사용해보기
- 콘솔 출력을 사용해서 자기소개를 합니다.
변수 사용해보기
- 변수를 활용해서 프로그래밍의 기본 아이디어를 익힙니다.
조건문과 반복문
- if 문과 for 문을 사용해서 구구단을 출력합니다.
- while 문을 사용해서 확률을 계산합니다.
배열 사용해보기
- 배열을 사용해서 정보를 저장합니다.
- 반복문을 활용해서 배열을 탐색합니다.
- JS에서 제공하는 배열 함수를 사용합니다.
함수 사용해보기
- 함수를 사용해서 콘솔 출력을 이용합니다.
- 함수를 사용해서 코드를 구조화합니다.

p5.js를 활용해서 어떤 것을 만들 수 있나요?

캔버스
- 캔버스에서 사용하는 좌표계를 익힙니다.
- 캔버스를 생성하여 그림을 그립니다.
점, 선, 면
- 캔버스 위에 점, 선, 면을 그립니다.
- 캔버스에 그린 그림의 색과 투명도를 변경합니다.
텍스트
- 캔버스 위에 텍스트를 출력합니다.
- 텍스트의 크기 색상 등을 변경합니다.
버튼
- HTML 요소를 활용해 버튼을 생성합니다.
- CSS 요소를 활용해 버튼의 크기, 색상, 위치 등을 변경합니다.
- 버튼을 활용해 함수를 실행합니다.
텍스트 박스
- HTML 요소를 활용해 텍스트 박스를 생성합니다.
- CSS 요소를 활용해 텍스트 박스의 크기, 색상, 위치 등을 변경합니다.
- 텍스트 박스를 활용해 표시되는 텍스트의 내용을 변경합니다.
상자 움직이기
- 변수를 사용해 상자의 위치를 추척합니다.
- 변수를 조작해 상자의 위치를 조정합니다.
모서리 예외 처리하기
- 상자가 화면 밖으로 나갔을 경우를 대비합니다.
- 상자가 화면 밖으로 나가면 방향을 반대 방향으로 조정합니다.
키보드, 마우스 이벤트
- 키보드 입력에 따라서 상자의 움직임을 제어합니다.
상자 여러 개 만들기
- 배열을 사용해서 여러 개의 상자에 대한 속성을 추적합니다.
- random 함수를 사용해서 무작위 위치, 속력 등 지정합니다.
p5.js로 할 수 있는 다양한 것들!
- 벡터를 활용해 애니메이션을 만들 수 있습니다.
- 조건문 등을 활용해 두 물체의 충돌 시뮬레이션을 할 수 있습니다.
- 이미지를 불러오고 표시할 수 있습니다.
- 이미지 사이즈를 재조정할 수 있습니다.
- 원점을 이동하여 익숙한 좌표계에서 작업할 수 있습니다.
- 좌표계를 회전하여 이미지 등을 회전시킬 수 있습니다.

unta1337/SSH-P5-JS-Lecture-22

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Languages

Error
Looks like something went wrong!