[아두이노] 엔트리로 초음파레이더 졸작

• 온라인 가상시뮬레이터 : https://www.tinkercad.com
• 스크래치와 아두이노 :
  )[아두이노] S4A 스크래치로 아두이노 제어
  [아두이노] S4A 스크래치에서 아두이노로 이미지 조정하기
  [아두이노] ScratchX로 아두이노 제어
  [아두이노] 엔트리로 아두이노 제어
  [아두이노] 엔트리로 초음파레이더 졸작

스크래치로 뭔가 표현한 작품을 하나 만들면 좋을 것 같아요. 엔트리에 초음파센서와 서보모터를 제어하는 블록이 있기에 이 두 블록을 가지고 표현할 수 있는 작품으로 떠오르는 것은 초음파레이더가 있더군요. 멋지고 좀 더 깔끔하게 블록을 만들면 좋은데 대충 post 주제를 정하고 막코딩을 해서 느낌만 비슷하게 초음파 레이더 원리 동작만 수행하는 간단한 졸작을 하나 만들어 봤네요.

1. 스크래치로 초음파레이더 설계

설계 :

• 초음파센서 값 읽기
• 초음파센서로 반경 180도 범위의 100미만 거리에 장애물을 감지하기 위해서 서보모터 회전
• 엔트리 화면에 레이더 각도 바 표시
• 초음파센서로 물체 감지했을 때 감지한 위치에 물체 표시

대충 4가지 형태로 나누어 표현 하겠습니다.

초음파센서 값 읽기

지난시간에 초음파센서값을 읽기를 했었습니다. 아래와 같은 표현을 하시면 됩니다.

변수블록에서 거리라는 변수를 만드시고 거리 블록에다가 초음파센서 센서값 블록을 배치하면 계속 반복하기로 실시간으로 현재 거리변수에 초음파센서 값이 저장되게 됩니다.

초음파센서로 반경 180도 범위의 100미만 거리에 장애물을 감지하기 위해서 서보모터 회전

서보모터를 제어하는 블록을 가지고 180도 회전을 좌/우로 왔다 갔다 해보도록 합시다.

위 블록을 보시면 우선 각도라는 변수 블록을 만들어 주세요. 그리고 초기값으로 0으로 처음 정하게 됩니다. 그리고 서보모터오 0도로 초기각도를 잡아 주는데 다음 동작을 수행하지 않도로 3초의 대기시간을 부여 합니다.

계속 반복하기로 각도는 1씩 증가하고 그 각도를 1도씩 증가한 각도로 회전을 하게 됩니다. 그리고 180도까지 회전했다가 반대로 180도에서 0도로 1도씩 감소시켜 0도가 될때까지 반복하게 됩니다 이렇게 해서 0~180도 회전을 왔다 갔다 하게 됩니다.

엔트리 화면에 레이더 각도 바 표시

초기 위치는 좌표(0,-100)로 레이더 바의 시작 위치가 됩니다 방향은 0도로 했기에 오른쪽에서 왼쪽으로 회전하게 됩니다. 초기 상태니 붓(펜)이 그려져 있으면 모두 지우라는 명령이고
붓의 색과 굵기를 초기로 지정합니다.

그다음 계속 반복하기 블록이 반시계방향으로 180도 회전했다가 시계방향으로 180도 회전하는 반복문이 안에 표현되어 있어 왔다 갔다 반복하면서 레이더 바의 움직임을 표시합니다. 이 바는 현재의 각도 위치만 표시 되어 야 하기 때문헤 한번 그리고 난뒤 다음 바를 그릴 때 먼저 모든 붓 지우기로 바을 지우고 나서 다시 그립니다.

반시계 방향으로 180도 회전

모든 붓 지우기는 이전 그려진 레이더 바를 지우는 명령이고 그리기 시작과 그리기 멈추기 사이에 붓으로 그리는 작업이 수행됩니다. 시작위치는 좌표(0,-100) 지점에서 이동방향이 200이면 좌표(0,-100)꼭지점에서 이동방향쪽으로 200지점까지 붓으로 그리게 됩니다. 즉, 하나의 선이 그려집니다. 그 선을 -1도 각도회 회전시키는 명령입니다. 이걸 180번 하기 때문에 1도씩 오른쪽에서 왼쪽으로 하나의 선이 그려집니다. 이전 선을 지우고 새로운 선이 그려지는 과정을 반복하게 됩니다. +1도 씩 180번 회전하면 반대로 왼쪽에서 오른쪽으로 레이더 바가 회전하겠죠.

초음파센서로 물체 감지했을 때 감지한 위치에 물체 표시

초음파센서로 장애물을 감지하면 장애물이 감지한 위치에 장애물임을 표시하는 오브젝트를 표시를 하겠습니다.

빨간 상자가 물체 표시 마크입니다. 그리고 총 세 블록으로 나누어서 블록코딩을 하였습니다.

첫번재 블록은 시작하면 장애물 표시가 엔트리 화면에 표시되면 안되겠죠. 그래서 모양을 숨겨야 합니다. 이 숨긴 본체 오브젝트 이미지는 사용하지 않고 복제본을 사용 할 꺼에요. 복제본을 사용하는 이유는 일정시간이 되면 소멸 시키기 위혀서 입니다. 무한으로 장애물 표시를 화면에 표시하면 안되겠죠. 일정 시간이 되면 자동으로 사라져야 하기 때문에 이 본체 이미지는 숨기고 복제본 이미지로 만들었다 삭제했다 이런식으로 해서 필요할 때만 생성하도록 하여 물체 그리기의 낭비를 줄입니다.

