웹눈 이야기

  저는 같은 카테고리에 속하는 다양한 Device들의 인터페이스를 일반화 하고 생성 함수를 만들어서 클라이언트 코드가 특정 구현객체에 의존하지 않을 수 있도록 하기 위해 Factory Pattern을 사용합니다. 주로 사용성은 아래와 같습니다.

   1:  //Radiometer 카테고리의 디바이스.

   2:   

   3:  DevRadiometer* radiometer = DevRadiometerCreator::Instance().Create( “K6485” );

   4:   

   5:  DevRadiometer* radiometerEmul = DevRadiometerCreator:Instance().Create( “emulator” );

   6:   

   7:   

   8:   

   9:  //Thermometer 카테고리의 디바이스.

  10:   

  11:  DevThermometer* thermometer = DevThermometerCreator::Instance().Create( “pk2000” );

  12:   

  13:  DevThermometer* themometerEmul = DevThermometerCreator::Instance().Create( “emulator” );

  14:   

  위와 같이 Device 종류 별로 Factory 클래스를 만들어서 사용을 해 왔었는데요. 각각의 Factory 클래스 마다 반환하는 특정 클래스를 제외하면 구현 내용은 중복이 되었습니다. 이러한 중복을 제거하기 위해서 Template을 사용하여 Factory 자체를 일반화 하는 것을 구상해 보았습니다. 사용성은 아래와 같습니다.

   1:  DevRadiometer* radiometer = Factory<DevRadiometer>::Instance().Create( “K6480” );

   2:   

   3:  DevRadiometer* radiometerEmul = Factory<DevRadiometer>::Instance().Create( “emulator” );

   4:   

   5:   

   6:   

   7:  DevThermometer* thermometer = Factory<DevThermometer>::Instance().Create( “pk2000” );

   8:   

   9:  DevThermometer* thermometerEmul = Factory<DevThermometer>::Instance().Create( “emulator” );

  10:   

DevFactory.h

  이곳에 가시면 Verlet Inegration의 구현에 대해 매우 상세히 설명되어 있는 글을 보실 수 있습니다. 설명되어 있는 예제가 html5의 Canvas를 이용하였기 때문에, 크롬 브라우저나 파이어폭스 혹은 익스 9 버전으로 확인 하셔야 합니다.

위의 예제는 Verlet Integration을 이용하여 구현해본 것입니다.  전에 Euler Integration을 사용하여 비슷한걸 구현해 본적이 있는데요. Verlet Integration을 이용하면 놀라울 정도로 간단히 구현할 수 있습니다.

제가 만든게 웹상에 돌아다니니까 신기하네요.. 지돌스타님이 손봐주신거지만.. ㅋㅋ

http://webnoon.net/entry/플레시-Actionscript-30-10만개-파티클-테스트-mouseX의-비용-체험

Actionscript 3 로 만든 프로그램을 이해하기 위해서는 프로그램의 수행흐름을 따라가야 합니다. 즉, 머리속에 현재 프로그램의 수행상태, 제어흐름, 데이터 흐름등을 파악하고 있어야 합니다.

저는 플래시 프로그래밍을 하다보면, 이벤트 모델의 사용으로 인해 수많은 함수 분기가 일어나서 나중에 그 프로그램을 다시 보았을때 수행흐름을 파악하는데 어려움을 겪었습니다.

즉, 제가 원했던 것은 아래와 같은 수행흐름을 이해하기 편한 표현방법 이었다면,

실제로는 아래와 같이 되는게 일반적이였습니다.

이렇게 되면 구현내용을 일일이 파악해야지 이 프로그램이 무엇을 하는것인지 이해가 가능할것입니다.

이런 어려움을 겪고 있던 저는 얼마전 구세주와 같은 해결방법을 보게되었습니다. 바로 hika님이 포스팅 하신 “Message Queueing 서비스” 라는 포스트입니다. hika님이 알려주신 팁을 적용하면, 위와 같은 문제점은 대략 아래와 같이 해결가능해졌습니다.

