News Download Tutorial FAQ Reference Buy

자바스크립트 : 복잡한 명령 수행하기

일정 시간 동안 움직이기
햄스터 로봇이 1초 동안 앞으로 이동한 후 정지하게 해봅시다. 자바스크립트의 setTimeout 함수를 사용하면 일정 시간(msec) 후에 명령을 수행할 수 있습니다.

var hamster = Hamster.create();
hamster.wheels(30, 30); // 앞으로 이동한다.

// 1초 후에 수행할 명령을 설정한다.
setTimeout(function() {
    hamster.wheels(0, 0); // 정지한다.
}, 1000); // 1초 후에 function() {} 안의 명령을 수행한다.

1초 동안 후진하거나 회전하기 등 다양한 동작을 만들어 봅시다.
햄스터 룰렛
햄스터 로봇이 무작위 시간 동안 제자리에서 돌게 하여 룰렛 게임을 만들어 봅시다.

자바스크립트의 Math.random() 메소드는 0부터 1까지(1은 포함되지 않음)의 무작위 수를 반환합니다. 1초부터 10초까지의 무작위 시간 동안 제자리에서 돌게 해봅시다.

var hamster = Hamster.create();
hamster.wheels(-30, 30); // 제자리에서 왼쪽으로 돈다.

setTimeout(function() {
    hamster.wheels(0, 0); // 정지한다.
}, (Math.random() * 9 + 1) * 1000);

햄스터 로봇이 제자리에서 도는 속도를 10부터 100까지의 무작위 속도로 해봅시다.
순서대로 명령하기 (순차)
햄스터 로봇이 1초 동안 앞으로 이동한 후 1초 동안 뒤로 이동하게 해봅시다. 자바스크립트의 setTimeout 함수는 일정 시간 후에 수행할 명령을 설정할 뿐, 그 시간 동안 가만히 있지 않고 다음 줄의 코드(두 번째 setTimeout 함수)를 바로 실행합니다. 두 번째 setTimeout 함수의 시간을 1000으로 하면 1초 후에 뒤로 이동하는 명령과 정지하는 명령이 같이 수행되기 때문에 원하는 동작이 수행되지 않습니다. 시간을 누적하여 설정해 주어야 합니다.

var hamster = Hamster.create();
hamster.wheels(30, 30); // 앞으로 이동한다.

// 1초 후에 수행할 명령을 설정한다.
setTimeout(function() {
    hamster.wheels(-30, -30); // 뒤로 이동한다.
}, 1000); // 1초 후에 function() {} 안의 명령을 수행한다.

// 2초 후에 수행할 명령을 설정한다.
setTimeout(function() {
    hamster.wheels(0, 0); // 정지한다.
}, 2000); // 2초 후에 function() {} 안의 명령을 수행한다.

햄스터 로봇이 1초 동안 앞으로 이동한 후 1초 동안 제자리에서 왼쪽 또는 오른쪽으로 돌게 해봅시다.

햄스터 로봇이 장애물(검은색 사각형)을 피해 오른쪽 원 안으로 들어가야 합니다. 왼쪽 바퀴와 오른쪽 바퀴의 속도 및 시간을 설정하고, 여러 명령을 순서대로 수행하여 목표 지점으로 이동할 수 있도록 해봅시다.

노래 연주하기
간단한 노래를 연주해 봅시다. 같음 음을 연속으로 연주할 때는 음을 구분하기 위해 짧게 쉬어 주는 것이 좋습니다. 시간을 누적할 변수(timeout)를 사용합시다.

var hamster = Hamster.create();
var timeout = 0;

