화면 1. Sketch.number [source]

# This subtitle will display the slope of the line, 
# calculated in the sketch component as the number "M".
▷ 이 부제목은 그림판 구성요소에서 숫자 "M"으로 계산한 직선의 기울기를 표시한다.

# As long as the line is at least 1.5 long, display the slope.
# If the slope is undefined, say so.
# Otherwise, give instructions to sketch a line.
▷ 직선의 길이가 1.5 이상이면 기울기를 표시한다. 기울기가 정의되지 않으면 그렇다고 알린다. 그 밖에는 직선을 그리라는 안내를 보여 준다.
subtitle: 
  when sketch1.sketch.totalStrokeLength > 1.5 and sketch1.number("v_{ertical}") = 1 "Your line is vertical."
▶ 화면 제목 아래에 표시할 부제목(subtitle)은 sketch1.sketch.totalStrokeLength가 1.5보다 크고 sketch1.number("v_{ertical}")이 1이면 "Your line is vertical."(직선이 수직이다.)로 한다.
sketch는 그림판에 그려진 모든 것을 나타내는 스케치 객체를 가져오고, totalStrokeLength는 스케치를 받아 모든 획의 길이를 합친 숫자를 알려 준다. number("이름")은 그래프 배경이 있는 그림판에서 그래프 변수의 숫자 값을 가져오고, and는 둘 다 참이어야 참이다. 코드 주석에 따르면 기울기가 정의되지 않은 경우를 알리는 줄이다.
  when sketch1.sketch.totalStrokeLength > 1.5 "Your line has a slope of ${sketch1.number("M")}"
▶ 부제목(subtitle)의 두 번째 경우는 sketch1.sketch.totalStrokeLength가 1.5보다 크면 "Your line has a slope of ${sketch1.number("M")}"(직선의 기울기는 …이다)로 한다.
${ }는 글자 안에 변수의 값을 끼워 넣는 표기이다.
  when sketch1.sketch.totalStrokeLength > 0 "Sketch a longer line."
▶ 부제목(subtitle)의 세 번째 경우는 sketch1.sketch.totalStrokeLength가 0보다 크면 "Sketch a longer line."(더 긴 직선을 그리시오.)으로 한다.
  otherwise "Sketch a line."
▶ 부제목(subtitle)의 나머지 경우는 "Sketch a line."(직선을 그리시오.)으로 한다.
세 조건에 모두 해당하지 않을 때의 값이다. subtitle은 화면 제목 아래 가운데에 부제목을 붙이고, when은 위에서부터 차례로 조건을 확인해 처음 맞는 값을 쓴다.
  

# This code sets the initial tool selected to be the line tool.
▷ 이 코드는 처음에 선택되어 있는 도구를 직선 도구로 정한다.
initialTool: sketchTools.line
▶ 그림판의 처음 도구(initialTool)는 직선 도구인 sketchTools.line으로 한다.
initialTool은 처음 선택되어 있는 도구를 정하고, sketchTools는 그림판 도구 모음의 도구들을 담고 있으며 sketchTools.line은 직선 도구이다.

# This code resets the sketch once a second line is drawn.
▷ 이 코드는 두 번째 직선을 그리면 그림판을 재설정한다.
resetOnChange: when mergeSketches(this.sketch,this.currentStroke).strokeCount > 1 "1" otherwise "0"
▶ 그림판의 변경 시 자동 재설정(resetOnChange)은 mergeSketches(this.sketch,this.currentStroke).strokeCount > 1이면 "1", 아니면 "0"으로 한다.
resetOnChange는 글자 값을 받아 그 값이 바뀌면 구성요소를 재설정하고, mergeSketches(…)는 다른 스케치들로 하나의 스케치를 만든다. sketch는 그림판에 그려진 모든 것을 나타내는 스케치 객체를 가져오고, currentStroke는 지금 그리는 중인 획을 나타내는 스케치 객체를 가져오며, strokeCount는 스케치를 받아 획의 수를 숫자로 알려 준다. 지금까지의 스케치와 그리는 중인 획을 합친 획 수가 1보다 커지면 값이 "0"에서 "1"로 바뀌어 그림판이 재설정된다. when은 조건을 차례로 확인해 처음 맞는 값을 쓴다.

