돌돌쌤

프로세싱 수학함수 1

프로세싱에서 수학적인 데이터 처리를 통한

드로잉 표현을 위해

수학함수를 알아보자

스케치 소스

-------------------------------------------------------------------

void setup(){
  size(480,360);     // 창의 크기
  background(255);
  //noLoop();
}

void draw(){
  println(abs(-12.34));   // 절대값 12.34
  println(ceil(6.2));        // 올림 7(결과값 정수)
  println(floor(6.8));       // 내림 6(결과값 정수)
  println(round(6.5));     // 반올림 7(결과값 정수)
  println(constrain(mouseX,100,200));   // 마우스의x좌표를 100~200 사이값으로 제한

                                                        // x좌표가 90 이면 100으로 표현
  println(dist(10, 20, mouseX, mouseY));  // (10,20)에서 현재 마우스의 x,y까지의 거리 표현
  println(mag(mouseX, mouseY));   // (0,0)에서 현재 마우스의 x,y까지의 거리 표현
  println(exp(4));     //   e^4
  println(sq(4));       //  4^2
  println(sqrt(4));     // 4의 루트값 (4^0.5)
  println(pow(2,3));  // 2^3
  println(norm(127.5,0,255));    // 0~255사이의 127.5 값을 0~1사이의 대응값으로 표현 -> 0.5
  println(lerp(0,255,0.5));         // 0~1사이의 0.5값을 0~255사이의 대응값으로 표현 -> 127.5
  

/* 그래프 그리기 */
  for(int x=0; x<500;x++){
    float k = norm(x,0.0,500);   // 0~500사이의 x 값을 0~1 사이값으로 변환후 k에 저장
    float y = sq(k);      // 0~1사이의 k 값을 제곱후 y에 저장
    y*=500;        // 결국 y=500*sq(k)
                       //.....> 왜 y=500*sq(x)가 아닌가는 
                       // 그래프를 표현할 창사이즈가 x=480, y=360인데(size(480,360))
                       //  sq(20)=400으로 x가 20아상 값으로 그래프를 표현하기 힘듦
                       // x축의 스케일 조정 필요

                       // x값은 픽셀수 이므로 적당한 계산 필요, 즉 10픽셀을 -> 눈금 1로 계산한다든지....(k=x/10)
    point(x,y);    // 포인트를 찍어 그래프를 그린다.
  }
}

----------------------------------------------------------------------------------------------------------------------------

그래프 표현

프로세싱 레퍼런스 http://processing.org/reference/

Calculation

프로세싱 마우스 클릭으로 사각형 만들기

draw안에서 mousePressed를 넣은 스케치 소스

-------------------------------------------------------

void setup(){

  size(480,360);

  background(255);

  noStroke();

  rectMode(RADIUS);    //사각형 그리기 모드RADIUS는 시작점을 중심으로 

                                     가로 세로값이 반지름으로 ...

}

void draw(){

  if(mousePressed){                      // 마우스가 클릭되면

    float a = random(0,255);              // random() 0~254사이의 임의 값 호출

    fill(a,random(0,255),random(0,255));

    rect(mouseX,mouseY,25,25);     //mouseX, mouseY를 중심으로 가로세로 50x50의 크기로 그려짐

  }

}

--------------------------------------------------------

동작 영상

mouse이벤트 스케치 소스

---------------------------------------------------------

void setup(){

  size(480,360);

  background(255);

  noStroke();

  rectMode(RADIUS);

}

void draw(){

}

void mousePressed(){                          // 마우스 이벤트가 일어나면 실행

  float a = random(0,255);

  fill(a,random(0,255),random(0,255));

  rect(mouseX,mouseY,25,25);

}

----------------------------------------------------------

동작영상

프로세싱 레퍼런스 http://processing.org/reference/

mouseDragged()
mouseMoved()
mousePressed()
mousePressed
mouseReleased()

프로세싱 이전 마우스 좌표를 이용한 선그리기

이전 마우스 좌표 pmouseX, pmouseY

소스스케치

-------------------------------------------------------------------------

void setup() {

  size(480, 360);

  background(255);

}

void draw() {

  //background(255);      // 이곳에서 반복적으로 배경색을 채운다면 

//선을 그리는 것이 아닌 점 찍을것임

//마치 마우스에 점이 따라다니는 것처럼 보임.

  stroke(mouseY,mouseX,abs(mouseX-mouseY));     // 선색주기

  strokeWeight(5);                                                   // 선 두께

  line(pmouseX, pmouseY, mouseX, mouseY);          // 이전 마우스좌표에서 현재마우스좌표로선그리기

}

-----------------------------------------------------------------------------

적용영상

darw() 안에 background(255)를 쓸경우 적용영상

프로세싱 레퍼런스 http://processing.org/reference/

pmouseX
pmouseY