Your first result

이 페이지를 끝까지 따라가면 화면에 매끈한 사인 곡선이 그려져 있을 겁니다. 그동안 코드는 한 글자도 직접 적지 않습니다.

Create a new project

대시보드에서 새 파일을 누르세요. 워크스페이스가 열리고, 그 가운데에 있는 캔버스가 바로 블록을 끼울 자리입니다. 캔버스에는 작은 시작 프로그램이 이미 들어 있는데, 지금은 무시해도 됩니다. 곧 우리가 새로 만들 것이 그 자리에 들어갑니다.

What you'll make

화면 오른쪽 아래에 사인 곡선이 한 줄 매끈하게 그려져 있는 모습이 목표입니다. 가로축은 0부터 2π까지, 세로축은 -1부터 1까지 이어집니다.

Steps

1. 캔버스의 시작 프로그램에서 main 안의 모든 블록을 지우세요. 각 블록을 끌어 휴지통(캔버스 오른쪽 아래)에 떨어뜨리면 됩니다.

2. 왼쪽 툴박스에서 변수 카테고리를 여세요. 실수 값에 이름 붙이기 블록을 꺼내 main 안에 놓고, 이름을 n, 값을 200으로 두세요. 가로축을 200개의 점으로 쪼개겠다는 뜻입니다.

3. 같은 카테고리에서 실수 배열 만들기 블록을 꺼내 두 번 놓으세요. 하나는 이름 x, 길이 n. 다른 하나는 이름 y, 길이 n.

4. 흐름 카테고리의 여러 번 반복 블록을 꺼내 main 끝에 놓으세요. 횟수는 n. 반복 변수 이름은 i.

5. 반복 블록 안에 두 줄을 넣으세요:

   • x[i] = i * (2 * π / n)
   • y[i] = sin(x[i]) 원주율 π는 유틸 카테고리의 수학 상수 블록에서 고를 수 있습니다. sin은 실수 카테고리 아래쪽에 있습니다.

6. 반복이 끝난 뒤(반복 블록 아래) 디버그 카테고리의 그래프로 보내기 블록을 놓으세요. 입력은 배열 y.

7. 오른쪽 위 Run 을 누르세요.

오른쪽 결과 패널에 사인 곡선이 그려집니다.

What just happened

블록을 짜는 동안 캔버스 안에서는 그 블록들이 곧바로 WebAssembly라는 빠른 코드로 변환되고 있었습니다. Run을 누르는 순간 그 코드가 브라우저의 백그라운드에서 실행되고, 그 결과 배열을 그래프 패널이 받아 그려 냅니다. 컴파일은 보통 1초 이내로 끝나고, 실행은 그보다 더 짧습니다.

생성된 코드를 보고 싶다면 캔버스 위쪽 탭에서 WAT을 눌러 보세요. 사람이 읽을 수 있는 텍스트 형태로 코드가 보이는데, 지금은 무시해도 됩니다.

Next

만들어 보기로 이동해 다음에 만들고 싶은 것을 골라 보세요. 각 페이지는 그 안에서 결과까지 스스로 완결되므로, 순서에 상관없이 들어가도 됩니다.