# These lines of code collect the y values the sketch passes through
# for the integers between -9 and 9, inclusive.
▷ 이 코드들은 스케치가 -9부터 9까지 정수 위치에서 지나가는 y 값들을 모은다(양 끝 포함).
number("Y_{n9}"): firstDefinedValue(max(this.sketch.yValuesAt(-9)),-15)
▶ 그래프 배경의 변수 Y_{n9}은 스케치가 x = -9에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
yValuesAt(x)는 스케치가 주어진 x 위치에서 지나가는 모든 y 값을 숫자배열(numberList)로 알려 주고, max(…)는 숫자배열을 받아 가장 큰 값을 숫자로 알려 준다. firstDefinedValue(…)는 같은 종류의 인자를 여러 개 받아 처음으로 정의된(유효한) 값을 알려 준다. number("이름")은 그래프 배경이 있는 그림판에서 그래핑 계산기 안의 변수 값을 정하고, this는 이 구성요소이다. 같은 형태의 줄이 위치만 바꾸어 이어진다.
number("Y_{n8}"): firstDefinedValue(max(this.sketch.yValuesAt(-8)),-15)
▶ 그래프 배경의 변수 Y_{n8}은 스케치가 x = -8에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{n7}"): firstDefinedValue(max(this.sketch.yValuesAt(-7)),-15)
▶ 그래프 배경의 변수 Y_{n7}은 스케치가 x = -7에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{n6}"): firstDefinedValue(max(this.sketch.yValuesAt(-6)),-15)
▶ 그래프 배경의 변수 Y_{n6}은 스케치가 x = -6에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{n5}"): firstDefinedValue(max(this.sketch.yValuesAt(-5)),-15)
▶ 그래프 배경의 변수 Y_{n5}은 스케치가 x = -5에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{n4}"): firstDefinedValue(max(this.sketch.yValuesAt(-4)),-15)
▶ 그래프 배경의 변수 Y_{n4}은 스케치가 x = -4에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{n3}"): firstDefinedValue(max(this.sketch.yValuesAt(-3)),-15)
▶ 그래프 배경의 변수 Y_{n3}은 스케치가 x = -3에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{n2}"): firstDefinedValue(max(this.sketch.yValuesAt(-2)),-15)
▶ 그래프 배경의 변수 Y_{n2}은 스케치가 x = -2에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{n1}"): firstDefinedValue(max(this.sketch.yValuesAt(-1)),-15)
▶ 그래프 배경의 변수 Y_{n1}은 스케치가 x = -1에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_0"):    firstDefinedValue(max(this.sketch.yValuesAt( 0)),-15) 
▶ 그래프 배경의 변수 Y_0은 스케치가 x = 0에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{9}"):  firstDefinedValue(max(this.sketch.yValuesAt( 9)),-15)
▶ 그래프 배경의 변수 Y_{9}은 스케치가 x = 9에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{8}"):  firstDefinedValue(max(this.sketch.yValuesAt( 8)),-15)
▶ 그래프 배경의 변수 Y_{8}은 스케치가 x = 8에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{7}"):  firstDefinedValue(max(this.sketch.yValuesAt( 7)),-15)
▶ 그래프 배경의 변수 Y_{7}은 스케치가 x = 7에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{6}"):  firstDefinedValue(max(this.sketch.yValuesAt( 6)),-15)
▶ 그래프 배경의 변수 Y_{6}은 스케치가 x = 6에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{5}"):  firstDefinedValue(max(this.sketch.yValuesAt( 5)),-15)
▶ 그래프 배경의 변수 Y_{5}은 스케치가 x = 5에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{4}"):  firstDefinedValue(max(this.sketch.yValuesAt( 4)),-15)
▶ 그래프 배경의 변수 Y_{4}은 스케치가 x = 4에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{3}"):  firstDefinedValue(max(this.sketch.yValuesAt( 3)),-15)
▶ 그래프 배경의 변수 Y_{3}은 스케치가 x = 3에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{2}"):  firstDefinedValue(max(this.sketch.yValuesAt( 2)),-15)
▶ 그래프 배경의 변수 Y_{2}은 스케치가 x = 2에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("Y_{1}"):  firstDefinedValue(max(this.sketch.yValuesAt( 1)),-15)
▶ 그래프 배경의 변수 Y_{1}은 스케치가 x = 1에서 지나가는 y 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.


