Processing sin() cos() 예제

Processing sin() cos() 예제

---

int won_num = 20; //원의 갯수 float speed = 0.02; int ellipse_size = 10; float drive = 0; void setup() { size(400, 400); smooth(); } void draw() { background(255); fill(200); ellipse(width/2, height/2, 200, 200); fill(#123456); for (int i = 0; i < won_num; i ++) { ellipse(width/2+cos(i*TWO_PI/won_num+drive*2)*100, height/2 + sin(i*TWO_PI/won_num+drive)*100, ellipse_size, ellipse_size ); } drive = drive + speed; }

---

이 소스는 http://makeprocessing.com/ 에서 가져와 수정했습니다.

ProcessingJS 란?

[Processing 언어를 안다는 전제하에 작성합니다]

ProcessingJS 란?

 일단 전제조건이 html5 의 canvas 기능을 사용할 수 있는 브라우저에서만 동작합니다. (결국 IE8 이하 버전에선 동작 안한다는 말과 같습니다)
ProcessingJS는 기존의 Processing 언어를 자바스크립트 라이브러리로 만들어 놓은 것인데, 특이하게 코딩방법이 3가지입니다.

1.  processing.js 라이브러리 파일과,   .html 파일만 으로 코딩
2.  processing.js 와 .pde 프로세싱파일, .html 파일

 파일 구성으로만 보면 2가지 이지만 첫번째 html 파일에서 코딩하는 방법이 또 2가지로 나뉩니다.

1. 평범하게 프로세싱언어로 void setup(), void draw() 등으로 코딩
2. 자바스크립트와 혼용하여 void 가 아닌 function processing.draw() 로 코딩

 말로 설명 드리면 어려울 것 같아 앞서 포스팅한 '프로세싱 간단예제 1,2 페이지를 보시면 됩니다. 

 개인적인 생각으론 웹에서만 쓴다면 자바스크립트와 혼용하여 쓰는 것이 가장 좋은 방법으로 보입니다만 자동적으로 파싱해주는 프로그램같은 무엇인가가 없어서 한가지 코드로 pc용, 안드로이드용, 웹용 등으로 컴파일 할 수 있는 프로세싱만의 장점중 하나를 버려야 합니다.

 이 블로그에서는 일반 프로세싱 코드로만 작성하겠습니다. pde 파일을 쓸 수 있으면 좋겠지만 따로 호스팅이나 첨부할 곳이 마땅치 않아 위에 언급한 첫번째 방법으로 코딩하겠습니다.

이유는 제가 하고자 하는것이 프로세싱으로 안드로이드 게임(액션)을 만드는 것이므로...어디까지 해낼지는 모르겠지만 틈나는 대로 테스트한 코드와 팁들을 포스팅하겠습니다.

추신- 안드로이드 게임을 프로세싱으로 만들려는 이유는.. 아주 기초적인 안드로이드용 자바를 알지만 게임엔진등을 이용해 만들만한 자바실력이 안되고, 개인이 쉽게 구할수 있는 2d 게임엔진이 너무 없기 때문입니다. 아이폰의 경우 c#을 몰라도 앱을 제작할 수 있는 툴들이 많은 반면, 안드로이드에도 같은 툴들이 많았으나 거의 대부분 개발 중단된 상태입니다. 찾다보니 프로세싱언어가 있었고, 프로세싱,안드로이드 둘다 자바기반이라 그런지 프로세싱에서 안드로이드의 motionEvent() 같은 이벤트(?)를 상속받아 사용할 수 있어서 프로세싱으로 도전하려고 합니다. 

ProcessingJS 간단예제 2

ProcessingJS 간단예제 2



<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script data-processing-target="mycanvas" type="text/processing">
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 30 );
  X = width / 2;
  Y = height / 2;
  nX = X;
  nY = Y;
}

// Main draw loop
void draw(){

  radius = radius + sin( frameCount / 4 );

  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;

  // Fill canvas grey
  background( 100 );

  // Set fill-color to blue
  fill( 0, 121, 184 );

  // Set stroke-color white
  stroke(255);

  // Draw circle
  ellipse( X, Y, radius, radius );                
}


// Set circle's next destination
void mouseClicked(){
  nX = mouseX;
  nY = mouseY;
}
</script>
<canvas id="mycanvas"></canvas>

ProcessingJS 간단예제1

Simple processing.js via JavaScript

Simple PorcessingJS examples

ProcessingJS 간단 시계 예제

Clock


<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>

<canvas height="200" id="canvas1" width="200"></canvas>

<script id="script1" type="text/javascript">

// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {
  // Override draw function, by default it will be called 60 times per second
  processing.draw = function() {
    // determine center and max clock arm length
    var centerX = processing.width / 2, centerY = processing.height / 2;
    var maxArmLength = Math.min(centerX, centerY);

    function drawArm(position, lengthScale, weight) {    
      processing.strokeWeight(weight);
      processing.line(centerX, centerY,
        centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
        centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
    }

    // erase background
    processing.background(224);

    var now = new Date();

    // Moving hours arm by small increments
    var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
    drawArm(hoursPosition, 0.5, 5);

    // Moving minutes arm by small increments
    var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
    drawArm(minutesPosition, 0.80, 3);

    // Moving hour arm by second increments
    var secondsPosition = now.getSeconds() / 60;
    drawArm(secondsPosition, 0.90, 1);
  };

}

var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it
</script>


<canvas id="mycanvas"></canvas>