블록쌓기 프로그래밍

브로클리프롭 프로그래밍하기

2. 프로펠러 간단한 BlocklyProp 프로그래밍

Contents

브로클리프롭 프로그래밍 실습 세부목차


1. 브로클리프롭 시작하기

2. 프로펠러 간단한 BlocklyProp 프로그래밍

3. 브로클리프롭 함수 및 멀티코어 마이크로프로세서

4. 브로클리프롭 전자회로 실습


본 페이지의 내용은 패럴렉스(Learn.Parallax.com)사의 공식 홈페이지에서 제공되는 자료를 참고하여 작성되었습니다.


아래 세부 내용들을 살펴볼 수 있습니다.

1) 프로그래밍 학습하기

2) 변수 블록

3) 터미널 통신하기

4) 변수 값과 수학 블록

5) 판단 실행하기(Making Decisions)

6) 복잡한 판단 실행하기

7) 블록 반복하기

8) 그래프 데이터 만들기


그림입니다. 원본 그림의 이름: mem00000a4814fd.png 원본 그림의 크기: 가로 492pixel, 세로 345pixel 사진 찍은 날짜: 2016년 10월 24일 오후 9:39

브로클리프롭(BlocklyProp)으로 프로그램을 배울 준비가 되셨습니까? 그렇다면 올바른 위치에 있습니다.


무엇에 관한 것인가요?

이 내용은 기본 브로클리프롭(BlocklyProp) 블록, 사용 방법 및 함께 작동하는 방법에 익숙해지는데 도움이 됩니다. 값 지정 및 사용, 수학 문제 해결, 의사 결정 및 코드 섹션 반복과 같은 일반적인 코딩 작업으로 프로그램을 작성합니다.


필요한 하드웨어

이 교육 세트는 Propeller 개발 보드, 전원 및 USB 프로그래밍 케이블만 필요합니다. 이것은 Propeller Activity Board WX 용으로 작성되었습니다. 또한 Propeller FLiP 모듈과 호환됩니다. 5MHz 오실레이터와 동일한 유형의 EEPROM과 동일한 연결을 갖는 다른 프로펠러 기반 보드는 Hackable Electronic Badges와 같은 대부분의 블록에서도 작동합니다.


시작하기 전에

- 브로클리프롭(BlocklyProp) 시작하기를 완료했는지 확인하십시오.

- 브로클리프롭(BlocklyProp) 웹 사이트의 창 또는 탭을 열어 이 자습서를 수행하십시오.


작업이 끝나면

- Blockly Functions 튜토리얼을 사용하여 재사용 가능한 코드 덩어리를 만드십시오.

- 프로펠러 브로클리프롭(BlocklyProp) 블록을 탐색하면 당신의 보드에 연결할 수 있는 다양한 센서, 디스플레이 및 기타 장치에 대한 더 많은 특별한 블록을 발견할 수 있습니다.


1) 프로그래밍 학습하기

처음에는 프로그래밍 언어를 배우는 것이 외국어를 배우는 것처럼 느껴질 수 있습니다. 어렵게 보일 수도 있지만 연습을 통해 자신만의 프로그램을 만들 수 있습니다. 이미 어휘에 익숙하기 때문에 외국어보다 프로그래밍 언어를 배우는 것이 더 쉽다는 것을 알 수 있습니다.


또한 두 언어에는 규칙이 있습니다. 예를 들어 영어에는 문법이 있습니다. 프로그래밍 언어 규칙을 구문이라고 합니다. 브로클리(Blockly)에 대한 좋은 점은 사용하는 블록이 프로펠러(Propeller) C의 규칙을 따르는 코드를 생성하는지 확인하는데 도움이 된다는 점입니다. 일부 연습에서는 브로클리프롭(BlocklyProp)을 즉시 사용할 수 있습니다!



브로클리프롭(BlocklyProp)으로 무엇을 할 수 있나요!


브로클리프롭(BlocklyProp)은 프로펠러 마이크로 컨트롤러를 위한 시각적 프로그래밍 언어입니다. 그것은 당신이 프로펠러 마이크로 컨트롤러에게 무엇을 해야 하는지 알려주는 방법입니다. 프로펠러와 같은 마이크로 컨트롤러는 다음 지침을 잘 준수합니다. 일반적으로 마이크로 컨트롤러가 따르는 지침은 BASIC, C, Python 또는 Javascript와 같은 텍스트 기반 프로그래밍 언어로 작성됩니다. Blockly은 각 블록이 텍스트 기반 코드를 작성하기 때문에 유용합니다.


브로클리프롭(BlocklyProp)이 블록을 프로그램으로 드래그할 때마다 무엇을 하는지 간단히 살펴보겠습니다.


- 아직 브로클리프롭(BlocklyProp)을 설정하지 않았다면 여기(브로클리프롭 시작하기)로 이동하여 먼저 시도해보십시오.

- 새로운 C 프로젝트를 열어 시작하십시오. 

- 이제 새 프로젝트에 이름과 설명을 입력하십시오.

- 보드 유형 메뉴에서 Propeller Activity Board WX와 같은 보드를 선택하십시오.

- 프로젝트 공유의 경우 개인 또는 공유를 선택한 다음 마침을 클릭합니다.


이제 블록 카테고리 메뉴가 왼쪽에 표시되고 오른쪽에 빈 창이 블록으로 표시됩니다.


- PIN STATES 카테고리를 클릭하고 PIN 만들기 블록을 프로그램으로 드래그하십시오:

그림입니다. 원본 그림의 이름: mem00000a480001.png 원본 그림의 크기: 가로 193pixel, 세로 43pixel 사진 찍은 날짜: 2016년 10월 24일 오후 7:00


- 보기 드롭다운 메뉴(화면 상단)를 찾고, 보기를 Propeller C로 전환하십시오. 다음과 같이 표시됩니다 :

그림입니다. 원본 그림의 이름: mem00000a480002.png 원본 그림의 크기: 가로 246pixel, 세로 183pixel 사진 찍은 날짜: 2016년 10월 24일 오후 7:02


프로펠러 C 텍스트 기반 코드는 프로펠러 자체에 전송되기 이전에 어셈블리 언어라고 하는 더 작은 명령으로 컴파일된 언어입니다. 일단 그 지시가 프로펠러 내부에 있으면 명령을 실행합니다.

2) 변수 블록


변수는 프로그래밍할 때 배우게 될 가장 중요한 개념 중 하나입니다. 변수는 정보를 담는 컨테이너 또는 상자로 생각할 수 있습니다. 브로클리프롭(BlocklyProp)에는 "string"과 "integer"의 두 종류 변수가 있습니다.


- 문자열 변수는 텍스트를 포함합니다.

- 정수 변수는 양수 또는 음수의 정수를 유지합니다.


프로펠러 마이크로 컨트롤러는 모든 수치를 처리할 수 있지만 기억해야 할 중요한 두 가지 사항이 있습니다.


