슬라이더

슬라이더 사용하기

• 나중에 이 값을 마우스, 키보드, 삼각함수 등으로 대체하는 데에 좋은 연습.

• 웹사이트에서 데모를 만들거나 generator를 만드는 데에도 좋음.

• 슬라이더 배치는 왼쪽 혹은 오른쪽 측면에 세로로 모아보기.

  • 참고: 제너레이터

  • 2D 좌표계를 기준으로 배치해야 함.

슬라이더 셋업

• https://p5js.org/ko/reference/#/p5/createSlider

• https://openprocessing.org/sketch/1940356

  • week3-basic.js 코드에다가 아래 내용을 추가해보자.

/** 
이 변수들은 setup, draw 함수 모두에서 사용되므로, 
글로벌 변수로 만든다. 
**/
let slider1;
let slider1_value = 0;

function setup() {
    /** 기존 코드 생략 **/
    
    /** createSlider()라는 p5js 제공함수로 새로운 슬라이더를 만든다. 
    파라미터 순서: 최소, 최대, 기본값, 간격  
    예시) 0부터 시작 200까지 슬라이더로 값을 조정할 수 있다. 
    슬라이더 시작은 1px부터이고, 숫자값은 1px 단위로 조정할 수 있다.
    **/
    slider1 = createSlider(0, 200, 1, 1);

    /** 슬라이더에 position 함수를 써서 캔버스 상 위치를 잡는다. 
    캔버스를 밖을 벗어나게 배치할 수도 있다. 
    도형과 겹치지 않게 배치해보자. **/
    slider1.position(width, 10);
}
function draw() {
    /** 기존 코드 생략 **/
    
    slider1_value = slider1.value();
    ellipse(width * 0.5, height * 0.5, slider1_value, slider1_value);
    
    for(let d = 0; d < width; d += slider1_value) {
        ellipse(width * 0.5, height * 0.5, d, d);
    }
	
    
}

코딩 방법

• slider1, slider1_value를 글로벌 변수로 만든 이유

  • 각기 다른 function들(setup, draw)에서 쓰고 있기 때문.

• draw() 함수 안에서 slider1_value = slider1.value(); 코드를 작성하는 이유

  • slider는 계속 사용자가 실시간으로 변경할 수 있기 때문에, 실시간으로 값을 업데이트하기 위함.

    • setup 함수에다가 위 코드를 쓰면, 맨 처음에만 slider1_value이 설정되고, 그 후로 바뀌지 않을 것이다.

    • draw 함수는 1초에 30-60번씩 반복 실행되기 때문에, 실시간으로 slider1_value 변수 값을 업데이트해준다.

function draw() {
    /** 생략 **/
    slider1_value = slider1.value();  // 다른 정수나 소수를 곱해서 크거나 작은 숫자 범위로 계산 가능.
    console.log(slider1_value);
}

응용

• 슬라이더를 이용해서 속도 조절하기.

• 슬라이더를 이용해서 회전하기.

• 슬라이더를 이용해서 위치 움직이기.

• 원형으로 배치한 도형 => 반지름 값을 슬라이더로 변경하면?

심화1. 색깔과 슬라이더

• lerp https://p5js.org/ko/reference/#/p5/lerpColor

• 선형 보간, 혹은 linear interpolation

• 그라디언트 효과를 수학적으로 나타내는 방식이다.

심화2

• 기본 html에서 슬라이더를 만드는 법

• 일반 웹개발에서 슬라이더 자체는 html 엘리먼트로 만들 수 있다. 다만, 이 슬라이더의 값을 실시간으로 반영해서 웹사이트 상의 무언가를 바꾸려면, javascript 프로그래밍이 필요하다.

응용: 그래픽에 어떤 변주를 줄 수 있을지 생각하자.

1. 배경 혹은 도형 색깔 - r, g, b?

2. 반복문: x, y 간격을 gap 변수만큼 업데이트. gap이 작을수록 촘촘히, gap이 클수록 띄엄띄엄.

3. 위치: translate(x, y)를 통해서 캔버스 전체에 가로, 세로로.

4. 회전: rotate() 함수에 슬라이더 변수 사용.

5. 크기 비율: scale() 함수 파라미터에 -1을 주면 좌우 혹은 위아래로 뒤집는 효과.

6. color 함수

// 아래 코드는 어떤 효과를 만들까?
// gap 변수가 어디 쓰이고, 어떤 것을 업데이트하는지 살펴보자.

/** slider에 필요한 글로벌 변수 모두 작성했다고 가정한다. **/

function setup() {
 /** 여기서 slider1 ~ slider4 까지 모두 생성했다고 가정한다. **/
}
function draw() {
    /** 기본 코드 생략 **/
    /** slider1_value ~ slider4_value 코드 모두 작성했다고 가정한다. **/
    
    let gap = slider1_value;
    for(let x = 0; x < width; x = x + gap) {
        for(let y = 0; y < height; y = y + gap) {
            push();
            translate(x, y);
            rotate(slider2_value);
            scale(-1, slider3_value); 
            fill(slider4_value, 75);
            myShape();
            pop();
        }
    }
}

---