hamster.note(Hamster.NOTE_C_4); // 4옥타브 도 음을 소리낸다.
timeout += 500; // 도 음을 0.5초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_E_4); // 0.5초 후에 4옥타브 미 음을 소리낸다.
}, timeout);
timeout += 500; // 미 음을 0.5초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_G_4); // 0.5초 더 후에 4옥타브 솔 음을 소리낸다.
}, timeout);
timeout += 500; // 솔 음을 0.5초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_C_4); // 0.5초 더 후에 4옥타브 도 음을 소리낸다.
}, timeout);
timeout += 500; // 도 음을 0.5초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_E_4); // 0.5초 더 후에 4옥타브 미 음을 소리낸다.
}, timeout);
timeout += 500; // 미 음을 0.5초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_G_4); // 0.5초 더 후에 4옥타브 솔 음을 소리낸다.
}, timeout);
timeout += 500; // 솔 음을 0.5초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_A_4); // 0.5초 더 후에 4옥타브 라 음을 소리낸다.
}, timeout);
timeout += 450; // 라 음을 0.45초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_OFF); // 0.45초 더 후에 소리를 끈다.
}, timeout);
timeout += 50; // 0.05초 동안 짧게 쉰다.

setTimeout(function() {
    hamster.note(Hamster.NOTE_A_4); // 0.05초 더 후에 4옥타브 라 음을 소리낸다.
}, timeout);
timeout += 450; // 라 음을 0.45초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_OFF); // 0.45초 더 후에 소리를 끈다.
}, timeout);
timeout += 50; // 0.05초 동안 짧게 쉰다.

setTimeout(function() {
    hamster.note(Hamster.NOTE_A_4); // 0.05초 더 후에 4옥타브 라 음을 소리낸다.
}, timeout);
timeout += 500; // 라 음을 0.5초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_G_4); // 0.5초 더 후에 4옥타브 솔 음을 소리낸다.
}, timeout);
timeout += 1000; // 솔 음을 1초 동안

setTimeout(function() {
    hamster.note(Hamster.NOTE_OFF); // 1초 더 후에 소리를 끈다.
}, timeout);

음악 시간에 배운 다른 노래도 연주해 봅시다.
사각형 모양으로 이동하기
햄스터 로봇이 사각형 모양으로 이동하게 해봅시다. 사각형 모양으로 이동하기 위해서는 90도로 회전해야 하는데, 실험을 통해 몇 초 동안 회전하면 90도가 되는지 알아보도록 합시다. 950이라는 숫자는 실험 환경에 따라 달라질 수 있습니다.

var hamster = Hamster.create();
var timeout = 0;

hamster.wheels(30, 30); // 앞으로 이동한다.
timeout += 1000; // 1초 동안 이동

setTimeout(function() {
    hamster.wheels(30, -30); // 1초 후에 오른쪽으로 회전한다.
}, timeout);
timeout += 950; // 0.95초 동안 회전

setTimeout(function() {
    hamster.wheels(30, 30); // 0.95초 더 후에 앞으로 이동한다.
}, timeout);
timeout += 1000; // 1초 동안 이동

setTimeout(function() {
    hamster.wheels(30, -30); // 1초 더 후에 오른쪽으로 회전한다.
}, timeout);
timeout += 950; // 0.95초 동안 회전

setTimeout(function() {
    hamster.wheels(30, 30); // 0.95초 더 후에 앞으로 이동한다.
}, timeout);
timeout += 1000; // 1초 동안 이동

setTimeout(function() {
    hamster.wheels(30, -30); // 1초 더 후에 오른쪽으로 회전한다.
}, timeout);
timeout += 950; // 0.95초 동안 회전

setTimeout(function() {
    hamster.wheels(30, 30); // 0.95초 더 후에 앞으로 이동한다.
}, timeout);
timeout += 1000; // 1초 동안 이동

setTimeout(function() {
    hamster.wheels(30, -30); // 1초 더 후에 오른쪽으로 회전한다.
}, timeout);
timeout += 950; // 0.95초 동안 회전

setTimeout(function() {
    hamster.wheels(0, 0); // 0.95초 더 후에 정지한다.
}, timeout);