(위에 예를든 프로그램과 별개입니다. 헷갈리실수도 ^^;) 아래는 디버그 결과입니다.

init 함수 안에 이 프로그램에 대한 수행흐름을 모두 나타낼수 있었습니다. 이로써 자세한 구현사항을 파악하지 않아도 이 프로그램이 무엇을 하는 프로그램인지 보다 쉽게 이해가 가능해진것 같습니다.

p.s - 제목은 마치 읽기쉬운 프로그래밍을 할수 있는 방법을 제시할것처럼 해놓았지만 결국은 “Message Queueing 서비스”에 대한 저의 감상문 정도의 글이 였습니다. ^^; 개인적으로 이런 훌륭한 팁을 마구마구 알려주시는 hika님께 매우 감사드린다는… 아무튼, 보다 구체적이고 원론적인 내용을 원하시는 분들은 위에 언급한 포스트를 읽어보세요.

웹기반 소프트웨어에 대한 자료를 조사하던중 플렉스로 제작된 그래픽 저작툴을 발견하였습니다. 아무래도 포토샵에 비해서는 기능이 부족해보이지만 플렉스로 이런 소프트웨어를 만들었다는 자체가 저에게는 놀랍기만 하네요.

Sumo Paint는 보시는 바와같이 무료는 아니지만 Try Online 버튼을 클릭하시면 테스트하실수 있습니다. 아래는 테스트 화면입니다.

위의 클래스 다이어그램은 리팩토링 하기전의 클래스 다이어그램 입니다. 언뜻보기에는 문제가 없어보이지만, AlphaStyleSoftJob과 AlphaStyleHard 클래스에서 AlphaStyle에 관한 코드가 있을듯 합니다. 또한 BetaStyleSoftJob과 BetaStyleHardJob도 마찬가지로 BetStyle에 관한 코드가 있을것 같습니다.

이러한 것을 리팩토링에서는 {중복된 코드}라는 코드의 악취라고 합니다.

중복이 발생하게 되면 유지보수 단계에서 많은 비용이 발생하게 됩니다. 위의 예로, AlphaStyle에 대한 속성값을 변경할라치면 AlphaStyleSoftJob과 AlphaStyleHardJob이라는 두개의 클래스 모두 변경이 필요합니다.

“켄트 벡의 구현 패턴” 에서는 위와 같은 중복을 없애는 한가지 방법으로 프로그램을 여러가지 작은 부분 – 짧은 구문, 짧은 메소드, 작은 객체, 작은 패키지 – 으로 나누라고 하고 있습니다.

위의 클래스 다이어그램에서 보이는 하위 클래스 AlphaStyleSoftJob에는 두개의 개념이 포함되어 있습니다. 이러한 부분을 두가지 개념으로 나누어서 개념의 중복을 없애 보면, Style과 Job 으로 나눌수 있을것 같습니다.

이렇게 나누어진 개념으로 다시 상속구조를 다이어그램으로 나타내어 본것은 아래와 같습니다.

위와 같은 구조에서는 대부분의 코드 변경이 지역적으로 일어날 것을 알수 있습니다.

저번에 “플래시의 정수 표현방법 - 2의 보수표기법” 이라는 제목으로 포스팅한 적이 있습니다. 그 포스트에 hika 님이 uint 에 관해서도 진리표 작성을 권유(?) 하셔서 한번 삽질을 해보았습니다.

우선 uint는 양의 정수만을 표현할때 사용하는 기본형으로, 32비트를 사용하여 양의 정수를 표현한다고 레퍼런스에 나와있습니다. 최대값이 int 형의 두배가 된다고도 나와있는데 (즉, 2^32  – 1 ,정확히 두배는 아니…음..) 여기에서 32비트 전부를 수를 표현하는데 사용한다는걸 알수 있었습니다.

그럼 간단히 테스트를 해본 결과를 보겠습니다.