두번째 블록은 계속 반복하기가 있는데 만일 거리값이 100이하면은 100미만의 장애물만 감지하겠다는 의미가 100미만의 장애물리 감지되면 자신을 즉 모양숨기기를 했던 본체 원을 복제본을 만들겠다는 명령입니다. 복제본을 무한으로 연속 만들면 컴퓨터에 무리가 가기 때문에 0.5간격으로 체크해서 복제본을 만들게 됩니다.

세번째 블록은 복제본이 생성이 되면 수행되는 블록입니다. 장애물 감지된 위치에 복제본을 이동시켜야 하기 때문에 초기 지점인 좌표(0,-100)에거 장애물 감지한 거리값을 토대로 이동 방향으로 "거리x2"만큼 움직이기라는 블록으로 감지된 위치로 원을 표시합니다. 왜! 2를 곱했냐면 엔트리 창 화면의 100까지의 거리는 너무 짧아서 좀 더 크게 보기 위해서 2배 거리를 키워 화면상에 좀 크게 보이게 표시 했다고 생각하시면 됩니다. 여기서, 복제본을 이동시켰지만 원본 모양이 숨겨져 있기 때문에 숨겨진 복제본으로 이동하여 화면에 표시가 되지 않습니다. 그래서 모양보이기로 화면에 보여지게 하고 2초동안 장애물 표시를 하다가 해당 복제본이 삭제하기로 소멸시키게 표현 했네요.

이러헥 해서 초음파센서로 장애물이 감지되면 그 위치에 장애물 표시를 하고 표시된 마크는 2초후 소멸된다고 생각하시면 됩니다.

[결과]

2. 엔트리 초음파 레이더 회로도

3. 엔트리 블록 코딩

위 오브젝트 창에 전부 블록 코딩합니다.

[1단계] 초음파센서로 장애물 감지 블록 코딩

[2단계] 서보모터 회전과 붓으로 레이더 바 표시 블록 코딩

[3단계] 장애물 감지 시 장애물 표시 마크를 복제본을 생성하여 해당 위치에 장애물을 표시 했다가 2초 후 소멸 시키는 블록 코딩

4. 결과

한손에 폰을 들고 한돈에 초음파센서를 들고 찍다보니 영상이 많이 흔들리고 정확히 촬영이 되지 못했네요. 간단히 레이더 바로 현재의 각도를 표시하고 100 미만의 장애물 감지시 장애물 표시가 되게 나오도록 했네요. 참고로 서보모터의 회전은 위 블록코딩은 불안전 합니다. 그 이유는 지속적으로 회전을 시키라는 메시지를 아두이노에 보내고 아두이노는 그 메시지가 누족되기 때문입니다. 만약 딜레이 대기시간이 없다면 엔트리의 회전 레이더바가 180도 회전이 끝더라고 서보모터가 90도도 회전을 못하는고 회전이 누적되어 있게 됩니다. 180도를 왔다 갔다 한바퀴 돌고 난뒤에도 서보모터는 일정 각도뿐이 회전을 못하게 됩니다. 만약 중지 명령을 내리면 누적된 서보모터는 중지 명령이 떨어져도 누적된 회전만큼 계속 회전 동작을 수행합니다. 서보모터 따로 엔트리 따로 동작하는 결과가 발생하게 됩니다. 위 블록도 그냥 0.5초 대기를 줘서 서보모터의 회전각을 유사하게 맞춘 것이지 정확히 일치하지 않습니다. 단지 원리를 이해하기 위한 실험이여서 대충 블록 코딩을 했을 뿐이지 감안하시고 보시기 바랍니다.

노이즈 값도 장애물로 인식해서 장애물 표시가 뜨네요.

마무리

엔트리를 사용하면서 엔트리 따로 아두이노 따로 동작하는 현상이 발생하였습니다. 엔트리 블록 코딩은 엔트리 기준으로 동작하기 때문에 아두이노가 엔트리에 맞게 동작을 하는지 확인을 할 수 없습니다. 물론 엔트리가 중간의 특정핀에 전류가 공급되게 하고 그 전류를 다시 특정핀에서 확인하여 전류가 흐르는 상태인지 체크를 통해 중간에 체크 블록을 만들면 해결 되기는 합니다. 너무 복잡해지기 때문에 그 부분은 생략합니다.

아무튼 위 블록 코딩은 불안전환 코딩이고 엔트리가 무조건적인 명령문을 수행 할 뿐 아두이노의 서보모터 동작이 정상적으로 작동하는지 체크하지 못했기 때문에 졸작이라는 문구를 붙이게 되었네요. 그리고 초음파센서 거리 측정을 서보모터가 회전 했을 때 그 안에서 측정을 했어야 했는데 블록 코딩을 설명을 하기 위해서 분류했는데 그상태로 두고 말았네요. 완성하고 나니 이 부분이 참 아쉬운 부분이네요.

[아두이노] 엔트리로 아두이노 제어

• 온라인 가상시뮬레이터 : https://www.tinkercad.com
• 온라인 엔트리 : https://playentry.org/
• 스크래치와 아두이노 :
  [아두이노] S4A 스크래치로 아두이노 제어
  [아두이노] S4A 스크래치에서 아두이노로 이미지 조정하기
  [아두이노] ScratchX로 아두이노 제어
  [아두이노] 엔트리로 아두이노 제어

