깃헙 배포

github.com

깃헙은 코드를 온라인에 저장해두는 편리한 웹사이트이다.
코드를 배포해서 웹사이트 링크로 결과물을 볼 수도 있다.
수많은 회사, 개발자들이 현업에서 사용하는 온라인 코드 저장소이다.

추천: 숙제나 실습한 스케치가 여러개라면 버튼으로 메뉴 생성해보기

예시. https://openprocessing.org/sketch/1614406

전체 구성

btn1, btn2, btn3 메뉴 세 개를 위한 버튼 변수
scene1.js, scene2.js, scene3.js 파일들에서 바로 draw()를 호출하는 것이 아니라, 새로운 main.js 에서 setup(), draw() 함수를 호출한다.
index.html 에는 <script src="..."></src> 를 써서 poster1.js, poster2.js, poster3.js, 그리고 main.js 를 순서대로 포함시켜준다. (main.js를 가장 나중에 적기)

scene1.js, scene2.js, scene3.js ... 기존 스케치 구성 바꾸기

index.html에 이 파일들을 모두 추가했다.
각 파일에는 setup, draw 함수들이 있다. setup, draw 함수는 캔버스를 만든다.
여러 파일에서 캔버스를 동시다발적으로 만들게 되는 문제가 발생한다.
그러므로 원래 캔버스를 그리던 scene 파일들에 있는 setup(), draw() 함수 이름을 바꿔야 한다.
main.js 에만 setup, draw를 써줄 것이다.
scene1.js, scene2.js 등의 setup, draw 이름은 내가 따로 만들어서 호출한다.

// 원래 scene1.js
function preload() {
  // 이미지 미리 로드.
}

function setup() {
  // 공통적인 setup
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES)
  rectMode(CENTER);
  
  // scene1에만 해당하는 setup
  background('red');
  video = createCapture(VIDEO);
}

function draw() {

}

// 새로운 scene1.js
let video;
function setupScene1() {
    // scene1에만 해당하는 setup
    background('red');
    video = createCapture(VIDEO);
}
function drawScene1() {
    image(video, 0, 0, 300, 300);
}

preload 함수는 main.js로 이동시킨다.
원래 setup 안에 있던 것들 중, 캔버스를 생성하거나 모드 설정 등 여러 scene 파일에도 공통적으로 해당하는 셋업 코드는 main.js 의 setup 함수 안으로 이동시킨다.

main.js 코드 구성

setup 함수 안에서 버튼별로 정의한다.
btn1.style(...) 함수 안에 css 스타일 값들을 나열할 수 있다. 나열할 때 , comma 가 아닌 ; semicolon을 써야 한다.
posterIndex 라는 변수를 만든다.
각 메뉴 button을 눌렀을 때, posterIndex가 업데이트되도록 한다.
- btn1 을 클릭하면 scene1() 함수를 실행한다.
- scene1() 함수 안에서 sceneIndex = 1 로 업데이트한다.

// main.js
let sceneIndex = 1;
function preload() {
  // scene1 이미지 preload
  
}
function setup() {
  // 공통적인 setup
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES)
  rectMode(CENTER);
  
  // 메뉴 버튼
  btn1 = createButton('Scene 1');
  btn1.position(width / 3 * 2, 0);	
  btn1.mousePressed(scene1);
}

// 버튼을 클릭했을 때만, "한 번" 실행이 된다.
function scene1() {
  setupScene1();    // scene1을 그리기 직전에 "한 번"만 불러준다.
  sceneIndex = 1;
}
function scene2() {
  setupScene2();
  sceneIndex = 2;
}

function draw() {
  // 중략
  switch(sceneIndex) {
   case 1:
     drawScene1();    // sceneIndex 조건이 맞으면 "계속" 이 함수를 그린다.
     break;
   case 2: 
     drawScene2();
     break;
 }
}

/* 버튼 관련 스타일은 css 파일에 */
/* style.css */
html,
body {
	margin: 0;
	padding: 0;
}

button {
	border: none;
	color: green;
	background: lightgray;
	font-size: 24px;
	cursor: pointer;
	font-family: 'Kanit';
	padding: 10px;
	margin: 10px;
}

main.js의 draw() 에서는 지금 버튼이 클릭된 포스터가 그려지도록 해야 한다.
- sceneIndex의 조건에 따라서 각기 다른 poster / scene이 그려져야 한다.
- 각 포스터를 그리는 함수는 각 js 파일에 가면 있다. draw()가 아닌 다른 이름으로 바꿔놓았다.
  - scene1.js 에 있던 setup 함수는 지우고, draw 함수는 drawScene1() 이름으로 바꿈.
  - 기존 scene1.js, scene2.js 들의 setup 함수에서 필요한 코드들은 모두 main.js 의 setup 함수 안으로 옮긴다.
- 여러 js 파일 중에서, preload, setup, draw 등 p5js 캔버스를 그리는 함수가 있는 파일은 메인 파일 1개여야 한다.
메뉴 버튼의 스타일은 css 파일에 직접 코딩하는 게 편하다.

깃헙 페이지로 배포 준비

openprocessing 코드에서 오른쪽 상단 '내보내기' 아이콘 버튼을 누르고, download ~~.zip 을 하면 내가 작성한 코드를 모두 다운로드 받을 수 있다.
깃헙 계정 생성부터 배포까지는 여기 적힌 스텝을 그대로 따라한다.

Previous웹캠, 영상 Next사운드

Last updated 11 months ago