위 그림과 같이 255 크기의 uint 를 byteArray에 쓰고, 한 바이트씩 읽었습니다.

여기서 4번째 바이트를 읽어왔을때 반환값이 –1 인것을 볼수 있는데, 이것은 ByteArray의 readByte() 메소드는 int형을 반환하고, 2의 보수표기법을 사용하는 int형은 비트열 11111111 을 -1로 표현한다는것을 알수 있습니다.

따라서 플래시의 uint형은 비트열의 32비트열의 2진 체계를 그대로 10진법으로 변환하여 표현해주는 방식을 사용한다고 볼수 있겠습니다.

플래시 빌더4를 사용해서 Actionscript Project 형식으로 Air 프로젝트를 생성 하는 방법을 알아보겠습니다.

1. File > New > "Flex Project"
2. 프로젝트 이름을 입력합니다. 예로, “Foo”
3. "Desktop (runs in Adobe AIR)" 를 선택합니다.
4. "Finish" 버튼을 클릭.
5. "Foo.mxml" 지웁니다.
6. File > New > ActionScript Class 에서 Sprite 를 상속받는 Foo.as 파일을 생성합니다.
7. 완료 버튼 클릭.
8. "Foo.as" 파일에 마우스 우측 버튼을 클릭후,  "Set as Default Application" 를 선택합니다.
9. Foo.as 생성자에 다음과 같이 입력합니다. "this.stage.nativeWindow.visible = true;"
10. Run & Done!

플래시에서 정수를 표현하기 위해 어떤 비트패턴을 사용하는지 알아보고 정수를 사용할 때 나타날수 있는 이슈사항들에 대해 알아보도록 하겠습니다.

1. 컴퓨터의 정수표현 - 2의 보수 표기법

2의 보수 표기법(two’s complement) 은 컴퓨터에서 정수 표현에 사용되는 표기법이며 다른 표기법으로는 초과 표기법이 있습니다.

이 글에서는 플래시에서 정수를 표현하는데 사용되는 2의 보수 표기법에 대해서 알아보도록 하겠습니다.

현재 플래시는 길이가 32인 비트패턴을 사용하여 정수를 표현하고 있습니다. 여기서는 2의 보수 표기법이 무엇인지 설명하기 위해 내용전달이 충분히 가능면서 보다 설명하기 편한 길이가 4인 비트패턴을 사용하겠습니다.

2의 보수 표기법은 양수와 음수의 정보를 나타내는 하나의 최상위 비트와 나머지 값을 나타내는 비트들로 이루어져 있습니다. 길이가 4인 비트패턴으로 예를 들면 아래 표와 같습니다.

2의 보수 표기법에서 최상위 비트(제일 왼쪽 비트) 0은 양수를 , 1은 음수를 표현합니다. 이는 부호비트(sign bit) 라고 불립니다. 나머지 3비트는 정수의 크기를 나타내는데, 양수 표현에서는 일반 2진 체계로 정수를 나타내는 방법과 동일합니다. 즉, 정수 3은 2진 체계로 010 의 값으로 나타낼수 있습니다.

여기서 음의 정수를 표현한 비트패턴과 양의 정수를 표현한 피트패턴 사이에는 재미있는 규칙이 있습니다. 양의 정수 비트패턴을 오른쪽에서 왼쪽으로 읽어나갈 때 처음으로 1이 나오는 부분까지는 양과 음의 비트패턴이 같고, 나머지는 양의 정수 비트패턴과 보수관계 입니다. 예를 들어 정수 2와 -2의 비트 패턴을 살펴보면, 비트 패턴의 오른쪽으로 부터 2번째에 처음으로 1이 나오고, 3번째 부터는 양수와 음수의 비트패턴이 보수관계에 있는것을 볼수 있습니다. (보수 관계란 1은 0 , 0은 1 이 되는것을 말함.)