지난 시간까지 해서 S4A 스크래치와 ScratchX로 아두이노와 연결하여 제어를 해보았습니다. 오늘은 마지막으로 국산 엔트로로 아두이노를 연결하여 제어해 보는 시간을 갖도록 하겠습니다. 엔트리도 ScratchX 마찬가지로 온라인상에서 웹브라우저로 아두이노를 연결하여 제어를 하게 됩니다 ScratchX 플러그인을 설치하여 연결했다면 엔트리는 따로 PC에 연결 프로그램을 설치해야 연결 할 수 있습니다. 엔트리를 이용한 아두이노 제어는 의외로 간단하여 사용하기 편합니다.

이제부터 엔트리로 아두이노를 제어를 해봅시다.

1. 엔트리

• 엔트리 공식 사이트 : https://playentry.org/

엔트리 공식 사이트에 들어가사 작품만들기를 누르면 아래와 같이 기본 창이 뜹니다.

스크래치를 먼저 공부한 분들은 창이 처음에 좀 불편할 수 있고 블록들이 좀 더 많은데 스크래치는 간단히 최소 블록만 제공하는데 약간 엔트리는 약간 상황들을 더 추가한 블록들로 블록의 갯수가 좀 더 많습니다. 스크래치는 어떤 프로그램을 쓰더라고 기본베이스는 전부 동일합니다. 선택은 여러분들이 편한 걸 사용하시면 됩니다.

2. 엔트리에서 하드웨어 연결 프로그램 설치 및 연결

1) 하드웨어 연결 프로그램 설치

엔트리에 아두이노우노와 연결을 하기 위해서는 하드웨어 연결 프로그램을 설치해야 합니다.

하드웨어 블록은 누르면 아래와 같은 5개의 선택 항목이 나타납니다.

• 연결 프로그램 다운로드 : 이 프로그램을 PC에 다운로드 받으시면 됩니다.
• 연결 안내 다운로드 : 일반 PC 설치와 블루투스 설치에 관한 자세한 안내서입니다.
• 엔트리 아두이노 소스 : 펌웨어 소스인데 안받으셔도 됩니다.
• 하드웨어 연결하기 : 연결프로그램을 열고 연결하면 되기 때문에 구지 사용하지 않습니다.
• 연결 프로그램 열기 : PC에 연결프로그램이 설치되어 있으면 이걸 클릭하면 연결프로그램이 실행 됩니다.

첫번째 연결 프로그램을 다운로드 받아서 설치하면 끝납니다.

2) 하드웨어 연결

연결 프로그램 열기를 클릭 하시면 PC에 설치된 연결 프로그램이 실행 되고 아래와 같은 창이 뜹니다.

위 그림을 보면 다양한 보드를 제공합니다. 아두이노 Uno 정품보드로 처음에 사용해 보세요. 그리고 초음파센서나 Servo모터를 사용할 경우 아두이노 Uno 확장모드를 사용하시면 됩니다.

아두이노 Uno 정품보드를 클릭을 해보세요. 아래와 같은 창으로 넘어갑니다.

현재 아두이노를 연결 안해서 연결중으로 표시되는 데 연결되면 연결성공이라고 뜹니다. 여기서, 처음 한번만 펌웨어 설치를 누르시면 됩니다. 연결이 제대로 안되면 드라이버 설치를 처음 한번 눌러서 설치하시면 됩니다. 참고로 이 창은 닫으시면 안되고 계속 열어놓으셔야 엔트리와 아두이노 간의 연결이 유지 됩니다.

3) 엔트리에서 아두이노가 인식 상태

4) 엔트리에서 아두이노 Uno 정식보드 블록

5개의 블록들을 간단히 살펴보도록 하죠.ㅁ

analogRead(pin);

아날로그 입력으로 0~1023 사이의 값을 가져옵니다.

digitalRead(pin);

디지털 입력으로 해당핀에 0 or 1의값을 가져옵니다.

digitalWrite(pin, value)

디지털 출력으로 HIGH(켜기) or LOW(끄기)의 출력을 표현 하니다.

analogWrite(pin, value)

0~255사이의 아날로그 출력을 할 수 있습니다.

map(analogRead(pin), 0, 1023, 0, 100);

입력 숫자만 원하는 형태로 바꾸면 됩니다.

2. 엔트리와 아두이노 실험

실험은 아두이노 Uno 확장모드에서 이루어집니다. 아두이노 Uno 확장모드를 선택하고 펌웨어 설치를 다시 한번 해주세요.

그러면, 아래 그림처럼 블록이 몇개 더 생성 됩니다. 확장모드에서는 초음파센서와 서보모터와 피에저부조를 제어할 수 있는 블록이 추가되었네요.

1) 회로도

2) 블록 코딩

위 블록 코딩은 간단한 테스트 입니다.

첫번째 블록 코딩은 디지털 13번 핀을 1초 단위로 깜박이는 "Blink예제" 입니다.
두번째 블록 코딩은 거리라는 변수에 만들고 그 변수에 초음파센서값을 저장합니다. 그리고 엔트리봇이 1초동안 초음파센서로 측정한 거리 만큼 x좌표로 이동시키라는 블록 코딩입니다.

지난 시간에 다른 스크래치 프로그램에서 변수 선언에 배웠고 엔트리에서도 동일하니깐 설명은 생략합니다. 초음파센서는 아두이노에 연결하는 Trig, Echo핀만 주의해서 연결하고 해당 핀 값을 블록코딩에 정확히 기입하셔야 정확한 결과가 나옵니다.