- 브로클리프롭(BlocklyProp)은 소수점("부동 소수점"이라고 함)을 지원하지 않습니다. 숫자나 변수가 있는 부분을 만들 계획이라면 이 점을 명심하십시오.

- 정수 컨테이너에는 텍스트를 저장할 수 없고 문자열 컨테이너에는 숫자를 저장할 수 없습니다.


그림입니다. 원본 그림의 이름: mem00000a480003.png 원본 그림의 크기: 가로 300pixel, 세로 173pixel 사진 찍은 날짜: 2016년 10월 21일 오후 6:32


당신이 쓴 첫 번째 프로그램은 프로펠러 마이크로 컨트롤러 컴퓨터 화면의 터미널에 "Hello World"를 보내라고 했습니다. 이제 터미널을 사용하여 변수가 작동하는 방식에 대해 조금씩 배우게 됩니다.

 


변수 블록 사용하기

VARIABLES 범주에는 두 개의 변수 블록이 있습니다. 첫 번째는 변수 설정(set variable) 블록입니다.

그림입니다. 원본 그림의 이름: mem00000a480004.png 원본 그림의 크기: 가로 104pixel, 세로 39pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:08


이 블록을 사용하여 값을 변수에 넣습니다. 변수 설정 블록을 작업 공간에 배치한 후에는 변수의 이름을 포함하는 값을 설명하는 값으로 변수의 이름을 변경할 수 있습니다. 변수의 이름을 변경하려면 드롭다운 메뉴를 클릭하고 "변수 이름 바꾸기 ..."를 선택하십시오. 작성하는 각 이름은 해당 프로젝트에 고유해야 합니다. 규칙에 대한 이름 지정 정보를 참조하십시오.

그림입니다. 원본 그림의 이름: mem00000a480005.png 원본 그림의 크기: 가로 241pixel, 세로 106pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:16


- 아직 설정하지 않은 경우 설정 변수 블록을 배치하고 이름을 "myNumber"로 변경하십시오.

그림입니다. 원본 그림의 이름: mem00000a480006.png 원본 그림의 크기: 가로 148pixel, 세로 44pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:14


- VALUES 범주에서 숫자 값 블록을 연결하십시오.

그림입니다. 원본 그림의 이름: mem00000a480007.png 원본 그림의 크기: 가로 178pixel, 세로 41pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:14


- 숫자 값 블록 에서 0을 클릭하여 원하는 숫자로 변경하십시오. 양수 또는 음수일 수 있으며 -2,147,483,648 및 2,147,483,647 사이의 모든 정수가 될 수 있습니다. 


- 다른 세트 변수 블록을 작업 공간으로 드래그하십시오. "myNumber"라는 이름이 선택되어 있으면 지금은 괜찮습니다. 


- 드롭다운 메뉴를 클릭하고 "새 변수"를 선택하십시오.

그림입니다. 원본 그림의 이름: mem00000a480008.png 원본 그림의 크기: 가로 242pixel, 세로 115pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:16


- 변수 이름을 "myText"로 지정하십시오. 이제 텍스트 문자열 블록을 VALUES 범주에서 작업 영역으로 끌어서 방금 이름을 바꾼 변수 블록에 첨부하십시오.

그림입니다. 원본 그림의 이름: mem00000a480009.png 원본 그림의 크기: 가로 173pixel, 세로 39pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:30


- "Hello"를 원하는 텍스트로 변경하십시오.


텍스트를 구성하는 일련의 문자를 "문자열"이라고 합니다. 문자열을 짧게 유지하는 것이 좋습니다. 일부 블록은 문자열당 문자수를 128로 제한합니다.


변수의 내용을 보기 위해 터미널에 출력합니다. 터미널을 설정하려면 다음과 같이하십시오.


- COMMUNICATE> TERMINAL 에서 터미널 지우기 화면 블록을 끌어서 프로그램 끝 부분에 연결하십시오. 

- 터미널 인쇄 텍스트터미널 인쇄 번호 블록을 당신의 프로그램에 붙이세요. 블록은 이제 다음과 같이 보일 것입니다 (변수 텍스트와 숫자가 다를 수 있음).

그림입니다. 원본 그림의 이름: mem00000a48000a.png 원본 그림의 크기: 가로 449pixel, 세로 164pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:43


- 터미널 인쇄 텍스트터미널 인쇄 번호 블록 안의 "Hello" 및 0 블록을 마우스 오른쪽 단추로 클릭하고 삭제하십시오.

- 왼쪽에 있는 VARIABLES 메뉴를 클릭하면 "myNumber"및 "myText"라는 레이블이 붙은 두 개의 새로운 블록이 나타납니다.

 

이 블록은 사용 변수 블록입니다.

그림입니다. 원본 그림의 이름: mem00000a48000b.png 원본 그림의 크기: 가로 129pixel, 세로 79pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:42


- 아래 그림과 같이 두 개의 터미널 인쇄 블록에 놓습니다. 

- 두 터미널 인쇄 블록의 "새 라인"상자를 확인하십시오.

그림입니다. 원본 그림의 이름: mem00000a48000c.png 원본 그림의 크기: 가로 529pixel, 세로 165pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:43


- BlocklyPropClient를 사용할 수 있는지 확인하고 장치 메뉴에서 Activity Board WX COM 포트를 연결하고 선택했는지 확인하십시오. 

- 실행 메뉴에서 "RAM로드"를 선택하십시오.


프로그램이 로드되면 터미널이 열리고 짧은 연결메시지가 표시되면 변수가 표시됩니다.

그림입니다. 원본 그림의 이름: mem00000a48000d.png 원본 그림의 크기: 가로 218pixel, 세로 106pixel


축하합니다! 브로클리프롭(BlocklyProp)으로 자신의 프로그램을 만드는 법을 배우기 시작했습니다!


- 화면의 오른쪽 상단 모서리에 있는 "저장"을 클릭하여 프로그램을 저장하십시오.


알고 계셨습니까?

브로클리(Blockly)의 모든 변수는 전역 변수입니다. 즉, 프로그램의 한 부분에서 변수를 설정하면 프로그램의 다른 부분에서도 변수로 사용할 수 있습니다. 이것은 두 가지 다른 방식으로 작동합니다 - 프로그램의 다른 부분이 변수의 값을 설정할 수 있고, 프로그램의 다른 부분이 변수의 값을 가져올 수 있습니다.


 


다음을 시도해보세요!


- '저장'버튼 옆의 드롭다운 화살표를 클릭하고 '다른 이름으로 저장'을 선택하십시오.

- 프로그램의 새 이름을 입력하십시오. 우리는 "Math with Variables"를 사용할 것입니다.

- 숫자 값 블록을 프로그램의 첫 번째 블록에서 멀리 드래그하십시오.

그림입니다. 원본 그림의 이름: mem00000a48000e.png 원본 그림의 크기: 가로 526pixel, 세로 187pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:54