코드를 작성한 후 실행해 보면 햄스터 로봇이 정확하게 사각형 모양으로 이동할 수도 있고, 약간 찌그러진 사각형 모양으로 이동할 수도 있습니다. 바닥의 재질에 따라서는 완전히 이상한 모양으로 이동할 수도 있습니다. 사람이 눈을 감고 사각형 모양으로 걸어가는 것과 같습니다. 센서를 사용하지 않기 때문입니다. 눈을 감고 사각형 모양으로 걸어가 보면 얼마나 어려운 일인지 알 수 있을 것입니다. 로봇에게 센서는 사람의 눈과 같습니다. 따라서 센서를 사용하지 않고 이동하는 것에는 한계가 있을 수밖에 없습니다. 햄스터 로봇이 센서를 사용하여 이동하는 방법은 앞으로 하나씩 배우게 될 것입니다.

직사각형, 삼각형, 다이아몬드 등 다양한 모양으로 이동하게 해봅시다.
횟수 반복하기
앞서 작성한 코드처럼 같은 내용을 반복하여 작성하는 것은 비효율적입니다. 반복문을 사용하여 간략하게 작성해 봅시다.

var hamster = Hamster.create();
var timeout = 0;

for(var i = 0; i < 4; ++i) {
    setTimeout(function() {
        hamster.wheels(30, 30); // 앞으로 이동한다.
    }, timeout);
    timeout += 1000; // 1초 동안 이동

    setTimeout(function() {
        hamster.wheels(30, -30); // 오른쪽으로 회전한다.
    }, timeout);
    timeout += 950; // 0.95초 동안 회전
}

setTimeout(function() {
    hamster.wheels(0, 0); // 정지한다.
}, timeout);

반복문을 사용하여 직사각형, 삼각형, 다이아몬드 등 다양한 모양으로 이동하게 해봅시다.
서서히 출발하기
로봇이 이동할 때 서서히 속도를 높이거나 내리는 것은 중요합니다. 지금까지는 왼쪽 바퀴와 오른쪽 바퀴의 속도가 변하지 않았지만 속도를 서서히 높이기 위해서는 속도 값을 계속 다르게 주어야 합니다. 속도를 0에서 시작하여 50까지 1씩 증가시키도록 합시다.

var hamster = Hamster.create();
var timeout = 0;
var speed = 0;

for(var i = 0; i < 50; ++i) {
    setTimeout(function() {
        ++speed; // 속도를 1씩 증가시킨다.
        hamster.wheels(speed, speed);
    }, timeout);
    timeout += 20; // 20 msec마다 속도를 증가시킨다.
}

execute() 함수를 사용하여 코드를 작성해 봅시다. function execute() 형태로 함수를 선언하기만 하면 20msec마다 반복하여 호출해 줍니다. 따라서 execute() 함수 내에 작성된 코드는 20msec 내에 모두 처리가 되도록 해야 합니다.

var hamster = Hamster.create();
var speed = 0;

function execute() {
    hamster.wheels(speed, speed);
    if(speed < 50) { // 속도가 50이 되기 전까지
        ++speed; // 속도를 1씩 증가시킨다.
    }
}

속도를 50에서 시작하여 0까지 1씩 감소시켜 정지하게 해봅시다. 속도가 0이 되면 더 이상 감소시키지 않아야 합니다.
계속 반복하기
햄스터 로봇이 1초 동안 앞으로 이동한 후 1초 동안 뒤로 이동하는 것을 계속 반복하게 해봅시다. 자바스크립트의 setInterval 함수를 사용하면 일정 시간(msec)마다 명령을 수행할 수 있습니다.

var hamster = Hamster.create();
var forward = false;

hamster.wheels(30, 30); // 앞으로 이동한다.