3) 결과

영상을 보시면 왼쪽에 원이 있습니다. 이 원은 1초 단위로 색이 바뀝니다. 아두이노 Red LED와 같은 시간으로 동작합니다. 즉, 엔트리의 원와 아두이노 LED를 동일한 시간대에 동작을 수행합니다. 엔트리와 아두이노의 표현을 일치시키는 느낌이지요. 나중에 이런 느낌의 표현은 엔트리를 가지고 아두이노를 제어 할 때 많이 사용합니다.

그리고 거리는 제가 가지고 있는 초음파센서가 최대 145정도 거리 값이 나오더군요. 0~145사이를 앞에 장애물이 감지 될때 거리를 측정 할 수 있네요. 0~145사이의 x좌표로 엔트리봇이미지가 이동하게 됩니다. 별 의미 없고 초음파 센서로 엔트리봇을 움직이게 하는 간단한 테스트 입니다.

마무리

이렇게 해서 S4A 스크래치, ScratchX, 엔트리에서 아두이노를 연결하는 방법을 간단히 알아 보고 간단한 예제로 제어까지 하였습니다. 얼핏 보면은 스크래치로 아두이노 제어하는게 편해 보일꺼에요. 그냥 해당 블록을 배치하고 아두이노를 코딩하지 않고 쉽게 제어가 되기 때문에 구지 아두이노를 C언어를 공부하고 코딩 할 필요가 있을가 하고 생각하시는 분들도 있을 거에요. 그런데 실상은 전혀 그렇지 않습니다. 더 복잡하고 더 어렵습니다.

그 이유는 간단한 제어는 이미 블록이 제공 되기 때문에 그 블록을 사용하여 쉽게 아두이노 동작을 수행 했을 뿐 조금만 변화를 주면 블록 코딩은 너무 복잡해 집니다. 오늘 배운 아두이노 Uno 정품보드의 블록을 보시면 5개 블록만 제공합니다. 이 블록을 가지고 초음파센서와 Servo모터를 제어한다고 생각해 보세요. 답이 안보이죠. 다행히 아두이노 Uno 확장모드에서 해당 블록을 제공하기 때문에 쉽게 제어 할 수 있는 것 뿐이죠.

즉, 스크래치로 아두이노를 제어하기 위해서는 제어 할 블록이 없다면 그 블록은 여러분들이 만드셔야 합니다. 그리고 만들기 힘들 경우는 해당 펌웨어 소스에 가서 일부 소스 내용을 수정을 해야 합니다. 아니면 누군가 만들어 놓은 펌웨어 소스를 가져다가 사용해야 합니다. 스크래치로 수많은 부품을 제어를 할 때 쉽게 딱 만든 블록으로 코딩하기 힘듭니다. 오픈 블록이나 펌웨어 소스를 쉽게 찾을 수 없고 찾는 다 해도 단적인 제어만 가능하고요 여러 부품들을 연계해서 제어 한다면 무지 힘들꺼에요. 어느 순간이 되면 그냥 프로그램언어를 배우고 함수 단위 코딩을 하는게 더 쉽다는 것을 느끼게 될 꺼에요.

C언어 기본 문법을 배우고 오픈 라이브러리 함수들을 사용하여 함수 단위로 C언어 코딩을 하는게 나을 거라 생각 됩니다. 처음에는 C문법을 배우는게 좀 버거울 수 있지만 기본 개념만 잡아 놓으면 오히려 스크래치를 제어하는 것보다 쉽게 다양한 전자부품을 제어 할 수 있을 거에요. 스크래치는 그냥 어린아이들에게 전자 공부를 쉽게 하기 위한 도구로만 생각하시면 됩니다.

그리고, 스크래치와 아두이노 연계는 프로세싱과 아두이노 연계과 유사힙니다. 프로그램 언어에 관심이 있으면 처음부터 프로세싱과 아두이노로 나아가는 걸 추천 드려요. 처음에는 프로세싱와 아두이노 연계 표현이 어렵지만 나중에 어느정도 궤도에 오르시면 오히려 자유로운 표현을 쉽게 할 수 있어 편하게 느끼실 꺼에요. 참고로, 프로세싱과 순수 아두이노 소스는 오히려 오픈 소스가 더 많고 쉽게 찾을 수 있기 때문에 프로그램 언어 독해력만 있으면 충분히 독학으로 공부 할 수 있으니깐 한번 도전해 보세요.

[아두이노] ScratchX로 아두이노 제어

• 온라인 가상시뮬레이터 : https://www.tinkercad.com
• 온라인 ScratchX : https://scratchx.org/
• 스크래치와 아두이노 :
  [아두이노] S4A 스크래치로 아두이노 제어
  [아두이노] S4A 스크래치에서 아두이노로 이미지 조정하기
  ScratchX로 아두이노 제어(아두이노)

지난 시간에 S4A 스크래치로 아두이노를 제어하는 방법을 알아 보았습니다. S4A 스크래치 말고도 다른 스크래치로도 아두이노를 제어 한다고 했었죠. S4A 스크래치는 해당 스크래치 프로그램을 PC에 설치 한 뒤에 아두이노를 연결했지만 이번에 배울 스크래치는 온라인 상에서 웹브라우저로 아두이노를 연결하여 제어 할 수 있는 ScratchX에 대해 이야기를 하고자 하겠습니다. 유사하게 국산 엔트리도 있지만 우선 ScratchX로 아두이노를 실험해 봅시다.

1. ScratchX

