텍스트 + 슬라이더

텍스트 반복해보기 + 슬라이더

1. setup()에서 슬라이더1, 2 만들기.

2. draw()에서 슬라이더 값을 변수로 지정하기.

3. 해당 변수를 텍스트 함수와 반복문에서 사용하기.

// 슬라이더의 캡션용 텍스트
text('텍스트 반복', slider_xpos, 20); 
text('텍스트 사이즈', slider_xpos, 60);

// 슬라이더의 현재 값 가져오기.
slider1_value = slider1.value();
slider2_value = slider2.value();

// 슬라이더 값을 변수로 이름 붙여주기.
let text_repeat = slider1_value;
let text_size = slider2_value;

// 이어서..

---

이어서

• 반복문의 최소, 최대 값을 slider1_value로 대체해보기.

push();
textSize(text_size);
translate(width*0.5, height*0.5);

for(let x = -text_repeat; x < text_repeat; x = x + 1) {
    for(let y = -text_repeat; y < text_repeat; y = y + 1) {
        text("H", x * text_size, y * text_size);
    }
}
pop();

---

키보드를 타이핑해서 텍스트를 바꿔보기.

1. keyPressed() 함수 사용하기.

2. console.log()로 실시간 값 찍어보기.

3. 키보드로 입력한 실시간 텍스트를 담을 변수 만들기.

4. 변수 사용하기.

let currentKey = "H";

function keyPressed() {
	console.log(key);
	currentKey = key;   // 실시간 키보드 입력값을 currentKey 변수에 담는다.
}

키보드 입력 칸을 만들어서 텍스트 반영해보기

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

이어서

function draw() {
    // 생략...
    push();
    textSize(text_size);
    translate(width*0.5, height*0.5);

    for(let x = -text_repeat; x < text_repeat; x = x + 1) {
        for(let y = -text_repeat; y < text_repeat; y = y + 1) {
            text(currentKey, x * text_size, y * text_size);
        }
    }

    pop()
}

---

텍스트 스케일 + 슬라이더

• 캔버스 중앙에 배치. 텍스트 중앙 정렬

• 세로로 반복.

• 가로, 세로 스케일을 슬라이더로 조정.

function draw() {
    let text_repeat = slider1_value;
    let text_size = slider2_value;
    let textScaleX = slider3_value;     // 추가
    let textScaleY = slider4_value;     // 추가
    let yGap = slider5_value;           // 추가

    // 이어서...
}

---

이어서

push();
textSize(text_size);
textAlign(CENTER);
translate(width*0.5, height*0.5); // 이제 기준점이 캔버스의 중앙이 됨.

for(let y = -text_repeat; y < text_repeat; y = y + 1) {
    push();
    translate(0, y * yGap);
    scale(textScaleX, textScaleY);
    text("HELLO THIS IS TEXT", 0, 0);
    pop();		
}

pop();

---