위의 보수 관계를 이용하면 음의 정수 7의 비트패턴을 양의 정수 7의 비트패턴을 이용하여 구할수가 있는데, 다음과 같이 양의 정수 7의 비트패턴을 구하고 (0111), 오른쪽으로부터 처음으로 1이 나오는 자리 다음부터 보수를 취하면 됩니다. (1001)

2. 플래시의 int 를 사용할때 나타날수 있는 이슈사항

정수를 표현하기 위해 이용하는 비트의 자리수에 따라 표현할수 있는 정수의 최대값과 최소값이 정해지는데, 위의 4비트로 예를 들면, 부호 비트 하나를 제외한 나머지 비트열들의 경우의 수 만큼 정수를 표현할수 있습니다( 즉, 양수는 2^3 –1 , 음수는 - 2^3 ).  플래시는 정수를 표현하기 위해 길기가 32인 비트패턴을 사용하므로, 최대값은 2^31 – 1 , 최소값은 -2^31 이 됩니다.

얼마전 팀에서 모 증권 사이트 프로젝트를 진행한적이 있는데, 다른 팀원분이 금액을 나타내기 위해 int 형을 사용해서 이슈가 되었던 적이 있습니다. 즉, 원(WON) 단위 금액을 표현하는데, 최대로 표현할수 있는 수 2,147,483,647 (약 21억) 을 넘어가니까 오버플로(overflow) 가 발생한것이지요.

XML 파일을 수정할때 종종 생기는 오류 메세지입니다. 정확한 원인은 모르겠지만 컴파일 차원에서 오류가 생기는것 같네요. 아무튼 해결법은 아래와 같습니다.

 오류 메세지에 마우스 오른쪽 버튼 클릭후 "Delete"를 선택.

벡터 외적 연산의 핵심은 연산한 결과가 연산한 두 벡터에 수직인 벡터로 표현된다는 점이였습니다.
외적 연산의 수학적 표기방법은 X 를 사용합니다.
(내적은 dot를 사용해서 dotproduct , 외적은 X 를 사용해서 crossProduct라고 불립니다.)



위 SWF 에서 볼수 있듯이

 녹색 선은 L2 벡터.
빨간색 선은 L1 벡터.
파란색 선은 L3 벡터. 로 표현하고 있고,

 L2 X L1 = L3 의 결과를 나타내고 있습니다.

 화살표키로 로테이션 시킬때마다 L2 X L1 의 연산결과를 나타내고 있습니다.

내장 Vector3D API 를 사용한 연산은 아래와 같습니다.

var l1 : Vector3D = new Vector3D(100,0,0);
var l2 : Vector3D = new Vector3D(0,100,0) ;
var l3 : Vector3D = l1.crossProduct(l2) ;

위 코드에서 벡터 l1은  방향은 x축방향이고 크기는 100 인 벡터입니다.
l2 는 방향은 y축 방향, 크기는 100인 벡터입니다.

 두 벡터의 외적 연산 결과는 l3로 벡터이며, 크기는 |l1|*|l2|*sin@ (여기서 @는 l1과 l2의 사이각) 이고 방향은 양의 Z축과 평행한 방향입니다.(l1과 l2의 수직한 방향).

 만약 여기서 외적 순서를 바꿔서 l2.crossProduct(l1) 을 하게 되면 l3는 크기는 위와 같고 방향은 음의 z축방향을 향하게 됩니다.

 여기서 볼수 있듯이 외적계산은 교환법칙이 성립하지 않으며, 이러한 성질을 이용해서 3D 엔진에서 평면을 렌더링할때,평면이 앞을 바라보고 있는지 뒤를 바라보고 있는지 알수 있습니다.

 예를들어, l3와 시선벡터 Vector(0,0,-1)를 내적을 하게 된 결과가 양수이면 앞면을 바라보고 있는것이고, 음수이면 뒤를 바라보고 있는것입니다.

위 예제 sWF에서 l3와 Vector(0,0,-1)을 내적해서 양수(앞면)이면 노란색으로 평면을 칠하고, 음수(뒷면)이면 회색을 칠하도록해보았습니다.