• ScratchX 베타 사이트 : https://scratchx.org/

스크래치 형태로 여러가지 실험을 할 수 있는 베타 버전입니다. 오래 전 부터 베타 버전이였는데 아직도 베타 버전이네요. 온라인 상에서 스크래치x는 외부 하드웨어와 연동하여 다양한 실험을 할 수 있는 서비스를 제공하고 있습니다.

위 그림을 보시는 것처럼 다양한 확장 프로그램들 제공합니다. 원하는 실험을 선택하시면 해당 실험에 맞는 스크래칙 블록들이 세팅되어 있어서 특정한 전용 실험이 가능합니다. 첫번째 이미지는 아두이노인데 아두이노와 연결하여 실험할 수 있는 확장프로그램으로 생각하시면 됩니다.

2. 스크래치 플러그인 설치

온라인 상에서 스크래치 프로그램을 사용하기 위해서 Adobe 플래시 플레이어가 설치되어 있어야 합니다. 이 부분은 ScrtchX 사이트에 가셔서 해당 확장프로그램을 실행시켜보시면 Adobe 플래시 플레이어가 안깔려 있으면 설치하라는 멘트가 나오고 설치되어 있으면 활성화 할지를 선택하라는 멘트가 나올꺼에요. 여러분들이 직접 설치가 안되었으면 설치하고 활성화 안되었으면 활성화 시키면 됩니다. 이부분은 설명이 필요 없겠죠.

플러그인 설치하셔야 외부 아두이노와 연결을 할 수 있습니다.

• 플러그인 다운로드 : https://scratch.mit.edu/info/ext_download/

플러그인 다운로드 주소로 가시면 Mac과 윈도우 버전으로 나뉘고 크롬과 다른웹 브라우저로 나뉩니다. 참고로 플러그인을 설치한다고 무조건 다 실행되지는 않습니다.

윈도우 64bit 운영체제에서는 크롬버전을 설치를 해도 연결이 안됩니다.

다른 웹브라우저용 플러그인을 설치를 해도 대부분 위처럼 연결이 안되거나 아예 플러그인이 인식이 대부분 안되네요.

위 그림처럼 파이어폭스에서 빨간불로 플러그인 인식이 안되더군요. 알아보니깐 윈도우 64bit에서는 안되고 32bit 특정 버전을 설치하면 인식이 된다고 하네요.

오기가 생겨서, 크롬, 파이어폭스, 오페라, 익스플로우, 엣지, 웨일, 오페라 네온, 스윙 브라우저들을 다 실행 시켜보았습니다. 연결인 안되는 노란불이 들어오거나 플러그인 인식이 안되는 빨간불이 들어오더군요. 딱 하나 스윙 브라우저가 정상적으로 인식이 되었습니다.

스윙 브라우저를 찬양하라!

스윙 브라우저에서 정상적으로 아두이노가 연결이 되었네요. 정상 연결인 초록불이 들어 왔습니다. 안되면 파이어폭스 특정 버전으로 다시 설치 할까 했는데 그럴 필요가 없어졌네요. 스윙 브라우저로 정상적으로 플러그인이 작동해도 다행이였어요.

3. 아두이노 펌웨어

아두이노에 펌웨어 소스를 이식해야 하는데 따로 다운로드를 받을 필요가 없습니다. 아두이노 IDE에서 제공되는 펌웨어 소스를 그대로 사용 가능합니다.

위 그림에 표시된 StandardFimata 소스를 아두이노에 이식한 후 ScratchX에 연결 하시면 됩니다.

4. ScratchX 실행

확장프로그램 중 아래 그림처럼 이미지를 클릭해서 들어 가시면 됩니다. 처음 블록 코딩을 잘 모르시는 분은 아래 sample project를 누르시면 됩니다. "blink 예제"가 세팅되어 있거든요.

전 그냥 이미지를 클릭하고 아무것도 되어 있지 않는 빈상태로 들어 갔네요.

추가블록에 아두이노 연결이 성공하면 아두이노 블록들이 표시 됩니다. 아두이노 블록과 스크래치 블록들을 조합하여 1번, 2번 블록을 아래 그림처럼 배치해 보세요.

1번 블록 : 13번 핀을 led A에 연결은 디지털pin으로 출력모드로 led_A~led_D로 4개의 출력모드로 되어 있습니다. 해당 핀을 연결한다는 것은 해당 13번 핀을 디지털 출력모드로 선언으로 이해하시는 것이 좋을 것 같아요.

const byte led_A = 13;
void setup()
{
  pinMode(led_A, OUTPUT);
}

2번 블록 : led_A핀을 켜기(HIGH)->1초대기-> led_A핀을 끄기(LOW) -> 1초대기 를 무한 반복합니다. 즉, 1초 단위로 깜박이는 동작을 수행하게 됩니다.

void loop()
{
  digitalWrite(led_A, HIGH);
  delay(1000); 
  digitalWrite(led_A, LOW);
  delay(1000); 
}

아두이노 코딩을 해보셨다면 대충 어떤 느낌의 블록 코딩인지 아시겠지요.

주의할 점은 스크래치를 실행을 누른다고 무조건 실행이 되지 않습니다. 위 1번 블록을 먼저 클릭해서 세팅을 한 뒤에 실행을 눌러야 정상적으로 동작합니다. 왜! 실행을 눌렀는데 13번 LED가 깜박이지 않는 거야 하고 실수를 범할 수 있으니 꼭 1번 블록 코딩을 먼저 클릭을 한번 한 뒤에 실행버턴을 눌러 실행하시기 바랍니다.

