프로그래밍 언어 Processing의 코드를 웹 상에서 실행할 수 있게 해주는 자바스크립트 라이브러리 Processing.js를 http://processingjs.org/download/에서 다운받아 테스트해 봤다.

17/7/3 월

//사각형 좌우로 이동 반복

class Rectangle{
  float x;
  float y;
 
  void drawRectangle(){
    rect(x, y, 10, 10);
  }
}
Rectangle myRect = new Rectangle();
float m = 1;
void draw(){
  background(51);
  if(myRect.x < 0 || myRect.x > width-10){
    m *= -1
  }
  myRect.x += m;
  myRect.y = 80;
  myRect.drawRectangle();
}

프로세싱에서 HTML 내부의 정보 사용하기 테스트.
TextField에 아무 글이나 쓰고 '누르기' 버튼을 누르면 윗쪽 캔버스에 그 글이 표시되게 하는 예제. Processing 프로그램과 HTML의 <input>, <button>, 그리고 자바스크립트 drawText() 함수를 연계하여 이용한 예제.

void setup(){
  size(400,100);
  background(128);
  textSize(24);
}

void draw(){ }

void drawText(String t){
  background(128);
  text(t, 10, height/2);
}

void setup() {
  size(200, 200); 
  smooth();
  noStroke();
}

void draw(){
  background(51);
  ellipse(mouseX, mouseY, 30, 30);
}