이 오류로 몇일을 허비했는지 모르겠습다.

분명 JMyron 인스톨 가이드대로 모든 dll 설치와 경로를 잡아주었는데도 불구하고 위에 오류가 발생했던 이유는..
MSVCP71.DLL 과 MSVCR71.DLL 파일이 없었기 때문이었습니다.

위 두 파일은 http://whitewnd.tistory.com/10 에서 다운받을수 있고, 오류가 났던 이유와 설치 가이드가 있습니다.

• 시작하기 전에
• jQuery를 처음 시작하시는 분은 웹눈 jquery 강좌 1 "어려운 개념은 버리고 바로 시작하기" 를 먼저 보시기를 권장합니다.
• 모든 웹눈 jQuery 강좌를 보시려면 이곳에서 보실수 있습니다.
• 문제
• 버튼이나 링크를 클릭해서 폰트의 크기를 변경하고 싶다.
  (대부분의 뉴스 사이트에서 구현되어 있는 기능)
  
  

  그림 1-1

  
  
• 해결
• jQuery를 통해 현재의 폰트 사이즈를 알아낸 다음 그 수치에 버튼을 클릭할때마다 +1 이나 -1 을 해줌으로써 폰트 사이즈를 변경합니다.
• 토의
• 위 그림 1-1 에서 볼수 있듯이 크게, 작게 링크를 클릭하게 되면 현재 폰트 사이즈에서 +1이나 -1을 해줍니다. 예제 소스는 아래와 같습니다.
  
  
  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>폰트 사이즈 바꾸기 - 웹눈의 웹이야기</title>

  
  

  <script type="text/javascript" src="jquery.txt"></script>

  <script type="text/javascript">

  //현재 폰트 사이즈를 저장할 전역 변수

  var currentFontSize ;

  //문서가 준비되었는지 이벤트를 걸어준다.

  $(document).ready(init);

  //초기화

  function init()

  {

  // 1. 크게, 작게 링크에 이벤트를 걸어줍니다.

  $("#fontControll li a").click(clickHandler);

  }

  //크게, 작게 링크가 클릭되었을때 처리하는 함수

  function clickHandler(e)

  {

  //이벤트 전파를 막는다.

  e.preventDefault(); 

  //크게, 작게 중 어느것이 클릭되었는지 판별

  var whichClicked = $(this).attr("id");

  //현재의 폰트 사이즈를 전역 변수에 저장한다.

  currentFontSize = parseInt($(".article").css("font-size"));

  //클릭된 링크에 따라 폰트를 크게 혹은 작게 설정합니다.

  switch(whichClicked)

  {

  case "larger" :

  //1폰트 크게한다.

  setFontSize(1) ;

  break ;

  case "smaller" :

  //1폰트 작게한다.

  setFontSize(-1) ;

  break ;

  }

  }

  function setFontSize($size)

  {

  var totalFontSize = currentFontSize + $size ;

  $(".article").css({"font-size":totalFontSize+"px"});

  }

  
  

  </script>

  
  

  <style type="text/css">

  
  

  #fontControll li{

  display:inline ;

  font-size:12px ;

  }

  
  

  .article {

  font-size:12px ;

  }

  
  

  </style>

  
  

  </head>

  <body>

  <div id="titles">

      <h1>폰트 크기 바꾸기 예제 - <a href="http://webnoon.net" target="_blank">웹눈의 웹이야기</a></h1>

      </div>

      <div id="fontSizeControllBox">

          <ul id="fontControll">

              <li><a href="http://naver.com" id="larger">크게</a></li>

              <li><a href="http://google.com" id="smaller">작게</a></li>

          </ul>

      </div>

      <div id="contents">

          <p class="article">

              이번 예제는 뉴스 사이트에서 흔히 볼수있는 폰트 사이즈를 변경해보는것입니다.<br />

              크롬, 파이어폭스, 익스플로어7 에서 테스트 되었습니다.<br />

              이 예제의 자세한 설명은 웹눈 블로그 <a href="http://webnoon.net" target="_blank">http://webnoon.net</a> 에서 자세히 보실수 있습니다.

          </p>

      </div>

  
  

  </body>
  
  
  