- OPERATORS 카테고리의 수학 연산(Math operation) 블록을 변수 설정 블록에 연결하십시오.

- 수학 연산 블록으로 숫자 값 블록을 아래와 같이 가져다 놓으십시오. :

그림입니다. 원본 그림의 이름: mem00000a48000f.png 원본 그림의 크기: 가로 531pixel, 세로 178pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:58


- 새로운 숫자 값 블록을 수학 연산 블록의 두 번째 공간에 추가하십시오. 번호를 입력하십시오.


그림입니다. 원본 그림의 이름: mem00000a480010.png 원본 그림의 크기: 가로 532pixel, 세로 177pixel 사진 찍은 날짜: 2016년 10월 24일 오후 8:57

- 프로그램을 다시 실행하려면 RAM에 프로그램을 업로드하십시오.


프로그램이 로드되면 터미널이 열리며 짧은 연결 메시지가 표시되고 변수에 저장된 새 값이 표시됩니다.

그림입니다. 원본 그림의 이름: mem00000a480011.png 원본 그림의 크기: 가로 198pixel, 세로 102pixel



귀하의 프로그램은 수학 연산 블록으로 두개의 숫자 값을 가져와서 변수 "myNumber"에 저장하기 전에 이를 더했습니다. 42 + 8 = 50이기 때문에 50을 표시했습니다.


 


당신 차례 !

수학 연산 블록의 "+"기호는 실제로 드롭다운 메뉴임을 알 수 있습니다. 다른 수학 연산도 선택할 수 있습니다. 프로그램에서 다음 각 아이디어를 시도하십시오.


- 텍스트 및 숫자 값을 변경하십시오.

- "-", "*"및 "/"와 같은 다른 수학 연산을 시도해보십시오.

- 터미널 인쇄 번호 블록의 드롭다운 메뉴를 사용하여 16 진수 또는 2 진수로 번호를 인쇄하십시오.

- 운영자 범주에서 임의의 블록을 시도하십시오.

- VALUES 범주에서 텍스트 블록의 길이를 보십시오.

3) 터미널 통신하기


이전 내용에서는 텍스트와 숫자를 터미널로 보내는 방법을 배웠습니다. 이제 터미널을 사용하여 대화형 프로그램을 만들기 위해 프로펠러에 정보를 보냅니다. 마이크로 컨트롤러가 사람이나 환경에 반응하고 작용할 수 있다면 훨씬 더 유용할 수 있습니다.



테스트 코드


당신의 이름을 타이핑할 것을 요구하는 프로그램을 작성한 다음 터미널에 그것을 인쇄하여 다시 반복하십시오.


- 브로클리프롭(BlocklyProp)에서 새로운 Propeller C 프로젝트를 엽니다. 

- 프로젝트 이름을 선택하십시오. 예를 들어, "Get Text From Terminal"을 사용할 것입니다. 

- 프로그램은 먼저 귀하의 이름을 입력하도록 요청할 것입니다. 그런 다음 이름을 입력하면 1 초 후에 입력한 내용이 반복됩니다.


프로그램은 다음과 같습니다.

그림입니다. 원본 그림의 이름: mem00000a480012.png 원본 그림의 크기: 가로 434pixel, 세로 204pixel 사진 찍은 날짜: 2016년 10월 25일 오후 7:06



프로그램을 작성하려면 :


- 터미널 인쇄 텍스트 블록을 작업 공간으로 끌어서 텍스트를 "이름 입력 :"으로 변경하십시오.

- 그런 다음, COMMUNICATE> TERMINAL 에서 터미널 수신 텍스트 블록을 추가하십시오 - 드롭다운 메뉴에서 변수 이름에 주의를 기울이면 됩니다.

- CONTROL 카테고리에서 일시중지(pause) 블록을 추가하십시오. 기본값은 1000ms (1 초)여야 하므로 이 블록에서 아무 것도 변경할 필요가 없습니다.

- COMMUNICATE> TERMINAL 에서 터미널 새 라인 블록을 추가하십시오.

- 다른 터미널 인쇄 텍스트 블록을 추가하십시오. 

- 텍스트 문자열 블록 ("Hello"라고 쓰는 블록)을 터미널 인쇄 텍스트 블록에서 휴지통으로 드래그한 다음 사용변수(use variable) 블록으로 바꿉니다. 변수 이름이 위의 터미널 수신 텍스트 블록에서 사용된 것과 동일해야 합니다.

- "다음에 새로운 라인(then a new line)" 상자를 확인하세요.

- 프로그램을 저장하십시오.

- Activity Board를 연결하고 켠 다음 BlocklyPropClient가 실행 중이고 연결되어 있는지 확인하십시오. 

- 장치 메뉴에서 보드를 선택하십시오.

- 실행 메뉴에서 "RAM로드"를 선택하십시오.


당신은 이것을 보아야 합니다 :

그림입니다. 원본 그림의 이름: mem00000a480013.png 원본 그림의 크기: 가로 317pixel, 세로 88pixel


- "이름 입력 :"행 뒤의 터미널을 클릭하십시오. 깜박이는 커서가 나타납니다.

- 이름을 입력하고 Enter 키를 누릅니다.

- 1 초 후, 프로펠러는 다음 줄에 당신의 이름을 인쇄할 것입니다.


다음을 시도해 보세요!


이번에는 이름 (또는 다른 텍스트)을 수집하는 대신 터미널을 사용하여 숫자 값을 수집합니다. 숫자를 수집하면 그 숫자로 무언가를 할 수 있습니다. 예를 들어 계산기와 같이 활동 보드 WX를 사용하여 두 개의 숫자를 수집하여 함께 추가할 수 있습니다. 시도해 봅시다:


- 새 프로그램을 열고 이름을 지정하십시오. 우리는 "터미널에서 두 개의 번호 추가"를 사용했습니다.

- 표시된 프로그램을 빌드하십시오.

그림입니다. 원본 그림의 이름: mem00000a480014.png 원본 그림의 크기: 가로 675pixel, 세로 403pixel 사진 찍은 날짜: 2016년 10월 25일 오후 7:06


- 프로그램을 저장하십시오.

- 실행 메뉴에서 "RAM에 로드"를 클릭하십시오.

- 프로그램이 로드되면 터미널이 팝업됩니다. 간단한 연결 메시지가 나타나면 화면이 사라지고 다음과 같이 표시됩니다.

그림입니다. 원본 그림의 이름: mem00000a480015.png 원본 그림의 크기: 가로 138pixel, 세로 51pixel


- "숫자를 입력하십시오 :"텍스트 뒤에 있는 터미널을 클릭하고 숫자를 입력한 다음 enter 키를 누릅니다.

- 다른 번호를 묻는 또 다른 문구가 나타납니다. 텍스트 뒤의 터미널을 클릭하고 다른 번호를 입력한 다음 Enter 키를 누릅니다.