// 1초마다 수행할 명령을 설정한다.
setInterval(function() {
    if(forward) {
        hamster.wheels(30, 30); // 앞으로 이동한다.
    } else {
        hamster.wheels(-30, -30); // 뒤로 이동한다.
    }
    forward = !forward; // 방향을 반대로 한다.
}, 1000); // 1초 후부터 1초마다 function() {} 안의 명령을 수행한다.

execute() 함수를 사용하여 코드를 작성해 봅시다. execute() 함수는 20msec마다 반복하여 호출되므로 tick이 50이 되면 1초가 됩니다.

var hamster = Hamster.create();
var forward = true;
var tick = 0;

function execute() {
    if(forward) {
        hamster.wheels(30, 30); // 앞으로 이동한다.
    } else {
        hamster.wheels(-30, -30); // 뒤로 이동한다.
    }
    if(++tick == 50) { // 50 x 20msec = 1초가 될 때마다
        tick = 0;
        forward = !forward; // 방향을 반대로 한다.
    }
}

사각형 모양으로 계속 반복하여 이동하게 해봅시다.
LED 계속 깜박이기
자동차의 비상등처럼 햄스터 로봇의 양쪽 LED를 계속 깜박이게 해봅시다. 양쪽 LED를 0.2초 동안 노란색으로 켜고 0.2초 동안 끄는 것을 계속 반복하면 됩니다.

var hamster = Hamster.create();
var on = false;

hamster.leds(Hamster.LED_YELLOW, Hamster.LED_YELLOW); // 양쪽 LED를 노란색으로 켠다.

setInterval(function() {
    if(on) {
        hamster.leds(Hamster.LED_YELLOW, Hamster.LED_YELLOW); // 양쪽 LED를 노란색으로 켠다.
    } else {
        hamster.leds(Hamster.LED_OFF, Hamster.LED_OFF); // 양쪽 LED를 끈다.
    }
    on = !on;
}, 200); // 0.2초 후부터 0.2초마다 function() {} 안의 명령을 수행한다.

execute() 함수를 사용하여 코드를 작성해 봅시다. execute() 함수는 20msec마다 반복하여 호출되므로 tick이 10이 되면 0.2초가 됩니다.

var hamster = Hamster.create();
var on = true;
var tick = 0;

function execute() {
    if(on) {
        hamster.leds(Hamster.LED_YELLOW, Hamster.LED_YELLOW); // 양쪽 LED를 노란색으로 켠다.
    } else {
        hamster.leds(Hamster.LED_OFF, Hamster.LED_OFF); // 양쪽 LED를 끈다.
    }
    if(++tick == 10) { // 10 x 20msec = 0.2초가 될 때마다
        tick = 0;
        on = !on;
    }
}

햄스터 로봇의 버저 소리를 일정 시간 간격으로 삐삐삐~ 계속 반복하여 내게 해봅시다.
사이렌 소리 내기
햄스터 로봇의 버저를 사용하여 사이렌 소리를 만들어 봅시다. 버저 소리의 음 높이를 500부터 700까지 10씩 증가시키는 것을 계속 반복하면 됩니다.

var hamster = Hamster.create();
var tick = 0;

setInterval(function() {
    if(++tick > 20) { // 0부터 20까지 반복한다.
        tick = 0;
    }
    hamster.buzzer(tick * 10 + 500);
}, 20);

execute() 함수를 사용하여 코드를 작성해 봅시다. execute() 함수는 20msec마다 반복하여 호출됩니다.

var hamster = Hamster.create();
var tick = 0;

function execute() {
    if(++tick > 20) { // 0부터 20까지 반복한다.
        tick = 0;
    }
    hamster.buzzer(tick * 10 + 500);
}

사이렌 소리와 함께 양쪽 LED도 빨간색으로 계속 깜박이게 해봅시다.
LED 깜박이다 멈추기
자동차가 좌회전할 때처럼 햄스터 로봇이 왼쪽으로 회전하는 동안 LED를 깜박이게 해봅시다. 자바스크립트의 clearInterval 함수를 사용하면 setInterval 함수로 수행하는 반복을 멈출 수 있습니다.

