p5js 시작하기 (openprocessing)

p5js 라이브러리

  • 기존 컴퓨터 언어를 간단하게 쓸 수 있도록 만든 쉬운 문법

  • javascript 기본 문법, p5js 문법을 잘 지키면서 코딩을 하면 된다.

  • 모든 문법을 외울 수는 없다. 검색, 검색, 검색!

    • https://p5js.org/ko/

  • 개발자들이 종종 다른 언어나 기술도 빨리 배우는 이유: 컴퓨터 언어가 가지는 로직, 문법 이름 등이 비슷한 경우가 꽤 많기 때문.

  • 지금 우리는 모르는 게 당연하다..!

  • 프로그래밍의 시작 - 처음에는 어떻게 프로그래밍을 했을까?

(오른쪽 사진 출처: joone.net)

디자인, 타이포, 그래픽, 모션

온라인 에디터의 장단점

  • openprocessing

    • 회원가입

    • 오른쪽 탭: SKETCH, FILES, EDITOR

  • p5js 공식 웹사이트 에디터

  • 수업: openprocessing에서 진행하고, 각 회차 마무리 이전에 p5live로 코드를 옮겨갈 예정.

    • 수업 때 사용한 코드 및 템플릿

온라인 에디터 사용법

여기서 잠깐! html, css, js 는 무엇일까?

source: facebook - javascript programming | vectormine

html: 뼈대를 잡아준다. html 역시 js 언어처럼 자기만의 문법이 있다. 

<!DOCTYPE html>
<html lang="en">

<head>
    <script src=" ... "></script>
</head>
<body>
  <h1>제목</h1>
  <h2>부제목</h2>
</body>

css: 스타일을 잡아준다. 버튼의 색깔, 폰트의 크기 등 여러가지 스타일을 지정한다. 모션그래픽 효과가 나는 애니메이션도 구현할 수 있다.

javascript: 동적인 기능을 추가할 수 있도록 한다. 버튼을 클릭했을 때, 어떤 일(이벤트Event 라는 용어를 씀)이 발생하도록 지시하거나, 마우스를 움직이면 화면의 어떤 부분과 연결되어서 상호작용이 일어나게 하는 등 웹사이트를 동적(dynamic)하게 만들어준다.

⬆️ 웹에서 코드를 실행하는 데에 필요한 html, css, js 파일들이 탭으로 나열되어 있습니다. 수업 때 작성할 코드는 week1.js 파일입니다.

초기 템플릿 코드를 보고 싶으면, index.html 파일 탭을 클릭 => <script src="week1.js"><script> 줄에서 week1.js => template.js 이름만 바꿔줍니다. 그리고 캔버스를 재생합니다.

  • 자동 저장이 되지 않으니 주기적으로 ctrl + s, command+s를 해주세요!

  • utils.js의 이름은 utility의 약자입니다. 도구나 도움말처럼 쓰는 코드를 쓰거나, 다양한 경우에 활용할 수 있는 간략한 코드들을 여기 모아둡니다.

  • 파일 이름 옆의 x 아이콘을 누르면 파일이 삭제되니, 주의하세요.

  • 새로운 예제나, 새로운 코드 파일을 탭에 계속 추가할 겁니다. 그 때마다, index.html에 새로운 js 파일 이름을 써줘야 합니다.

<script src="week2.js"></script>

  • 혹시나 여러 p5js 캔버스 코드setup, draw 함수가 있는 코드 파일을 작성하게 되면, 가장 마지막에 있는 script 파일이 우선권을 가집니다.

    • 웹 개발에서 코드는 위에서부터 아래로 순차적으로 실행된다고 생각하면 됩니다. 그러면 가장 마지막에 쓰여진 코드가 제일 나중에 실행되겠죠? 레이어로 따지면, 우리 눈앞에 가장 가까이 있는 셈입니다.

<head>
    <script src="week1.js"></script> <!-- 캔버스에 안보임. -->
    <script src="week2.js"></script> <!-- 캔버스에 보임. -->

</head>

코드 fork 사용법

  • 다른 사람의 코드를 변경하게 되면, 우측 상단에 SAVE AS FORK 라는 버튼이 뜹니다.

    • FORK는 기존 코드를 카피한다고 생각하면 됩니다.

  • 변경하지 않고 그대로 FORK를 할 수도 있습니다.

내가 fork한 원본 코드 찾아가기

  • 다른 사람의 원본 코드를 FORK 하고 난 후에는,

    • 원본 코드가 변경되어도 내 코드에는 반영되지 않습니다.

  • 그렇다면, 원본 코드를 다시 찾아가려면?

  • 상단의 i 버튼을 누르면, 내 코드에 대한 간략한 정보가 나옵니다.

    • 아래 쪽에 , fork of ~~~ 라고 보이죠?

    • 이 링크가 여러분이 FORK한 원본 파일 링크입니다.

PreviousIntroductionNext변수

Last updated