- 1 초 후, 터미널은 다음과 같이 표시합니다 :

그림입니다. 원본 그림의 이름: mem00000a480016.png 원본 그림의 크기: 가로 345pixel, 세로 65pixel

 

어떻게 동작하는가?


터미널에 입력하면 컴퓨터가 프로펠러 보드에 정보를 보냅니다. 터미널 수신 텍스트 블록을 사용함으로써 프로펠러 마이크로 컨트롤러는 연결되어 있는 컴퓨터로부터 정보가 도착할 때까지 멈춘 상태로 기다리고 있다는 것을 알 수 있습니다.


터미널 수신 텍스트 블록을 사용할 때, 프로펠러는 사용자가 입력한 각 문자를 듣고 버퍼라는 특수 숨겨진 변수에 저장합니다. 이 작업은 사용자가 리턴 키를 누를 때 전송되는 문자를 수신할 때까지 진행됩니다. 그리고 프로펠러가 당신이 리턴 키 문자를 보낸 것을 알게 되면, 버퍼에서 수집된 정보를 변수에 저장합니다.


알고 계셨습니까?


각 캐릭터는 8 비트의 정보를 사용합니다. 각 비트는 1 (1) 또는 0 (0) 일 수 있습니다. 각 문자는 고유한 8 비트 코드를 가지며 8 비트는 바이트라고 합니다. 문자 코드 세트를 ASCII라고 합니다. 예를 들어 문자 'Z'에 대한 ASCII 코드는 이진수로 01011010이고 십진수는 90입니다. 반환키의 ASCII 코드는 00001101 또는 십진수 13입니다. 더 많은 문자와 10 진수의 코드 번호 목록은 ASCII 표를 참조하십시오.


캐릭터의 문자열이 프로펠러의 메모리에 저장되면, 그것은 항상 하나의 여분의 문자를 차지합니다. 예를 들어 변수에 11 개의 문자열 "Hello World"를 저장하면 12 바이트를 차지합니다. 마지막 바이트는 영 (00000000)이므로 Propeller는 문자열의 끝 부분을 알 수 있습니다.


 

당신 차례 !

- Mad Libs® 스타일의 "빈칸 채우기"게임을 만드십시오. 친구에게 명사나 동사 (또는 다른 부분)를 입력하도록 요청한 다음 입력한 단어를 문장에 인쇄하십시오. 여러 단어를 묻고 이야기의 일부로 인쇄하는 프로그램을 만들 수 있습니다.

4) 변수 값과 수학 블록


일단 당신 자신의 프로그램을 만들기 시작하면, 당신의 프로그램이 수학을 이용할 필요가 있을 것입니다. 값과 연산자 및 브로클리프롭(BlocklyProp)에서 작동하는 방법에 대해 알면 도움이 되는 몇 가지 트릭이 있습니다.


 

수학 연산 블록

이미 수학 연산 블록을 사용했습니다. 두 개의 값 블록을 삽입하고 이를 수행할 수학 연산을 선택할 수 있습니다.

그림입니다. 원본 그림의 이름: mem000007140016.png 원본 그림의 크기: 가로 175pixel, 세로 52pixel 사진 찍은 날짜: 2016년 10월 25일 오후 7:14


이 블록은 52 + 48 = 100 이므로 100의 값을 제공합니다. 터미널 인쇄 번호 블록에 넣으면 수학 연산 블록에서 주어진 값을 볼 수 있습니다.

그림입니다. 원본 그림의 이름: mem000007140017.png 원본 그림의 크기: 가로 573pixel, 세로 63pixel 사진 찍은 날짜: 2016년 10월 25일 오후 7:16


- 새 프로그램을 만들고 위의 블록을 설정하십시오.

- 이 같은 값을 가진 다른 수학 연산자를 시도하십시오.


드롭다운 메뉴에서 빼기 ( - )를 선택하면 결과는 4가 됩니다. 곱하기 ( * ) 를 선택하면 결과는 2496 이 됩니다.


Division ( / )은 1로 표시되며 예상보다 약간 다릅니다. 52 ÷ 48 = 1.0833 ... 그러나 브로클리(Blockly)는 양수 및 음수의 정수로만 동작합니다. 프로그램이 어떤 분열을 하고 있다면 이 사실을 아는 것이 중요합니다.


모듈(modulus)는 나눗셈 이후의 나머지이므로, 48이 한 번에 52가 되면 나머지는 4입니다. 가끔은 프로그램에서 나누기와 모듈을 모두 사용하는 것이 도움이 됩니다 숫자를 나눌 수 있습니다.

 


시도해 보세요!

두 개 이상의 숫자를 사용하여 수학을 수행해야 하는 경우 어떻게 해야 합니까? 세 개 이상의 값이 있는 방정식을 계산하려면 수학 연산 블록을 "중첩 (nest)"해야 합니다. 이 의미는 당신이 하나의 수학 연산 블록을 다른 수학 연산 블록에 넣는 것입니다. 아래에 묘사된 중첩인형과 매우 흡사합니다.

그림입니다. 원본 그림의 이름: mem000007140018.png 원본 그림의 크기: 가로 350pixel, 세로 218pixel 사진 찍은 날짜: 2016년 10월 21일 오후 11:13


3 가지 조건과 2 가지 연산, 즉 덧셈과 곱셈으로 프로그램을 작성해 봅시다. 중첩된 수학 연산 블록의 작동 방식을 이해하는데 도움이 되도록 용어를 두 가지 방식으로 그룹화하여 서로 다른 두 가지 방법을 제공합니다.


- 다음과 같은 프로그램을 작성하여 수학 연산 블록을 표시된대로 정확하게 중첩하십시오.

그림입니다. 원본 그림의 이름: mem000007140019.png 원본 그림의 크기: 가로 666pixel, 세로 207pixel 사진 찍은 날짜: 2016년 10월 25일 오후 8:13


- 프로그램을 RAM에 로드하십시오.


프로그램이 로드되면 터미널에 다음이 표시됩니다.

그림입니다. 원본 그림의 이름: mem00000714001a.png 원본 그림의 크기: 가로 136pixel, 세로 49pixel


왜 다른가? 당신이 그것을 알아낼 수 있는지 보십시오. 확실하지 않으면 계속 읽으십시오!



어떻게 동작하는가!

브로클리프롭(BlocklyProp) 프로그램이 먼저 평가하는 문제입니다.

그림입니다. 원본 그림의 이름: mem00000714001b.png 원본 그림의 크기: 가로 454pixel, 세로 129pixel


* 첫 번째 터미널 인쇄 번호 블록에서 브로클리프롭(BlocklyProp)은 (6 + 4) = 10을 먼저 찾은 다음 2를 곱하여 20이 됩니다.

* 두 번째 터미널 인쇄 번호에서 브로클리프롭(BlocklyProp)은 (4 × 2) = 8을 먼저 찾은 다음 6을 더하여 14가 됩니다.


