'Processing'에 해당되는 글 2건

  1. 2013.11.19 2. Processing 코드 공유 (2)
  2. 2013.11.14 1. 프로세싱이란? (1)

2. Processing 코드 공유

2013.11.19 22:21 from Processing





이미 말한대로 김건우 학생이 자바스크립트를 올려 놓았고, 해당 파일을 포함하고 있기에 이전 글 처럼 자바스크립트 형태로 캔버스에 원하는 프로세싱 코드를 포함할 수 있습니다. 하지만 늘 그렇듯 세상은 이미 앞서 나가는 사람들이 있고, 그들을 부지런히 따라가기에도 힘이 든것이 사실이네요.

이번에 소개할 사이트는 이름하여

studio sketchpad(http://sketchpad.cc/)

자신의 프로세싱 코드를 작성해서 협업도 가능하고 공유도 아주 쉽게 할 수 있네요.


/ Pressing Control-R will render this sketch.

int i = 0; 

void setup() {  // this is run once.   
    
    // set the background color
    background(255);
    
    // canvas size (Variable aren't evaluated. Integers only, please.)
    size(300, 300); 
      
    // smooth edges
    smooth();
    
    // limit the number of frames per second
    frameRate(30);
    
    // set the width of the line. 
    strokeWeight(12);

void draw() {  // this is run repeatedly.  

    // set the color
    stroke(random(50), random(255), random(255), 100);
    
    // draw the line
    line(i, 0, random(0, width), height);
    
    // move over a pixel
    if (i < width) {
        i++;
    } else {
        i = 0; 
    }
}

위의 코드를 사이트에 입력후 실행한 화면입니다. 결과는 iframe으로 삽입하게 되어 있는 구조네요.



동일한 코드를 기존의 캔버스에 자바스크립트로 넣으면 다음과 같게 되네요. 어느것이 좋을지는 여러분이 판단하세요.^^



'Processing' 카테고리의 다른 글

2. Processing 코드 공유  (2) 2013.11.19
1. 프로세싱이란?  (1) 2013.11.14
Posted by 수아기 트랙백 0 : 댓글 2

댓글을 달아 주세요

  1. addr | edit/del | reply 김건우_ 2013.11.21 19:36 신고

    이 방법을 쓰면 모바일 페이지에서도 볼수가 있어서 좋네요

    • addr | edit/del 수아기 2013.11.21 20:53 신고

      빙고~~^^ 스마트폰에서도 잘 보이니 좋더라.
      자 시험끝나고 동아리 달려 보자구.
      앗 알엔이 해야 하잖아.

1. 프로세싱이란?

2013.11.14 15:53 from Processing


프로세싱(Processing)은 프로그래밍 언어로서 프로그래밍 초보자나, 미디어 아티스트들이 보다 쉽게 프로그래밍을 할 수 있도록 하기 위해서 개발된 언어입니다. 프로세싱은 MIT 미디어랩의 Ben Fry와 Casey Reas 에 의해 2001년 개발된 언어입니다. 언어 자체의 문법은 기본적인 것은 자바에서 많이 가지고 왔지만 사용법은 훨씬 간단합니다. 사실 객체지향도 많이 녹아 들어가 있기에 절차지향을 배우고 객체지향을 공부하기 위한 언어로 선택해도 될 것 같다는 생각도 듭니다. 사실 자바 언어를 모태로 해서 나온 언어라고 보는 것이 많을 것입니다. 아무튼 간단하고 사용하기 편리하다는 점은 추가로 언급하지 않아도 될 것이며, 무엇보다도 시각화를 하는데 있어서 이렇게 편리한 언어는 드물다고 봅니다. 그래서인지 아두이노와 참 잘 맞는 녀석이라는 생각도 들구요. 동아리 학생들도 프로세싱을 틈틈히 공부해놓으면 자신이 원하는 것을 시각화 하는 과정에서 큰 도움을 받을 것이라고 생각합니다. 이미 몇몇 친구들은 그렇게 하고 있다는 것도 잘 압니다.^^

김건우 학생이 블로그의 메인 html 에 processing.js 를 포함시켜 놓았기에 프로세싱을 화면에 보여주고 싶은 경우에는 이 자바스크립트의 도움을 받으면 됩니다. 보다 더 공부하고 싶은 학생은 http://processingjs.org/ 을 추천합니다. 


<script type="text/processing" data-processing-target="mycanvas">
void setup()
{
  size(200,200);
  fill(255);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello GBS SADA!",20,20);
  
}
</script>
<canvas id="mycanvas"></canvas>

위와 같은 코드를 글을 작성하면서 html 체크를 켜고서 코드를 작성하면 됩니다. 우리가 다운로드 받아서 사용하는 것과는 사실 좀 다를 수 있지만 왠만한 기능은 지원이 되니까요. 위 코드가 정상적으로 되려면 html5를 잘 지원하는 브라우저에서 실행을 해야 합니다. 자 위의 코드는 프로그래밍르 처음 해볼때 많이 출력해보는 Hello, World 입니다.^^ 그리고 또 다른 프로세싱을 보여주고 싶으면 캔버스 아이디를 추가하면 됩니다.


공부할것도 많고 늘 바쁜 과학고 생활에서 프로세싱은 작은 활력소가 되리라고 생각하지 않습니다. 중요한 것은 늘 그렇듯 문제를 해결할 줄 아는 능력과 자신의 현 상황에 닥친 각종 문제들을 최적으로 풀어내는 것입니다. 아래 두 코드는 그냥 보기만 해도 충분히 이해할 것이라고 봅니다. 자 또 즐거운 무엇인가를 만들어 봅시다.^^





'Processing' 카테고리의 다른 글

2. Processing 코드 공유  (2) 2013.11.19
1. 프로세싱이란?  (1) 2013.11.14
Posted by 수아기 트랙백 0 : 댓글 1

댓글을 달아 주세요

  1. addr | edit/del | reply 갤럭시S3 2014.02.11 01:52 신고

    안녕하세요 프로세싱을 막 입문한 학생입니다.
    혹시 이방법으로 네이버 카페에 html로 프로세싱을 보여줄수 있는지 궁금합니다.

    네이버측에서 자바스크립트를 사용못하게 해놓아서 제가 생각해본건
    티스토리 블로그에서 프로세싱을 작성하고 그 게시글의 소스를 따와서 네이버 카페의 html로 쓸수 있는법은 없을까요?

    간단하게 설명드리자면 스크랩정도는 할 수 없을까요?