4. 실행

1) 회로도

2) ScratchX에서 블록 코딩

주의 : "when device is connected" 블록은 먼저 수동으로 클릭해서 세팅 한 후 클릭했을 때 실행을 수행하시기 바랍니다 그냥 클릭했을 때 누르면 작동 안해요.

3) 결과

정상적으로 Red LED가 깜박이네요.

마무리

ScratchX로 실험 할 때는 플러그인 문제가 가장 골치거리 입니다. 그리고 플러그인이 가끔 인식이 잘 안될 때가 있습니다. 다시 해당 확장 프로그램을 접속하시거나 아두이노의 USB를 PC에서 분리 했다가 다시 연결해 보세요. 몇번 시도하면 정상적으로 인식 됩니다.

S4A 스크래치 보다는 온라인 상에서 실시간으로 연결 할 수 있다는 장점이 있는데 문제는 플러그인 문제가 브라우저마다 인식 문제가 있기 때문에 불편 합니다. 그래도 따로 프로그램을 설치 할 필요없이 플러그인만 설치하면 되니깐 빠르게 인터넷이 연결 된 아무 PC에서 실험을 할 수 있어 괜찮은 것 같아요.

S4A 스크래치로 아두이노 연결하는 것만 post하기가 약간 그런 것 같아서 다른 스크래치도 다 연결해 보는 실험을 하면 괜찮을 것 같아서 ScratchX와 아두이노 연결 편을 post로 작성해 보았네요. 내일은 엔트리로 연결을 해보겠습니다. 한번에 스크래치와 아두이노 연결 부분을 post로 다 정리해 놓아야 겠어요.

[아두이노] S4A 스크래치에서 아두이노로 이미지 조정하기

• 온라인 가상시뮬레이터 : https://www.tinkercad.com
• 스크래치와 아두이노 :
  [아두이노] S4A 스크래치로 아두이노 제어
  [아두이노] S4A 스크래치에서 아두이노 이미지 조정하기

오늘은 어제 이야기 하려다 못한 내용으로 아두이노로 스크래치 이미지를 컨트롤하는 실험을 해볼까 합니다. 스크래치와 아두이노는 서로 쌍방 통신이 가능합니다. 스크래치에서 아두이노에 연결된 Sensor를 읽을 수 있고 아두이노에서 스크래치에 그려지 이미지(케릭터)를 조정을 할 수 도 있습니다. 서로 쌍방 통신으로 읽기/출력이 가능하기 때문에 스크래치를 이용하면 재밌는 것들을 만들 수 있습니다. 어제는 스크래치에서 아두이노 출력하는 LED 깜박이기 였다면 오늘실험은 스크래치에서 아두이노 값을 읽어 오는 방법을 간단히 실험해 보겠습니다. 내용은 아두이노에 연결 된 가변저항기를 조절하여 스크래치 상 고양이 케릭터를 조정해보는 실험이 되겠습니다.

1. S4A 스크래치 이미지 세팅

무대 세팅 : 

무대 창을 누르면 스크립트/배경/소리가 있는데 여기서 배경에서 새로운 배경을 가져오기 눌러 스크래치에 제공되는 배경 이미지를 찾아 적당한 걸 가져오시면 됩니다. 참고로, 소리를 눌러보세요. 여러가지 사운드를 제공하는데 게임같은 것을 만들 때 배경음악으로 사용하면 좀 더 그럴싸한 표현을 할 수 있습니다.

스프라이트 고양이 추가 :

위 화살표를 보시고 스프라이트 파일 선택을 눌러서 고양이 이미지를 가져 옵니다, 참고로 왼쪽에 스프라이트 창에서 모양을 눌러 가져오기를 다시 눌러서 다른 고양이 장면을 가져 오세요. 그러면 하나의 스프라이트창에 두개의 이미지를 넣을 수 있습니다. 이렇게 하면 두 이미지를 교대로 교체하면 고양이 걷는 모션을 만들어 낼 수 있습니다. 참고로, 무대 세팅에서 배경 이미지도 무대에 여러개 배경 이미지를 배치 할 수 있습니다. 그렇게 되면, 무대는 상황에 따라 각기 다른 배경 이미지를 사용할 수 있게 됩니다.

이렇게 해서 이미지 세팅은 끝났습니다.

하지만 아래 창을 보시면 무대 창이 아두이노 이미지에 묻혀 있어서 뭔가를 만들려고 해도 아두이노 때문에 표현하기가 힘들어 보이죠.

위 아두이노 스프라이트 이미지는 삭제할 수 없습니다. 삭제하면 아두이노 연결이 안되니깐요. 그렇기 때문에 아두이노 스프라이트는 안보이게 숨겨야 합니다.

아두이노 핀 값을 출력하는 창은 마우스 오른쪽 버턴을 해당 창에서 클릭하면 아래와 같이 숨기기 기능 선택 창이 뜨고 숨기기로 안보이게 할 수 있습니다.

그 다음 아두이노 그림은 아래 창에서 편집을 눌러 주세요.

그러면 아래 창이 나타나고 지우기를 눌러주세요.

그리고 무대 배경 색의 점을 만드시든 적당한 티 안하는 점을 하나를 아무 위치에 찍어 주시고 확인을 눌러주세요. 그러면 해당 점이 아두이노우노가 됩니다.