이것은 수학 연산 블록이 중첩되어 있을 때 브로클리프롭(BlocklyProp)이 내부 연산 블록을 내부에서 평가 한다는 것을 보여줍니다. 위의 설명에서와 같이 각 수학 연산 블록이 괄호로 묶여 있다고 상상할 수 있습니다.

 


당신 차례입니다 !

표준 작업 순서에 따르면, 곱셈과 나눗셈을 더하기와 빼기보다 먼저 작업하고 왼쪽에서 오른쪽 순서로 작업합니다. (괄호와 같은 구문 표시가 없는 경우에 해당됩니다.)


다음 문제에 대한 해답을 제시하고 표시하는 프로그램을 작성하십시오. 표준 운영 명령을 사용할 때와 동일한 대답을 얻으려면 블록 중첩을 신중하게 선택하십시오.

9 + 6 ÷ 3 = ___

10 - 2 × 6 + 1 = ___

100 × 4 ÷ 25 - 6 = ___

20 ÷ 10 - 1 + 55 × 2 = ___

5) 판단 실행하기(Making Decisions)

 

프로그래밍의 기본 사항을 배우고 나면, 버튼이나 센서와 같은 입력 그리고 화면 및 조명과 같은 출력을 Propeller Activity Board WX에 연결하기 시작할 것입니다. 당신은 판단을 실행하는 프로그램을 작성하려고 할 수 있습니다. 예를 들어, 버튼을 누를 때 불빛이 켜지기를 원할 수 있습니다.


이런 프로그램에서는 터미널 수신 텍스트CONTROLS> STRINGS문자열 길이(length of string) 블록을 사용하여 개인의 이름이 7 자보다 짧거나 길 것인지를 판단하는 프로그램을 만듭니다.


테스트 코드

- 새 브로클리프롭(BlocklyProp) 프로젝트를 엽니다.

- 다음 프로그램을 빌드하십시오.

그림입니다. 원본 그림의 이름: mem00000a480017.png 원본 그림의 크기: 가로 648pixel, 세로 251pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:20


- 보드의 COM 포트가 장치 메뉴 드롭다운에서 선택되었는지 확인하십시오.

- "RAM에 로드"를 클릭하십시오.

- 프로그램이 로드되면 터미널에 다음이 표시됩니다.

그림입니다. 원본 그림의 이름: mem00000a480018.png 원본 그림의 크기: 가로 177pixel, 세로 51pixel


- 터미널을 클릭하고 이름을 입력한 다음, 입력이 완료되면 Enter / Return 키를 누릅니다.


삭제 / 백스페이스 키를 사용할 수 없으므로, 만약 실수가 있다면, 프로그램을 다시 로드하고 다시 시작하면 됩니다. 그러면 프로그램은 사용자가 입력한 이름의 문자수를 표시합니다.


전문가의 팁 : 스페이스를 사용하십시오!

블록에 텍스트를 입력할 때 공백을 사용하면 터미널에서 프로그램을 더 쉽게 읽을 수 있습니다. 명령문의 중간에 인쇄하려는 번호 앞뒤에 나타나는 텍스트에 공백을 추가하지 않으면 다음과 같이 표시됩니다.

그림입니다. 원본 그림의 이름: mem00000a480019.png 원본 그림의 크기: 가로 236pixel, 세로 35pixel


공백을 추가하면 출력을 읽기가 더 쉽습니다.

그림입니다. 원본 그림의 이름: mem00000a48001a.png 원본 그림의 크기: 가로 538pixel, 세로 183pixel



이 여분의 공백으로 터미널에서 다음과 같이 인쇄할 것입니다 :

그림입니다. 원본 그림의 이름: mem00000a48001b.png 원본 그림의 크기: 가로 250pixel, 세로 32pixel



if ... do 문장을 소개합니다.

CONTROL 카테고리에 있는 if ... do 블록이 있습니다.

그림입니다. 원본 그림의 이름: mem00000a48001c.png 원본 그림의 크기: 가로 75pixel, 세로 69pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:26


if ... do 블록에서만 값을 비교하는 블록을 첨부하고 동작하게 할 수 있습니다. 다음은 OPERATORS> NUMBERS 카테고리의 값 비교 블록입니다.

그림입니다. 원본 그림의 이름: mem00000a48001d.png 원본 그림의 크기: 가로 124pixel, 세로 45pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:27



이 블록을 사용하려면 두 개의 값을 삽입하고 드롭다운 메뉴에서 비교를 선택하십시오. 블록은 비교 명령문을 평가하고 명령문이 참이면 1, 거짓인 경우 0을 제공합니다.


알고 계셨습니까?

= 기호는 관계 연산자라고 합니다. 여기서 A는 비교 값의 관계 연산자 목록 드롭다운 메뉴를 나타냅니다.

=        같음

≠        같지 않음

>        보다 큼

≥        보다 크거나 같음

<        미만

≤        보다 작거나 같음


경우에 따라 조건이 참일 경우 하나의 작업을 수행해야 하며 그렇지 않은 경우 다른 작업을 수행해야 할 수도 있습니다. if ... do 블록은 원래의 형태로 조건이 true 일 경우에만 작업을 수행하지만 if ... do 블록은 변경될 수 있습니다.


if ... do 블록은 특별한 변형블록이어서 당신이 동작 방식을 변경할 수 있습니다. "if"라는 단어 앞에 있는 파란색 톱니바퀴 아이콘을 클릭하면 옵션 선택을 위한 상자가 나타납니다.

그림입니다. 원본 그림의 이름: mem00000a48001e.png 원본 그림의 크기: 가로 217pixel, 세로 206pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:32


시도해 보세요!

- if ... do 블록을 변경하려면 파란색 기어를 클릭하십시오.

- else 블록을 if 블록 안으로 드래그하십시오 :

그림입니다. 원본 그림의 이름: mem00000a48001f.png 원본 그림의 크기: 가로 376pixel, 세로 180pixel


- 파란색 기어 아이콘을 다시 클릭하면 옵션이 축소됩니다.

- 새로 수정된 if ... do 블록을 프로그램 끝에 추가하십시오.

- 다음과 같이 될 때까지 프로그램에 블록을 추가하십시오.

그림입니다. 원본 그림의 이름: mem00000a480020.png 원본 그림의 크기: 가로 650pixel, 세로 400pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:39


- 프로그램을 RAM에 로드하십시오.

- 터미널이 열리면 터미널을 클릭하고 이름을 입력하십시오.

- Enter / Return 키를 누릅니다.

- 터미널에서 인쇄할 내용을 관찰하십시오.

그림입니다. 원본 그림의 이름: mem00000a480021.png 원본 그림의 크기: 가로 257pixel, 세로 74pixel또는 그림입니다. 원본 그림의 이름: mem00000a480022.png 원본 그림의 크기: 가로 273pixel, 세로 75pixel

 


