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

어떤 내용을 다루나요?

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

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

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

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

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