• 코드는 매우 직관적으로 짜여져 있습니다. 여기서 "이벤트를 걸어준다" 라는 말이 모호하게 느껴질수도 있는데, 이말은 "이벤트 발생을 탐지한다" 정로도 해석할수 있겠습니다.
  
  즉, $(document).ready([callbackFunction]) 에서는 "문서가 로딩이 완료될때 발생시키는 이벤트" 를 탐지하기 위해서 $(document) 객체에 ready라는 이벤트를 걸어주었습니다.
  
  마찬가지로 크게, 작게 링크[$("#fontControll li a")]에도 click 이벤트를 탐지하도록 이벤트를 걸어준것입니다.(여기서 걸어준다는 표현은 전문용어가 아니므로 참고해주시기 바랍니다.)
  
  나머지 부분은 주석으로 자세히 설명되어 있어서 더이상 설명은 생략하겠습니다만, 질문이 있으시면 언제나 댓글란을 이용해주세요.
• 참고자료
• 예제 소스 다운로드 - 
  changeFontSizeExample.zip

• 문제
• 웹캠을 통해 영상이미지를 출력하고 싶다.
• 해결
• Window 운영체제에서는 QuickTime과 vdig(video digitizer)를 설치한다.
• 개발이 중단된 vdig 대신에 JMyron 라이브러리를 사용한다.
• 토의
• QuickTime은 검색엔진에서 손쉽게 검색해서 다운받을수 있다. QuickTime을 설치한후에는 vdig를 설치하자. 개발이 중단되었지만 http://eden.net.nz/7/20071008 에서 다운받을수 있다.
• vidig를 인스톨한다.
• processing 코드
  
  import processing.video.* ; //video 라이브러리를 임폴트함.
  import processing.core.*;
  
  public class VideoTest extends PApplet
  {
  
  

  private Capture cam ; // Capture 오브젝트 선언.
  

  
  

  public VideoTest()
  {
  
  }
  
  public void setup()
  {
  

  size(320,240);
  /* PApplet args0, int width, int height, int frameRate*/
  cam = new Capture(this,320,240,15);
  
  

  }
  
  public void draw()
  {
  

  if(cam.available())
  {
  

  cam.read() ;
  

  }
  
  image(cam,0,0) ;
  

  }
  

  }
  
• 기타
• JMyron 라이브러리는 모션 트래킹등을 손쉽게 할수 있는 메서드를 제공한다.
• JMyron 관련한 예제는 추후에 하나씩 다루어보도록 하겠습니다.
• 참고자료
• Process 을 Eclipse 에서 개발하기.
  

• 해결
• PDE (Processing Development Environment) 에서 제공하는 CreatFont 기능을 사용합니다.
• 예제
• PDE 를 실행한다.
• 프로젝트를 저장합니다. (저장하지 않고 실행할시 폰트파일이 만들어지지 않음.)
  
• PDE 메뉴의 Tools -> CreatFont 선택.
  
  

  그림 1-1

• 그림 1-1 과 같은 창이 뜨면 원하는 폰트를 선택한후 OK 버튼을 클릭합니다. 이때, Filename을 기억하고 있어야 합니다.
• 위 그림 1-1 경우 ArialMT-36.vlw 파일이 프로젝트 폴더의 data 폴더 안에 생성됩니다.
• 예제 코드
  
  PFont f; // STEP 2 Declare PFont variable
  void setup() {
  

  size(200,200);
  f = loadFont( "ArialMT-36.vlw " ); // STEP 3 Load Font
  

  }
  void draw() {
  

  background(255);
  textFont(f,16); // STEP 4 Specify font to be used
  fill(0); // STEP 5 Specify font color
  text ( " Mmmmm... Strings ... " ,10,100); // STEP 6 Display Text
  

  }
  