# These lines of code collect the x values the sketch passes through
# for the integers between -9 and 9, inclusive.
▷ 이 코드들은 스케치가 -9부터 9까지 정수 위치에서 지나가는 x 값들을 모은다(양 끝 포함).
number("X_{n9}"): firstDefinedValue(max(this.sketch.xValuesAt(-9)),-15)
▶ 그래프 배경의 변수 X_{n9}은 스케치가 y = -9에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
xValuesAt(y)는 스케치가 주어진 y 위치에서 지나가는 모든 x 값을 숫자배열로 알려 주고, max(…)는 숫자배열을 받아 가장 큰 값을 숫자로 알려 준다. firstDefinedValue(…)는 같은 종류의 인자를 여러 개 받아 처음으로 정의된(유효한) 값을 알려 준다. number("이름")은 그래프 배경이 있는 그림판에서 그래핑 계산기 안의 변수 값을 정하고, this는 이 구성요소이다. 같은 형태의 줄이 위치만 바꾸어 이어진다.
number("X_{n8}"): firstDefinedValue(max(this.sketch.xValuesAt(-8)),-15)
▶ 그래프 배경의 변수 X_{n8}은 스케치가 y = -8에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{n7}"): firstDefinedValue(max(this.sketch.xValuesAt(-7)),-15)
▶ 그래프 배경의 변수 X_{n7}은 스케치가 y = -7에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{n6}"): firstDefinedValue(max(this.sketch.xValuesAt(-6)),-15)
▶ 그래프 배경의 변수 X_{n6}은 스케치가 y = -6에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{n5}"): firstDefinedValue(max(this.sketch.xValuesAt(-5)),-15)
▶ 그래프 배경의 변수 X_{n5}은 스케치가 y = -5에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{n4}"): firstDefinedValue(max(this.sketch.xValuesAt(-4)),-15)
▶ 그래프 배경의 변수 X_{n4}은 스케치가 y = -4에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{n3}"): firstDefinedValue(max(this.sketch.xValuesAt(-3)),-15)
▶ 그래프 배경의 변수 X_{n3}은 스케치가 y = -3에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{n2}"): firstDefinedValue(max(this.sketch.xValuesAt(-2)),-15)
▶ 그래프 배경의 변수 X_{n2}은 스케치가 y = -2에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{n1}"): firstDefinedValue(max(this.sketch.xValuesAt(-1)),-15)
▶ 그래프 배경의 변수 X_{n1}은 스케치가 y = -1에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_0"):    firstDefinedValue(max(this.sketch.xValuesAt( 0)),-15) 
▶ 그래프 배경의 변수 X_0은 스케치가 y = 0에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{9}"):  firstDefinedValue(max(this.sketch.xValuesAt( 9)),-15)
▶ 그래프 배경의 변수 X_{9}은 스케치가 y = 9에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{8}"):  firstDefinedValue(max(this.sketch.xValuesAt( 8)),-15)
▶ 그래프 배경의 변수 X_{8}은 스케치가 y = 8에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{7}"):  firstDefinedValue(max(this.sketch.xValuesAt( 7)),-15)
▶ 그래프 배경의 변수 X_{7}은 스케치가 y = 7에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{6}"):  firstDefinedValue(max(this.sketch.xValuesAt( 6)),-15)
▶ 그래프 배경의 변수 X_{6}은 스케치가 y = 6에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{5}"):  firstDefinedValue(max(this.sketch.xValuesAt( 5)),-15)
▶ 그래프 배경의 변수 X_{5}은 스케치가 y = 5에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{4}"):  firstDefinedValue(max(this.sketch.xValuesAt( 4)),-15)
▶ 그래프 배경의 변수 X_{4}은 스케치가 y = 4에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{3}"):  firstDefinedValue(max(this.sketch.xValuesAt( 3)),-15)
▶ 그래프 배경의 변수 X_{3}은 스케치가 y = 3에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{2}"):  firstDefinedValue(max(this.sketch.xValuesAt( 2)),-15)
▶ 그래프 배경의 변수 X_{2}은 스케치가 y = 2에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.
number("X_{1}"):  firstDefinedValue(max(this.sketch.xValuesAt( 1)),-15)
▶ 그래프 배경의 변수 X_{1}은 스케치가 y = 1에서 지나가는 x 값 가운데 가장 큰 값, 그 값이 정의되지 않으면 -15로 한다.