당신 차례입니다 !

입력한 이름이 정확하게 7 글자인지, 7 글자보다 큰지 작은지 여부를 테스트하려면 어떻게 해야 합니까? if ... do 블록을 다시 변경하여 else if 조건을 포함시킬 수 있습니다.

그림입니다. 원본 그림의 이름: mem00000a480023.png 원본 그림의 크기: 가로 633pixel, 세로 396pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:42


- 이제 나이, 생년월일 또는 좋아하는 색과 같이 입력한 내용에 따라 다른 메시지를 제공하는 프로그램을 직접 만들어보십시오.

6) 복잡한 판단 실행하기


때로는 프로그램이 하나의 조건과 다른 조건이 모두 사실인지 여부에 따라 수행할 작업을 결정해야 할 때도 있습니다. 다른 경우에는 코드가 하나의 조건 또는 다른 조건이 참인지 확인해야 할 수도 있습니다. 이 단원에서는 서로 다른 두 가지 입력을 기반으로 이러한 결정을 내리는 프로그램을 작성해 봅니다. 이러한 결정은 OPERATORS > NUMBERS 메뉴의 부울 비교 블록을 사용하여 수행할 수 있습니다.

그림입니다. 원본 그림의 이름: mem00000714001c.png 원본 그림의 크기: 가로 144pixel, 세로 48pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:45


복잡한 결정을 위해 블록을 사용하려면 두 개의 값 비교 블록을 부울 비교 블록에 삽입하고 드롭다운 메뉴에서 옵션을 선택하십시오 : and , or , and not , or not. 부울 비교 블록은 if ... do 블록으로 들어갈 수 있습니다. 예를 들어, 아래의 표현식은 "a가 b와 같고 c가 d와 같지 않으면 true이고 터미널 화면을 지우십시오" 라고 읽습니다.

그림입니다. 원본 그림의 이름: mem00000a480024.png 원본 그림의 크기: 가로 516pixel, 세로 98pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:48


실용적인 용도가 많은 강력한 기술입니다. 간단한 게임을 위한 프로토타입 코드를 작성하는 데 사용합시다.



가위 바위 보 실습 프로그래밍 예제

"가위, 바위, 보" 의 2 인용 게임에서 누가 우승자인지 표시하는 프로그램을 작성하십시오. 가위 바위 보의 규칙은 간단합니다.


* 가위는 보를 자른다. (가위 승리)

* 보는 바위를 감싼다. (보 승리)

* 바위는 가위를 이긴다. (바위 승리)


플레이어는 터미널에 다음 문자 중 하나를 입력하여 선택을 합니다. r = 바위(rock) p = 보(paper), s = 가위(scissors)


이 프로그램은 터미널 수신 번호 블록을 사용하여 입력 문자를 수집하고 드롭다운 옵션을 ASCII 문자로 설정하여 각 플레이어의 다른 변수에 저장합니다. 다음은 1 번 선수의 예입니다.

그림입니다. 원본 그림의 이름: mem00000a480025.png 원본 그림의 크기: 가로 421pixel, 세로 89pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:50


그런 다음 각 변수와 문자 값 블록을 비교 값 블록에 삽입하여 입력한 문자를 식별할 수 있습니다. 다음은 1 번 선수의 예입니다.

그림입니다. 원본 그림의 이름: mem00000a480026.png 원본 그림의 크기: 가로 334pixel, 세로 56pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:52


각 플레이어의 입력의 비교 값 블록은 부울 비교 블록으로 들어갑니다. :

그림입니다. 원본 그림의 이름: mem00000a480027.png 원본 그림의 크기: 가로 757pixel, 세로 61pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:54


게임의 가능한 다른 결과에 대해 이와 같은 블록 구조를 구축하면 어떤 플레이어가 경기에서 승리했는지를 결정할 수 있습니다.


위의 여러 블록을 만드는 것은 많은 작업처럼 보일 수 있습니다. 그러나 각 블록은 유사하므로 완성된 부울 비교 블록을 복사한 다음 다른 가능한 조합의 값을 변경할 수 있습니다. 이렇게 하려면 전체 블록의 가장 자리를 마우스 오른쪽 버튼으로 클릭하여 드롭다운 메뉴를 봅니다. 전체 블록을 복제하는데 주의하십시오.

그림입니다. 원본 그림의 이름: mem00000a480028.png 원본 그림의 크기: 가로 753pixel, 세로 211pixel 사진 찍은 날짜: 2016년 10월 25일 오후 9:55

 


시도해 보세요!

게임을 만들 준비가 되었습니까?


- Player1과 Player2라는 두 개의 변수를 만듭니다.

- Player1과 Player2에 저장할 ASCII 코드값을 받아들이도록 설정된 두 개의 터미널 수신 번호 블록을 만듭니다.

- 두 개의 비교 값 블록을 만듭니다. 하나는 Player1에 대한 것이고 다른 하나는 Player2에 대한 것입니다. 각 변수를 ASCII 코드 문자 r, p 또는 s와 비교하여 플레이어 변수와 동일하게 설정하십시오.

- 두 비교 값 블록을 부울 비교 블록에 삽입하십시오.

- 채워진 부울 비교 블록을 두 개 더 만듭니다.


가위, 바위, 보 게임에 대한 가능한 결과 테이블은 아래와 같습니다. 귀하의 코드는 모든 가능한 결과를 테스트하지 않아도 됩니다.


그림입니다. 원본 그림의 이름: mem00000a480029.png 원본 그림의 크기: 가로 311pixel, 세로 225pixel


- 먼저 간단한 비교 값 블록을 사용하여 "플레이어 1이 플레이어 2와 동일합니다."라는 문구가 true인지 확인하여 동일결과를 테스트합니다. 이 프로그램은 플레이어가 선택한 글자가 무엇인지 알 필요조차 없습니다!

- 다음으로, 3 개의 부울 비교 블록을 수정하여 플레이어 2가 승리 할 수 있는 각 방법을 확인하십시오.


동일한 결과가 아니고 2 번 선수가 이기지 못하면 1 번 선수가 승리해야 합니다. 그 이상을 확인할 필요가 없습니다!


- if ... do 블록으로 당신의 비교 값부울 비교 블록을 삽입하고, 각각을 테스트하기 위해 else if 조건을 사용하십시오.

- 프로그램 맨 위에 터미널 인쇄 텍스트(terminal print text) 블록을 인쇄하여 플레이어에게 지침을 제공하십시오 : "플레이어 1 (r, p 또는 s) :"

- 승자 또는 동일한 결과(tie)를 표시하기 위해 터미널 인쇄 텍스트 블록을 빌드하십시오.

- 프로그램을 저장하십시오 !!!


다음은 완전한 프로그램의 예입니다. 당신 것은 약간 다르게 만들었을 수 있습니다. 예상대로 작동하는 한 괜찮습니다. 테스트해 보세요 !


