프로세싱 블로그 삽입하는 방법입니다. 검색을 해봐도 자세히 설명해 놓은 곳이 없네요. 그래서 나름대로 만들어 보았습니다.

프로세싱을 지금 위에 보이는 것처럼 웹문서나 블로그에 삽입하는 방법

 

html 문서 작성에 가서

첫째 아래와 같은 스크립트를 첨가하면 됩니다.

<script src="processing.js"></script>   <-- 정확한 주소가 필요하다

 processing.js 는 최신버전을 사용하고, 용량을 작게 할때는 processing.min.js 를 사용합니다.

processing.js는 아래 링크에서 최신버전을 다운 받아

http://processingjs.org/download/

본인의 웹서버에 올려 두고 필요할때 링크주소를 연결해서 사용하면 됩니다. 이걸 먼저 해 놓아야 다음 진행이 가능합니다.

두번째

processing.js 삽입이 끝났으면 아래와 같은 웹문서를 만들고 음영처리된 부분에 프로세싱으로 직접 작성한 코드를 복사해서 script 사이에 붙여넣기 하고 저장하면 됩니다.

웹문서를 아래 처럼 메모장에서 만들고 html 문서로 저장하고 실행시키면 프로세싱이 웹에서 작동하는걸 볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<script src="processing.js"></script>   <-- 정확한  웹 주소가 필요하다.
</head>
<body>
<script type="application/processing">
int x=10;
 void setup() {
   size(600, 400);
  background(100);
   stroke(255);
  ellipse(50, 50, 25, 25);
}
 void draw() {
ellipse(50+x, 50, 25, 25);
x=x+1;
}
</script>
<canvas width="400" height="200"></canvas>


</body>
</html>

 

티스토리 블로그에 삽입할때도 마찬가지로

글쓰기에서 우측상단 HTML에 체크해서 html 문서작성으로 들어간다. 그리고 프로세싱을 삽입하고 싶은 곳에 아래와 같이 적어 주면 된다.

<SCRIPT src="processing.js"></SCRIPT> <-- 맨 아래 설명처럼 processing.js 링크주소를 바꿔주어야 한다.

<SCRIPT type=application/processing>
int x=10;                                       <--- 음영처리된 부분에 프로세싱 코드를 넣어 주면 된다.           
 void setup() {
   size(600, 400);
  background(100);
   stroke(255);
  ellipse(50, 50, 25, 25);
}
 void draw() {
ellipse(50+x, 50, 25, 25);
x=x+1;
}
</script>
<canvas width="600" height="400"></canvas>

셋째 processing.js 를 티스토리에 첨부화일로 올리고 링크주소 알아내서 바꾸는 방법

이때 processing.js 코드를 아래처럼 첨부화일로 올리고 마우스를 올렸을때 나오는 링크주소를 파악해서

processing.js

위 <SCRIPT src="processing.js"></SCRIPT> 음영 처리된 부분에 링크주소를 아래처럼 바꿔주면 됩니다.

<script src="http://sciencelove.com/attachment/cfile23.uf@994D3E423435C2B1ACB02DF23.js"></script>

-------

결국 블로그나 웹문서에 프로세싱으로 작업한 화면이 나오게 하려면

1. processing.js 를 서버나 웹이나 블로그에 올리고 주소를 알아내서 본문에 삽입해 주어야 하고

2. 스크립트<script> </script> 사이에 작성한 프로세싱 코딩을 넣어 주면 된다.

오늘 하루종일 연구했는데 알고나니 크게 어렵지 않네요.

프로세싱 프로그램은 무료이고 아래 링크에서 다운받을 수 있습니다.

https://processing.org/

Posted by 민서아빠(과학사랑)