이렇게 해서 아두이노 관련 이미지들이 사라졌습니다. 참고로 자세히 보시면 하얀 점이 있지요. 그냥 post 예시를 들기 위해서 하얀색 점으로 한 것이고요. 이 점을 마우스로 클릭해서 드래그 하시면 이동이 됩니다. 해당 점을 안보이는 곳으로 드래그 하시면 완벽하게 숨길 수 있습니다.

이렇게 해서 이미지 세팅이 끝났네요. 이제는 아두이노 세팅과 스크래치 블록코딩을 합시다.

2. 아두이노우노 조정기 만들기

위 그림처럼 간단합니다. 가변저항을 A0핀에 연결하여 가변저항을 돌리면 발생하는 가변저항값을 토대로 스트래치 이미지를 움직이게 할 꺼에요.

이제 아두이노우노에 S4A 스크래치를 사용할 수 있게 펌웨어 소스를 이식시켜야 합니다.

• 출처 : [아두이노] S4A 스크래치로 아두이노 제어

위 post에서 아두이노우노에 펌웨어 소스를 인식하는 방법을 지난시간에 이야기 했기 때문에 설명은 생략하고 위 post를 보시기 바랍니다.

이렇게 해서 아두이노우노에서 기본 세팅은 끝났습니다.

3. S4A 스크래치 블록 코딩

S4A 스크래치에서 가변저항 값 읽기

아두이노 가변저항기에서 가변저항값을 읽기 위해서는 우선 그 가변저항값을 저장하는 변수를 선언해야 합니다. 케릭터 이동에 가변저항값이 사용하기 때문에 변수 이름을 move라는 변수를 하나 만들겠습니다.

위 그림은 이미 만들어 진 상태의 모습입니다. 새로 만들 때는 변수만들기를 누르면 보시는 것과 같은 창이 뜨고 변수이름을 치시면 변수 하나가 생성이 됩니다. 실험에서는 가변저항값을 현재 가변저항값과 이전 가변저항값을 비교하기 위해서 move, premove라는 변수를 만들었는데 이 부분은 나중에 설명 드릴께요. 두개 변수가 필요하니깐 우선 변수만 만들어 놓으세요.

그럼 변수를 만들었으면 그 변수에 실제 아두이노 가변저항값을 읽어 올까요.

제어, 동작, 변수 항목에서 표시한 블록들을 사용하여 읽게 됩니다. 어느 블록이 어느 위치에 있는지 잘 확인해 주세요. 첨에는 블록 위치가 햇갈려 할 수 있으며 색으로 구별하시면 아마 쉽게 구별이 가능 할 꺼에요. 총 4개의 블록으로 코딩을 하게 됩니다.

설계 :

• 센서값 읽기 <= 계속 무한으로 읽어야겠죠.(실시간 조정을 위함)
• 읽은 센서값 저장 <= move 변수를 만들었으니 여기에 저장해야겠죠.

끝! 위 블록 코딩으로 S4A 스크래치에서 이제 아두이노 가변저항값을 읽어와서 move 변수에 계속 실시간으로 저장하게 됩니다. 아무때나 move 변수값을 체크하면 현재 아두이노 가변저항값을 확인 할 수 있게 되었습니다.

고양이 좌/우 이동

아두이노의 가변저항기를 돌리면 고양이가 좌/우로 움직이게 하려면 어떻게 해야 할까요. 우선 고양이를 좌/우 이동을 시켜 봐야 합니다. 지난 시간에 고양이를 좌/우로 왔다 갔다 하는 동작을 샘플로 했었죠. 그 방법을 응용 할 거에요.

위 블록으로 x좌표로 좌/우로 이동을 했었습니다.

설계 :

• 가변저항값을 x좌표로 변환 (0~1023을 x좌표 -200~200 값으로 변환)
• 고양이 걷기 동작 만들기
• 고양이 이동 (가변저항기를 돌리면 돌린 만큼 고양이를 이동시킨다)

가변저항값을 x좌표로 변환 (0~1023을 x좌표 양쪽 끝지점 -200~200 값으로 변환)

가변저항값을 어떤 특정값의 범위로 맞추기 위해서는 아두이노에서 map()함수를 사용했습니다.

