돌돌쌤

마우스 이동제한

물체가 마우스를 따라다니며

이 물체는 정해진 경계에서만 따라다니도록 한다.

스케치 소스

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

float mx;

float my;

float easing = 0.05;

int radius = 24;       // 마우스를 따라다닐 원의 반지름

int edge = 56;

int inner = edge + radius;

void setup(){

  size(480,320);

  noStroke();

  smooth();

  ellipseMode(RADIUS);

  rectMode(CORNERS);

}

void draw(){

  background(255);

  if(abs(mouseX-mx)>0.1){                  // 마우스의 x위치와 mx값이 0.1이라도 차이가 있으면

    mx = mx + (mouseX -mx)*easing;     //mx값을 재계산 이전mx값에 (mouseX-mx)*0.05 값 만큼 보정

                                                       // 결국 mx값은 현재의 마우스 x좌표 값으로 수렴함.

                                                        // (mouseX-mx)차이가 클수록 빨리 수렴함.

  }

  if(abs(mouseY-my)>0.1){

    my = my + (mouseY -my)*easing;

  }

  mx = constrain(mx,inner, width-inner);     // mx 값을 아래 사각형 너비 값으로 제한

  my = constrain(my,inner, height-inner);    // my 값을 아래 사각형 높이 값으로 제한

  fill(150);

  rect(edge,edge,width-edge,height-edge);

  fill(255);

  ellipse(mx,my,radius,radius);      // mx,my를 중점으로 24의 반지름을 갖는 원

} 

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

영상

프로세싱 수학함수 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()