• Eclipse 예제 코드
  
  package test;
  
  import processing.core.*;
  import processing.opengl.*;
  
  public class MyProcessingSketch extends PApplet{
     
      private float a ;
      private PFont f ;
      private float _x = 0.0f;
      private float _y = 0.0f;
     
      public MyProcessingSketch()
      {
         
      }
     
      public void setup()
      {
  
          size(800, 600,OPENGL);
           
            f = loadFont("asset/YGO550-48.vlw");
           
      }
     
     
      public void draw() {
  
          background(255);
          fill(0) ;
          textFont(f,16) ;
          textAlign(CENTER) ;
         
          rotateX(radians(_x)) ;
         
          translate(width/2, height/2) ;
          text("이",10*cos(radians(_x)),10*sin(radians(_x))) ;
         
          _x++ ;
         
      }
     
  }
  
  
  

1. 프로세싱 라이브러리를 Import 합니다.
1. 이클립스 메뉴에서 FILE -> IMPORT -> GENERAL -> FILE SYSTEM을 클릭.
2. "from directory"란에서 "Browse..."를 클릭하여 프로세싱 라이브러리가 있는 폴더를 지정합니다.
   Processing -> Contents -> Resources -> Java
3. core.jar 를 선택후 "FINISH"를 클릭.
   
   

   이클립스 메뉴에서 FILE --> IMPORT --> GENERAL --> FILE SYSTEM.

2. 아래 그림과 같이 "Packgae Explorer" 상에 core.jar 이 보여야 합니다.
   
   
3. core.jar 아이콘을 마우스 오른쪽 버튼으로 클릭후 BUILD PATH --> ADD TO BUILD PATH 를 선택합니다.
4. 아래와 같은 새로운 클레스를 생성하면 프로세싱 라이브러리 사용가능합니다.
   

   import processing.core.*;
   
   
   
   public class MyProcessingSketch extends PApplet {
   
   
   
     public void setup() {
   
       size(200,200);
   
       background(0);
   
     }
   
   
   
     public void draw() {
   
       stroke(255);
   
       if (mousePressed) {
   
         line(mouseX,mouseY,pmouseX,pmouseY);
   
       }
   
     }
   
   }

   
   

more..

glOrtho 와 glViewprt 는 화면에 그리고자 하는 Shape을 원하던 위치와 원하던 사이즈로 표현가능하도록 도와줍니다.

glViewport 는 윈도우상에 표현하고자 하는 사물이 그려지는 영역(area)를 정의합니다. 예를들어 사물이 표시되는 영역을 전체 영역으로 설정하는것은 아래와 같습니다.

glViewport(0, 0, ClientWidth, ClientHeight);

// 처음 두개의 매개변수는 좌측 하단 좌표, 나머지는 사이즈 정보값.

위와같이 설정하면 아래 그림처럼 윈도우 전체 영역에 걸쳐 사물이 그려집니다.

만약 윈도우 창의 좌하단 25픽셀 영역에서만 사물을 그려지게 하고 싶다면 아래와 같이 설정합니다.

glViewport(0, 0, 25, 25);

만약 처음 두개의 매개변수를 마이너스로 설정하면, 그려지는 영역은 화면 좌측으로 영역을 벗어나게 됩니다.

void glViewport(GLint x, GLint y, GLsizei width, GLsizei height);

procedure glViewport(x,y: GLint; width, height: GLsizei); stdcall;

glOrtho

void glOrtho(GLdouble left,

             GLdouble right,

             GLdouble bottom,

             GLdouble top,

             GLdouble near,

             GLdouble far)


procedure glOrtho (left, right, bottom, top, zNear, zFar: GLdouble); stdcall;

glOrtho 는 glViewport 와 관련있지만 개념은 완전히 다릅니다. OpenGL에서는 기존의 윈도우 좌표체계를 완전히 무시할수 있습니다. 즉, glOrtho를 설정함으로써 자신이 원하는 좌표체계를 만들수 있습니다.