그림입니다. 원본 그림의 이름: mem00000a48002a.png 원본 그림의 크기: 가로 677pixel, 세로 544pixel 사진 찍은 날짜: 2016년 10월 25일 오후 7:39


- RAM로드를 클릭하고 프로그램이 로드될 때까지 기다렸다가 터미널이 열리기를 기다립니다.

- 프로그램에서 플레이어 1의 선택을 요구하면 터미널을 클릭하고 "p", "r"또는 "s"를 입력하십시오. 엔터 입력을 누르지 마십시오 (문자를 받기 위해 터미널 수신 번호 블록을 설정할 때 불필요 함).

- 플레이어 2의 선택을 입력하십시오.


프로펠러는 가위, 바위, 보 실행 결과를 터미널에 표시합니다.



당신 차례 !

- 프로펠러 마이크로 컨트롤러와 당신이 가위, 바위, 보 게임을 하는 1인용 게임을 random 블록을 사용해서 만들어 보세요! 프로펠러가 1인용 게임에서 가위, 바위, 보 어느 것을 선택하는지 프린트해서 확인하십시오. 힌트 : 프로펠러가 ASCII 113 (q)을 선택하면 응답할 수 있는 창의적인 방법을 찾아야 합니다.

- 다음 레슨 (Blocks that Repeat)을 끝내고 다시 게임을 할 것인지 묻는 무한 루프 안에 게임 전체를 넣고 게임을 다시 시작하기 위해 y 로 답장합니다. 힌트 : 다른 글자를 선택한 경우 게임을 종료하려면 브레이크 블록 사용을 고려하십시오.

7) 블록 반복하기


때때로 우리는 프로펠러가 특정 작업을 반복하도록 프로그래밍할 수 있어야 합니다. 이것은 로봇 센서 주행처럼 더 복잡한 작업과 조명을 깜박거리거나 같은 간단한 작업에 모두 유용합니다.


반복 코드 블록을 루프(loop)라고 합니다. 루프는 블록 세트를 영원히 반복하거나, 또는 몇 가지 조건이 참이 되거나 특정 횟수 동안 반복하도록 설정할 수 있습니다.


테스트 코드

새 프로젝트를 열고 그림과 같이 블록을 작성하십시오. 조건부 반복 블록은 CONTROL(제어) 메뉴에서 찾을 수 있습니다.


그림입니다. 원본 그림의 이름: mem00000a48002b.png 원본 그림의 크기: 가로 466pixel, 세로 190pixel 사진 찍은 날짜: 2016년 10월 25일 오후 10:04


- 브로클리프롭(BlocklyProp) 클라이언트가 실행 중이고 보드가 선택되어 있는지 확인하십시오.

- RAM에 로드하십시오.

- 터미널이 열립니다. 몇 초 후에 다음과 같이 보일 것입니다 :

그림입니다. 원본 그림의 이름: mem00000a48002c.png 원본 그림의 크기: 가로 230pixel, 세로 139pixel


위의 프로그램은 "This loop repeats forever" 텍스트를 먼저 인쇄한 다음 커서를 다음 줄로 이동합니다. 그런 다음 프로그램이 루프를 설정합니다. 루프 안에는 "... and ever ..."라는 텍스트를 새로운 라인과 1 초의 일시 중지 시간으로 인쇄하는 블록이 있습니다. 프로그램은 영원히 계속됩니다. 프로그램을 멈추는 유일한 방법은 프로펠러 마이크로 컨트롤러를 리셋하는 것입니다.


멈춤(break)을 시도하십시오!

 

많은 프로그램들이 영원히 돌아가는 루프를 사용해야 하지만 때때로 루프를 벗어나는 것이 도움이 됩니다. 그것이 바로 브레이크 블록이 유용할 때입니다.

그림입니다. 원본 그림의 이름: mem00000a48002d.png 원본 그림의 크기: 가로 72pixel, 세로 39pixel 사진 찍은 날짜: 2016년 10월 25일 오후 10:06


다음 예제에서는 새 변수를 설정하고 값을 0으로 지정합니다. 루프 내부에서 VALUES> NUMBERS 메뉴의 de / increment 블록을 사용하여 변수에 1을 더 합니다. increment 블록으로 설정하는 것은 "변수에 1을 추가 할 수 있습니다."를 선택하는 훌륭한 수단입니다. 그런 다음 if ... do 블록을 사용하여 변수가 5보다 큰지 여부를 확인한 다음 루프에서 빠져 나옵니다.


다음과 같이 프로그램을 수정하십시오.

그림입니다. 원본 그림의 이름: mem00000a48002e.png 원본 그림의 크기: 가로 464pixel, 세로 351pixel 사진 찍은 날짜: 2016년 10월 25일 오후 10:24


- 브로클리프롭(BlocklyProp) 클라이언트가 실행 중이고 보드가 선택되어 있는지 확인하십시오.

- RAM에 로드하십시오.

- 터미널이 열립니다. 몇 초 후에 다음과 같이 보일 것입니다 :

그림입니다. 원본 그림의 이름: mem00000a48002f.png 원본 그림의 크기: 가로 188pixel, 세로 108pixel


조건부 반복을 시도하십시오!


조건 반복 블록은 몇 가지 추가 옵션이 있습니다 :

그림입니다. 원본 그림의 이름: mem00000a480030.png 원본 그림의 크기: 가로 207pixel, 세로 131pixel 사진 찍은 날짜: 2016년 10월 25일 오후 10:13


- if ... dobreak 를 사용하는 대신 조건부 반복 블록의 옵션 중 하나를 사용하여 프로그램을 단순화하십시오.

- 터미널 수신 번호 블록을 사용하여 반복할 횟수를 사용자에게 묻습니다.


계산된 루프를 시도하십시오 !

루프가 건너뛰기에 도움이 되는 경우가 있습니다. 모터를 완전히 돌려야한다고 상상해 보십시오. 하지만 10도마다 멈추고 싶다면 반복 항목 블록을 사용하면 됩니다.

그림입니다. 원본 그림의 이름: mem00000a480031.png 원본 그림의 크기: 가로 359pixel, 세로 86pixel 사진 찍은 날짜: 2016년 10월 25일 오후 10:14


이제 건너뛸 수 있는 프로그램을 빌드해 보십시오.


- 새 프로젝트를 열고 그림과 같이 블록을 만듭니다.

그림입니다. 원본 그림의 이름: mem00000a480032.png 원본 그림의 크기: 가로 519pixel, 세로 163pixel 사진 찍은 날짜: 2016년 10월 25일 오후 10:17


- 브로클리프롭(BlocklyProp) 클라이언트가 실행 중이고 보드의 COM 포트가 선택되어 있는지 확인하십시오.

- RAM에 로드하십시오.

- 터미널이 열리며 10단위로 100까지 계산됩니다.


당신 차례 : 카운트 루프