var hamster = Hamster.create();
var on = false;

hamster.wheels(10, 40); // 왼쪽으로 둥글게 회전한다.
hamster.leftLed(Hamster.LED_YELLOW); // 왼쪽 LED를 노란색으로 켠다.

var id = setInterval(function() {
    if(on) {
        hamster.leftLed(Hamster.LED_YELLOW); // 왼쪽 LED를 노란색으로 켠다.
    } else {
        hamster.leftLed(Hamster.LED_OFF); // 왼쪽 LED를 끈다.
    }
    on = !on;
}, 200); // 0.2초 후부터 0.2초마다 function() {} 안의 명령을 수행한다.

setTimeout(function() {
    hamster.wheels(0, 0); // 정지한다.
    hamster.leftLed(Hamster.LED_OFF); // 왼쪽 LED를 끈다.
    clearInterval(id); // 반복을 종료한다.
}, 2000); // 2초 후에 function() {} 안의 명령을 수행한다.

execute() 함수를 사용하여 코드를 작성해 봅시다. execute() 함수는 20msec마다 반복하여 호출되므로 tick이 100이 되면 2초가 됩니다.

var hamster = Hamster.create();
var on = true;
var tick = 0;

hamster.wheels(10, 40); // 왼쪽으로 둥글게 회전한다.

function execute() {
    if(tick < 100) {
        if(on) {
            hamster.leftLed(Hamster.LED_YELLOW); // 왼쪽 LED를 노란색으로 켠다.
        } else {
            hamster.leftLed(Hamster.LED_OFF); // 왼쪽 LED를 끈다.
        }
        if(++tick % 10 == 0) { // 10 x 20msec = 0.2초가 될 때마다
            on = !on;
        }
    } else {
        hamster.wheels(0, 0); // 정지한다.
        hamster.leftLed(Hamster.LED_OFF); // 왼쪽 LED를 끈다.
    }
}

햄스터 로봇이 2초 뒤로 이동하는 동안 버저 소리를 일정 시간 간격으로 삐삐삐~ 계속 반복하여 내게 해봅시다.
목차
하드웨어 살펴보기
  1. 햄스터 로봇
  2. USB 동글
수업 준비
  1. 소프트웨어 설치
  2. 로봇과 PC 연결
  3. 소프트웨어 실행
기초
  1. 코드의 기본 형태 만들기
  2. 로봇 움직이기
  3. LED 켜고 소리 내기
  4. 복잡한 명령 수행하기
  5. 센서 사용하기
심화
  1. 컵 따라 돌기
  2. 로봇 청소기
  3. 라인 트레이서
  4. 햄스터 친구 따라가기
  5. 미로 탈출
확장 키트
  1. 디지털 입력 - 버튼을 누르면 삐 소리가 나요
  2. 디지털 출력 - 어두우면 LED 불이 켜져요
  3. 디지털 출력 - 반짝반짝 LED를 깜박여요
  4. 디지털 출력 - 기울이는 방향으로 LED가 켜져요
  5. 아날로그 입력 (ADC) - 포텐셔미터를 돌리면 음 높이가 달라져요
  6. 아날로그 입력 (ADC) - 뜨겁지 않게 해주세요
  7. 아날로그 입력 (ADC) - 빛을 따라 움직여요
  8. PWM 출력 - LED 불이 부드럽게 밝아졌다 어두워져요
  9. PWM 출력 - LED 촛불이 바람에 흔들려요
  10. 아날로그 서보 출력 - 햄스터 로봇에게 꼬리가 생겼어요
영재반
  1. 브레이튼버그의 로봇
  2. 행위 기반의 로봇 제어
  3. 경로 탐색
  4. 자리 바꾸기
Copyright Robot Software Education Institute. All rights reserved.
Please contact prof. Kwang-Hyun Park (akaii@kw.ac.kr) if you have any problem.