Processing

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

From.h 2023. 5. 30. 11:24
728x90
반응형

 

 

프로세싱 결과물을 블로그에 게시하는 방법

<1편 : ProcessingJS(pjs)를 이용하는 방법>

 

 

1. prosessing.js 스크립트 넣기

2. 스크립트 안에 코딩하기

3. html에서 canvas 사용 확인하기

 

 

 

 

 

 

#1 프로세싱을 웹에 게시하는 방법은 여러가지가 있어요

openprocssing.org 사이트를 통해 웹에서 직접 코딩하고 저장하여 자동으로 게시되는 방법이죠

 

이는 다양한 모드를 제공합니다. P5js, Html/CSS/JS, Pjs 모두 지원해요

 

모드를 선택한 후 해당 언어를 사용해서 게시 가능해요

 

해당 사이트내에서 자신의 채널을 가질 수 있지만, 일반 블로그 처럼 활용하기는 어렵죠

 

p5js.org 사이트에서도 웹에서 직접 코딩하여 저장하고 게시하는 방법도 있어요

 

이는 위의 경우처럼 다양한 모드를 지원하지는 않고, 해당 언어를 사용해야 하죠

 

자체적으로 학습 튜토리얼 등을 제공하고 있고, 프로세싱과 크게 다르지 않아요

 

자신의 웹서버(개인 사이트)를 이용, 프로세싱 프로그램을 통해 자바스크립트 모드 Processing.js 를 설치하여 작업한 후 

 

html 파일을 직접 만들어 삽입, 웹에 직접 게시하는 방법도 있어요 (자신의 웹서버 존재)

 

물론 이렇게 웹에 게시하는 방식이 프로세싱의 모든 기능들을 지원하지는 않는 것으로 알고 있어요

 

블로그를 이용, 웹에 올릴 수 있는 가장 편리하고 쉬운 방법은 지금 설명하려는 방법임에는 틀림없습니다. 

 

자세한 서치 내용은 더보기를 참조하세요.

더보기

 

프로세싱을 블로그에 올리는 방법에 대한 조사내용 

 

일반적인 개인 웹 사이트, 혹은 어떤 호스팅의 웹페이지가 아닌,

대중적인 블로그에 프로세싱을 올리려면 우선 해당 블로그가  html편집기를 제공해야 합니다.

국내에서 가장 대표적인 네이버 블로그의 경우 그 영향력이 가장 높다고 볼 수 있고, 제 블로그도 주로 네이버에서 작성되어 왔기 때문에 이를 사용하려고 부단히 알아보았지만 역시 안되는 거였습니다. 이전 버전에서 일부 지원을 하기도 했으나 현재 버전에서는 전혀 할 수가 없었습니다. 

다음으로 카카오 브런치의 경우, 일반 글쓰기에 요즘 자주 애용하고 있고, 앞으로도 잘 써보려고 했었는데, 역시나 프로세싱 관련 작업물을 함께 올리기에는 부적합했습니다. 단지 글쓰기에만 편리하죠.

구글 블로거도 글로벌 회사의 서비스니 한 번 살펴보았는데, 가장 html에 가깝게 지원을 하는 방식이긴 하지만 우리나라 사람들에겐 익숙치않을 뿐더러 뭔가 요즘 스타일은 아닌 것 같고 해서 일단 패스했습니다.

마지막 남은 카카오 티스토리, 인터페이스도 괜찮고, html도 지원하고 딱 적절한 서비스라 생각이 들었고, 이렇게 해서 티스토리로 귀결되었습니다.

 

프로세싱 결과물(인터랙션 작동하는)을 웹에 게시하기 위해 블로그를 활용하는 방법을 찾는 과정이 험난했습니다. 웹에 대한 이해도가 조금 있으신 분들은 어쩌면 쉽게 찾을 수 있었을지도 모르겠네요.

 

 

 

 

 

 

 

#1 먼저 스크립트를 넣어줍니다. Processing.js 라이브러리를 불러오는 스크립트예요

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>
<canvas id="pjs"></canvas>

ㄴ 첫 라인은 프로세싱 1.6.6 미니멈 버전의 라이브러리를 불러오는 cdn 주소입니다. ( 일반 공유된 주소입니다.)

     이는 개인적으로 해당 파일을 자신의 웹서버에 올려놓고 그 주소를 가져다 사용할 수도 있습니다.

ㄴ 둘째 라인은 pjs 라이브러리를 참조하는 캔버스를 사용한다는 의미입니다.

 

 

 

 

 

 

#2 다음과 같은 스크립트 안에 프로세싱 언어로 코딩을 해줘요

<script type="application/processing" data-processing-target="pjs">
  // 코딩 위치
</script>

ㄴ 해당 스크립트는 pjs 라이브러리를 참조하는 어플리케이션 타입이라는 의미이며, 스크립트안에 코딩을 합니다. 

 

 

 

 

 

다음은 Bezier를 이용한 곡선을 그리는데 사용되는 코드의 예시입니다.

void setup() {
 size(600,600);
}


void 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);
}

p5js와 비교하기 위해 동일한 예제를 사용했습니다.

 

 

 

 

 

 

자바스크립트를 사용하느냐, 프로세싱을 사용하느냐의 차이입니다.

저처럼 프로세싱을 사용하는 경우 언어의 변환 없이 그대로 가져다 웹에 게시할 수 있는 방식입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

완성된 코드는 아래와 같습니다. (html 모드로 전환 후 작성해야 합니다!)

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>
<canvas id="pjs"></canvas>
<script type="application/processing" data-processing-target="pjs">
void setup() {
 size(600,600);
}


void 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>

 

 

 

 

 

 

*주의사항 (Tip)

 

글을 작성한 후 수정을 하면, 이미지가 안보이게 되는 경우가 발생합니다.

html 모드에서 저장한 후, 수정을 위해 기본 모드가 활성화되면서

아래 해당 코드가 사라지는 걸 볼 수 있습니다.

그래서 글 수정 후에는 다시 html에 아래 코드를 삽입해줘야 합니다.

 

<canvas id="pjs"></canvas>




 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

BR. h

 

 

728x90
반응형