long map(long x, long in_min, long in_max, long out_min, long out_max)
{
  return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

위 식을 줄여서 그냥 0~400사이의 값으로 나오게 바꿨네요.

(move - 0) * (400 - 0) / (1023 - 0) + 0

=> move*400/1023

이렇게 줄였습니다. 그러면 가변저항기를 돌리면 0~400사이로 줄어 들게 됩니다.

그 다음 x 좌표는 양쪽 끝점 기준으로 -200~200사이가 됩니다. 그래서 가변저항값이 200일 때 0이 되어야 합니다. 그럼 식에 -200을 해주면 됩니다.

x좌표 : (move*400/1023) - 200

이렇게 해서 실제 고양이가 이동 할 x좌표를 구할 수 있게 되었습니다.

고양이 걷기 동작 만들기

가변저항기를 돌리게 되면 move값이 갱신이 되고 그 값을 기준으로 고양이를 이동시킨다고 했죠.

여기서, 고양이는 언제 걷기를 하나요. 바로 고양이가 이동 할 때 입니다. 즉, 가변저항기를 돌리는 순간 고양이는 걷는 동작을 해야 합니다. 이 표현을 블록 코딩 하면 다음과 같습니다.

이 원리는 딜레이 없이 딜레이 함수를 사용할 때 시간값을 비교할 때 코딩했던 로직과 유사한 원리입니다. 시간의 변화가 특정 조건에 만족할 때 그 동작을 수행하고 끝나는 시점에 현재 시간값을 저장하고 다음 시간을 비교하는 원리를 이용하였습니다. 여기에서는 가변저항기가 변화가 일어나면 그 변화한 만큼 고양이를 이동시킨 후 끝나는 시점에 현재 move(가변저항) 값을 premove(이전저항)값에 저장하여 새로운 가변저항값과 비교하여 변화가 일어나는지 체크하는 용도로 사용 하였습니다. 그래서 현재 가변값과 이전 가변값을 비교하기 위해서 premove 변수를 하나 더 만들어 사용 했네요.

위 블록코딩을 살펴보면 아래와 같은 C코딩으로 표현을 해보았습니다.

premove=0; //초기값

while(1){
  if(move<>premove){
   다음모양(고양이걷기);
   premove=move;
  }
}

여기서, 다음모양은 위 고양이 이미지 세팅에서 고양이 스프라이트에 2개의 이미지를 저장 했었죠. 이때 A, B 이미지가 있는데 다음모양 블록은 현재 이미지에서 다음 이미지로 무조건 바꾸라는 명령입니다. 참고로 다음 이미지는 순차적으로 이미지가 바뀝니다. 여기에서는 2장의 이미지인데 1번 이미지에서 다음모양블록을 만나면 2번 이미지로 바뀌게 됩니다.

위 그림에서 a가 현재 이미지면 다음모양 하면 b 이미지로 교체 됩니다. 현재 이미지가 b이면 다음모양 하면 a 이미지가 됩니다.

위 블록코딩은 가변저항기를 돌리는 순간 if문에서 이전 가변저항값과 현재 가변저항값이 다른지 체크하게 되고 다르면 가변저항기가 움직였다는 소리가 되고 그 순간 다음모양 블록으로 고양이 이미지를 다음 이미지로 바뀌고 고양이가 걷는 동작을 만들어 내게 됩니다.

[결과]

위 결과는 고양이를 x좌표로 이동하는 블록이 없어서 실제 x좌표로 이동하지 않고 가변저항기를 돌리면 제자리 걷는 동작만 수행하네요.

고양이 이동 (가변저항기를 돌리면 돌린 만큼 고양이를 이동시킨다)

사용 블록 :

위 블록에다가 위의 x좌표 구한 블록식을 x 위치에 배치하면 됩니다.

이렇게 배치하면 가변저항기가 움직이면 x좌표값이 바뀌고 해당 값의 위치로 고양이가 이동하게 됩니다.

종합

[아두이노 스프라이트 블록코딩]

[고양이 스프라이트 블록코딩]

[결과]

4. 자연스럽게 고양이 걷는 동작 만들기

이 내용은 안보셔도 됩니다. 스크래치 영역이고 아두이노를 다루는 것이 목적이지 고양이를 자연스럼게 움직이게 하는게 목적이 아니기 때문에 생략하셔도 됩니다. 그냥 뭔가 걷는게 부자연스럽게 보여서 블록 코딩을 수정한 것 뿐입니다. 수정 된 블록 코딩으로 하면 오늘 post의 의미 전달이 잘 안될 것 같아서 따로 분리 해서 설명합니다.

이 내용은 좀 더 자연스럽게 고양이가 오른쪽으로 걸을 때 오른 방향을 바라보도록 하고 왼쪽으로 걷게 되면 왼쪽을 바라보게 하는 방식입니다.

위 그림이 핵심 블록 코딩입니다. 우선 화살표가 가리키는 모양의 아이콘을 클릭해주세요. 좌우 이동시 회전 방향을 나타냅니다. 방향전환을 할 때 회전방향을 어떤 방식으로 회전 시키느냐에 따라서 고양이의 움직임이 바뀌게 됩니다. 좌/우 방향으로 바라보도록 회전 시키려면 화살표가 가리키는 모양의 아이콘을 클릭하면 됩니다.

여기서, 고양이의 방향 전환은 어쩔 때 일어나는지 알아야 합니다. 현재시점과 이전시점을 기준으로 비교하면 방향을 알아 낼 수 있는 두가지 방법이 있는데 그 중 하나를 선택하여 실험 했네요.

방향 찾기 :

• 현재 가변저항값과 이전 가변저항값를 비교하여 방향을 정한다.
• 현재 x좌표값과 이전 x좌표값을 비교하여 방향을 정한다.

가변저항값이든 x좌표값이든 선택은 여러분 몫입니다. 방향 전환을 할 때 예를 들면, 이전 가변저항값이 100일 때 현재 가변저항값이 110이면 어떻게 될까요. 고양이가 x좌표로 10만큼 이동하게 됩니다. 오른쪽으로 이동하는 것이기 때문에 고양이는 오른쪽 방향이 됩니다. 만약 현재 가병저항값이 90이면 x좌표는 왼쪽으로 10만큼 이동하게 되는데 고양이는 왼쪽 방향이 되겠죠.

위 코딩은 완성된 블록 코딩인데 x좌표 변수를 하나 더 만들었네요. 그리고 move와 premove변수가 기존에 있기 때문에 방향찾기는 가변저항값을 비교하여 방향을 결정했네요.

나머지 블록은 앞에서 설명 드렸기 때문에 생략합니다.

[결과]

영상을 보시면 가변저항기로 조정하면 깔금하게 해당 방향으로 고양이가 방향 전환을 하네요.

마무리

아! 이야기를 너무 풀어서 설명하다 보니 길어졌네요.