반복 항목 블록을 사용하여 카운트 다운할 수도 있습니다. 블록의 " by "값을 변경하고 끝나는 숫자보다 큰 숫자로 시작하면 반복 항목 블록이 위로가 아니라 카운트다운(감소)됩니다.


- 카운트 다운하도록 프로그램을 수정하십시오.

- 처음 카운트한 후 카운트 다운하는 프로그램을 만들어보십시오.

8) 그래프 데이터 만들기


브로클리프롭(BlocklyProp) 터미널은 프로그램이 실행되는 동안 변수 값을 볼 때 매우 유용합니다. 그러나 때로는 수치만 보는 것이 아니라 변화하는 가치를 그래프로 나타냄으로써 일어나는 일을 이해하는 것이 더 쉽습니다.


브로클리프롭(BlocklyProp)에는 그래프 창에 값을 시각적으로 표시하기 위한 그래프 블록이 있습니다. Communicate 메뉴에서 찾을 수 있습니다. 시도해 봅시다!


그래프의 변수 만들기

이 예제 프로젝트는 카운트된 루프를 통과할 때마다 변수 값이 증가하는 직선을 그립니다.


- 브로클리프롭(BlocklyProp) 계정에서 보드에 대한 새 프로젝트를 만들어 저장하십시오.

- 아래 그림과 같이 프로젝트를 빌드하십시오.

그림입니다. 원본 그림의 이름: mem00000a480033.png 원본 그림의 크기: 가로 445pixel, 세로 232pixel 사진 찍은 날짜: 2017년 06월 20일 오후 1:07


- 그래프 초기화(Graph initialize) 블록에서 X 축을 60 초로 설정하고, Y 축은 자동 스케일로 놓습니다.

- 프로젝트를 저장하고 한 번 실행 버튼을 클릭하십시오.


아래 그래프와 같이 보일 때까지 그래프가 10 초 동안 생성되어야 합니다. 그래프의 수평 x 축은 초 단위의 시간이고 수직 y 축은 값입니다.

그림입니다. 원본 그림의 이름: mem00000a480034.png 원본 그림의 크기: 가로 603pixel, 세로 558pixel 사진 찍은 날짜: 2017년 06월 20일 오후 1:06



어떻게 동작하는가?

첫 번째 블록은 그래프 초기화입니다. X 축 60초의 위와 같은 설정은 1 초 간격으로 수직 그리드 선을 생성합니다. Y 축 오토 스케일 설정은 그래프 크기 자체가 상하 데이터에 맞도록 합니다.


다음은 0으로 덧셈을 초기화하는 세트 변수 블록입니다. add 변수는 우리에게 프로젝트가 그래프를 그릴 수 있는 값을 제공합니다.


코드의 나머지는 10 회 반복하도록 설정된 루프에 있습니다. 그래프 값 블록은 루프 내부 제일 먼저 연결된 것으로 add 변수입니다. 이후 add는 0으로 초기화되고 아직 변경되지 않은 상태이어서, 그래프플롯 라인은 0,0 에서 시작됩니다. 다음으로, 덧셈 연산이 추가된 set 변수 블록은 add 값을 10 만큼 증가시킵니다. 일시 중지 (1000) 블록은 루프가 느려지도록하여 그래프가 초당 약 1 회 업데이트됩니다.


루프를 통과할 때마다 증가분을 10 씩 추가하여 하나의 눈금을 오른쪽으로 올리면서 위쪽으로 기울어진 직선을 만듭니다. 루프가 0에서 계수되기 시작하여 x 축 9에서 멈춥니다. 그리고 같은 이유로 Y 축 90도에서 멈춥니다. Graphing 창의 오른쪽 위 모서리에는 플롯 라인의 색상과 일치하는 작은 상자가 90이라는 값으로 표시됩니다. 이는 루프가 완료될 때 add 값입니다.


당신은 알고 있었습니까?

저장, 새로 고침, 실행! - 프로젝트 코드를 변경할 때마다 저장을 클릭하십시오. 매번 업데이트된 코드를 실행하기 전에 브라우저를 새로 고침해야 합니다. 그렇지 않으면 데이터 레이블 값이 업데이트되지만 그래프에 플롯이 표시되지는 않습니다.


그래프 또는 터미널, 하나를 선택하십시오! - 같은 프로젝트에서 그래프와 터미널 블록을 사용하려고 하지 마십시오. 단지 하나만 있습니다. 당신 코드의 상단에 그래프 초기화 블록이 있고, 터미널 인쇄 텍스트 블록은 맨 하단에 있다면, 그래프 창은 터미널이 열리지 못하도록 방해할 수 있습니다. 그렇지만, 터미널 창에 일부 데이터 값이 표시되는 것을 볼 수 있습니다.


시도해보세요!

첫 번째 변수처럼, subtract 이름의 두 번째 변수 값을 그래프로 나타내봅시다.


- subtract 라는 변수를 만들고 0으로 초기화하십시오.

- 그래프 값 블록에서 기어를 클릭하고 첫 번째 값 아래 다른 값을 끕니다.

- 각 값에 표시할 변수의 이름을 레이블에 추가하고 뺍니다.

- Use variable subtract 블록을 그래프 값 블록에 붙이시오.

- 루프를 통해 매번 빼기 변수의 값을 10 씩 줄이는 subtract 블록을 추가하십시오.


그림입니다. 원본 그림의 이름: mem00000a480035.png 원본 그림의 크기: 가로 481pixel, 세로 321pixel 사진 찍은 날짜: 2017년 06월 20일 오후 0:39


- 귀하의 코드를 저장하십시오!

- 브라우저를 새로 고침하십시오!

- 업데이트된 코드를 실행하십시오. 이제 그래프에는 위쪽 방향 한 개와 아래쪽 방향 한 개의 두 개 흔적이 표시됩니다. 또한 각 변수 이름과 그 값은 오른쪽 위 모서리에 그 플롯과 색상이 일치하는 상자에 있습니다.

그림입니다. 원본 그림의 이름: mem00000a480036.png 원본 그림의 크기: 가로 608pixel, 세로 563pixel 사진 찍은 날짜: 2017년 06월 20일 오후 1:06


당신 차례 !

프로젝트는 동시에 최대 10 개의 값을 그래프로 나타낼 수 있습니다!


- multiply 이라는 세 번째 변수를 추가하고, 1로 초기화한 다음, 루프를 통해 매번 10 씩 곱합니다.

- codem을 저장하고 브라우저를 새로 고친 다음, 업데이트된 프로젝트를 실행하십시오. 이번에 세번째 줄이 그려졌나요?

- 더 많은 변수를 계속 추가하고 원하는 수학 연산으로 반복문을 수정할 때마다 코드를 수정하고 프로젝트에 10 개의 플롯이 표시될 때까지 값을 그래프로 표시하십시오.


이전 페이지로         다음 페이지로