Tips. 프로세싱 작업을 블로그에 게시하는 방법 2편

 

 

 

프로세싱 결과물을 블로그에 게시하기 

1편은 프로세싱 언어로 작성한 코드를 그대로 복붙하여 이용하는 방법이었습니다.

2편은 자바스크립트 언어로 변환 작성한 코드를 이용하는 방법입니다.

 

 

 

 

 

 

 

 

#1 프로세싱으로 작업한 인터랙티브 이미지를 블로그에 올릴 수 없을까 라는 고민에서 시작

일반적인 이미지 즉, jpg, png, gif 와 같이 정지된 작업물 혹은 움짤 정도는 블로그에 올리기에도 괜찮아요

 

하지만 마우스에 반응하는 이미지는 일반 블로그에 올리기가 쉬워보이지 않네요

 

웹을 다룰 줄 안다면야 자신의 웹호스팅을 통해서 html 파일을 작성하여 올릴 수 있을거예요

 

 

#2 어떻게 하면 블로그에 프로세싱이 동작하도록 올릴 수 있을까

프로세싱은 자바기반 혹은 자바스크립트를 활용하는 언어예요

 

블로그에 프로세싱을 게시하려면 몇가지 필요한 요소가 있어요

1) html 편집기를 지원해야 하고요

2) 자바스크립트 이용에 필요한 라이브러리를 불러와야 해요

3) 스크립트 안에 코딩을 하면 되죠

 

 

 

 

 

 

자, 그럼 차례대로 해보겠어요!

 

 

 

#1 html 편집기 지원 여부를 확인합니다.

 A. 네이버 블로그 : 지원안함 

 

 B. 카카오 티스토리 : 지원함

 

 C. 구글 블로거 : 지원함

 

 

 

#2 자바스크립트 사용에 필요한 라이브러리를 불러옵니다.

 p5.js 라이브러리를 이용하는 방법

 

 

 

*자세한 내용은 더보기를 눌러 확인하세요.

 

p5.js란?

p5.js는 크리에이티브 코딩을 위한 자바스크립트 라이브러리로, 마치 스케치북과도 같으며 다양한 드로잉 기능을 제공합니다. 인터넷 브라우저 전체를 스케치북 삼아 그릴 수 있을 뿐 아니라, 텍스트, 입력, 비디오, 웹캠, 그리고 사운드 등을 비롯한 각종 HTML 요소를 사용할 수 있습니다. 

https://p5js.org/

home | p5.js

 

pjs란?

Processing js의 약자로 프로세싱을 위한 자바스크립트 라이브러리입니다. 

유연한 소프트웨어 스케치북이자 시각 예술의 맥락 내에서 코딩하는 방법을 배우는 언어입니다. 2001년부터 Processing은 시각 예술 분야의 소프트웨어 활용 능력과 기술 분야의 시각 능력 활용 능력을 증진해 왔습니다. 학습 및 프로토타이핑을 위해 Processing을 사용하는 수만 명의 학생, 예술가, 디자이너, 연구원 및 애호가가 있습니다.

https://processing.org/

Welcome to Processing!

 

 

 

 

 

 

#3 스크립트를 작성합니다.

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<div id="p5canvas"></div>

 

ㄴ 첫 줄은 p5.js 1.4.0 버전의 라이브러리가 있는 cdn 주소입니다. 일반공유되어 사용되는 위치입니다.

    (이 파일은 자신의 웹사이트에 업로드한 후 그 주소를 사용할 수도 있습니다)

ㄴ 둘째 줄은 캔버스를 사용하는 div입니다. 일반적인 <canvas>가 아니라서 div를 이용합니다.

 

 

 

그다음 스크립트로 감싸서 코딩을 해주면됩니다. 이 때는 프로세싱 언어가 아닌 자바스크립트 언어를 사용합니다!

<script>

  // 코딩 하는 위치 (자바스크립트)

</script>

 

 

 

 

 

 

 

적용된 예제와 코드는 아래와 같습니다.

function setup() {
  createCanvas(600,600).parent("p5canvas");
}

function draw() {
  background(0);
  noFill();
  stroke(255, 100, 0);
  line(500, 80, mouseX, mouseY);
  line(500, 520, 60, 580);
  stroke(200);
  bezier(500, 80, mouseX, mouseY, 500, 520, 60, 580);
}

ㄴ 마우스를 움직이면 Bezier Control Point 가 이동하면서 곡선을 만드는 원리를 보여줍니다.

 (이전 예제와 동일한 코드를 자바스크립트 언어로 작성한 코드입니다)

 

 

 

 

 

 

 

 

 

 

 

 

 

최종 입력한 코드는 아래와 같습니다 (html 모드에서 작성해야합니다!)

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"> </script>
<div id="p5canvas"> </div>
<script>
function setup() {
  createCanvas(600,600).parent("p5canvas");
}

function draw() {
  background(0);
  noFill();
  stroke(255, 100, 0);
  line(500, 80, mouseX, mouseY);
  line(500, 520, 60, 580);
  stroke(200);
  bezier(500, 80, mouseX, mouseY, 500, 520, 60, 580);
}
</script>

 

 

 

 

 

 

 

 

 

Tips. 프로세싱을 작업을 블로그에 게시하는 방법 1편

 

 

 

 

 

BR.h