홈 › Index › sketch (type)

sketch (type) (타입 sketch)

원본: Computation Layer 문서(sketch (type))

코드 안의 회색 줄은 원문 영어 주석이고, 파란 줄은 그 영어 주석의 번역이며, 연분홍 줄은 코드가 하는 일의 설명이다. 항목 설명은 번역이 아니라 해석이며 원문은 접어 둔 "원문(영어) 보기"에 있다.

그림판의 데이터를 나타낸다.

원문(영어) 보기

Represents the data for a sketch.

속성(Attributes)

filterByColor type:sketch:filterByColor

스케치에서 주어진 색과 같은 획과 점만 남긴다. 불투명도는 이 걸러 내기에 영향을 주지 않는다.

원문(영어) 보기

Filter a sketch to only the strokes and points that match the given color. Note that opacity does not affect this filtering.

# This code filters out only the purple sketches in
# the sketch component to the left.
▷ 이 코드는 왼쪽 그림판 구성요소에서 보라색 스케치만 걸러 낸다.
Purple = sketch1.sketch.filterByColor(colors.purple)
▶ 변수 Purple은 sketch1.sketch에서 보라색(colors.purple) 획과 점만 남긴 스케치(sketch1.sketch.filterByColor(colors.purple))로 한다.
filterByColor(색)은 스케치에서 주어진 색과 같은 획과 점만 남기고, 불투명도는 이 걸러 내기에 영향을 주지 않는다. sketch는 그림판에 그려진 모든 것을 나타내는 스케치 객체를 가져온다.

# For display purposes, a background layer is created
# using only the purple sketches taken from the sketch
# component.
▷ 보여 주기 위해, 그림판 구성요소에서 가져온 보라색 스케치만으로 배경 레이어를 만든다.
background: sketchLayer(Purple)
▶ 그림판의 배경(background)은 변수 Purple로 만든 스케치 레이어(sketchLayer(Purple))로 한다.
background는 그래프나 그림판의 배경 레이어를 정한다. sketchLayer(…)는 스케치로 레이어를 만든다.

setColor type:sketch:setColor

이 스케치의 모든 획과 점을 주어진 색으로 통일한다.

원문(영어) 보기

flatten all strokes and points in this sketch to the provided color

# This code copies the sketch created in
# the sketch component but changes it's
# color to black.
▷ 이 코드는 그림판 구성요소에서 만든 스케치를 복사하되 색을 검은색으로 바꾼다.
background: sketchLayer(sketch1.sketch.setColor(colors.black))
▶ 그림판의 배경(background)은 sketch1의 스케치를 모두 검은색(colors.black)으로 바꾼 스케치 레이어(sketchLayer(sketch1.sketch.setColor(colors.black)))로 한다.
background는 그래프나 그림판의 배경 레이어를 정한다. setColor는 스케치의 모든 획과 점을 주어진 색으로 바꾸고, sketchLayer(…)는 스케치로 레이어를 만든다.

setOpacity type:sketch:setOpacity

스케치의 모든 획과 점의 불투명도를 주어진 알파 값으로 바꾼다. 0은 투명, 1은 완전 불투명이다. setOpacity 뒤에 setColor를 쓰면 정한 알파 값이 덮어써진다.

원문(영어) 보기

Change opacity of all strokes and points in the sketch to the provided alpha value. 0 is transparent, 1 is full opacity. Note that using `setColor` after `setOpacity` will override the provided alpha value

# This code copies the sketch created in
# the sketch component but changes it's
# opacity to 40%.
▷ 이 코드는 그림판 구성요소에서 만든 스케치를 복사하되 불투명도를 40%로 바꾼다.
background: sketchLayer(sketch1.sketch.setOpacity(0.4))
▶ 그림판의 배경(background)은 sketch1의 스케치의 모든 획과 점의 불투명도를 0.4로 바꾼 스케치 레이어(sketchLayer(sketch1.sketch.setOpacity(0.4)))로 한다.
background는 그래프나 그림판의 배경 레이어를 정한다. setOpacity는 불투명도(0은 투명, 1은 완전 불투명)를 바꾸며, 그 뒤에 setColor를 쓰면 정한 값이 덮어써진다. sketchLayer(…)는 스케치로 레이어를 만든다.

scaleThicknessBy type:sketch:scaleThicknessBy

획의 굵기와 점의 크기를 주어진 양만큼 키우거나 줄이되, 획은 최소 1px, 점은 최소 2px로 한다.

원문(영어) 보기

scale the stroke thickness and point size by the provided amount, to a minimum of 1px for strokes and 2px for points.

# Create a background sketch layer using the student's sketch.
# Scale the thickness based on the slider value in this graph
# (it goes from 0 to 2).
▷ 학생의 스케치로 배경 스케치 레이어를 만든다. 이 그래프의 슬라이더 값(0부터 2까지)에 따라 두께를 조절한다.

background: sketchLayer(sketch1.sketch.scaleThicknessBy(this.number(`a`)))
▶ 그래프의 배경(background)은 sketch1의 스케치의 획 굵기와 점 크기를 this.number(`a`)배로 바꾼 스케치 레이어(sketchLayer(sketch1.sketch.scaleThicknessBy(this.number(`a`))))로 한다.
background는 그래프나 그림판의 배경 레이어를 정한다. scaleThicknessBy는 획 굵기와 점 크기를 주어진 양만큼 키우거나 줄이되 획은 최소 1px, 점은 최소 2px로 한다. this.number(…)는 이 그래프의 변수 a의 값이고, 변수 이름을 백틱으로 감싸 적었다. sketchLayer(…)는 스케치로 레이어를 만든다.

pointCount type:sketch:pointCount

스케치를 받아 점의 수를 숫자로 돌려준다.

원문(영어) 보기

Takes a sketch and returns the number of points as a number.

# Sets the screen's subtitle to display the number of points
# plotted in the sketch component.
▷ 화면의 부제목에 그림판 구성요소에 찍은 점의 수를 표시한다.
subtitle: "You have plotted `${sketch1.sketch.pointCount}` points."
▶ 화면 제목 아래에 표시할 부제목(subtitle)은 "You have plotted `${sketch1.sketch.pointCount}` points."(점을 ○개 찍었다.)로 한다.
pointCount는 스케치를 받아 점의 수를 숫자로 돌려주고, subtitle은 화면 제목 아래 가운데에 부제목을 붙인다. ${ }는 글자 안에 변수의 값을 끼워 넣는 표기이다.

textCount type:sketch:textCount

스케치를 받아 글자 항목의 수를 숫자로 돌려준다.

원문(영어) 보기

Takes a sketch and returns the number of text items as a number.

# This counts how many text or math input boxes
# someone creates in the sketch component.
▷ 그림판 구성요소에서 누군가 만든 글 상자나 수식 상자의 수를 센다.

number = sampleSketch.sketch.textCount
▶ 변수 number는 sampleSketch.sketch.textCount, 즉 스케치에 있는 글자 항목(글 상자나 수식 상자)의 수로 한다.
textCount는 스케치를 받아 글자 항목(글 상자나 수식 상자)의 수를 숫자로 돌려준다.

strokeCount type:sketch:strokeCount

스케치를 받아 획의 수를 숫자로 돌려준다.

원문(영어) 보기

Takes a sketch and returns the number of strokes as a number.

# Merges the current sketch and the existing sketch into
# a single sketch layer.
▷ 현재 스케치와 기존 스케치를 하나의 스케치 레이어로 합친다.
totalSketch = mergeSketches(this.sketch,this.currentStroke)
▶ 변수 totalSketch는 지금까지의 스케치(this.sketch)와 그리는 중인 획(this.currentStroke)을 합친 스케치(mergeSketches(this.sketch,this.currentStroke))로 한다.
mergeSketches(…)는 다른 스케치들로 하나의 스케치를 만든다.

# Resets the sketch when the total number of strokes is
# greater than one.
▷ 전체 획 수가 1보다 크면 스케치를 재설정한다.
resetOnChange: when totalSketch.strokeCount < 2 "0" otherwise "1"
▶ 그림판의 변경 시 자동 재설정(resetOnChange)은 totalSketch.strokeCount가 2보다 작으면 "0", 아니면 "1"로 한다.
resetOnChange는 글자 값을 받아 그 값이 바뀌면 구성요소를 재설정한다. strokeCount는 스케치를 받아 획의 수를 숫자로 돌려주고, when은 조건을 차례로 확인해 처음 맞는 값을 쓴다.

totalStrokeLength type:sketch:totalStrokeLength

스케치를 받아 모든 획의 길이를 합친 숫자를 돌려준다.

원문(영어) 보기

Takes a sketch and returns a number the aggregate length of all strokes as a number.

# Create a subtitle that displays the total length of all
# of the strokes in the sketch.
▷ 스케치의 모든 획의 전체 길이를 표시하는 부제목을 만든다.
subtitle: "Total length: `${sketch1.sketch.totalStrokeLength}`"
▶ 화면 제목 아래에 표시할 부제목(subtitle)은 "Total length: `${sketch1.sketch.totalStrokeLength}`"("전체 길이: " 뒤에 스케치의 모든 획의 길이를 합친 값)로 한다.
totalStrokeLength는 스케치를 받아 모든 획의 길이를 합친 숫자를 돌려주고, subtitle은 화면 제목 아래 가운데에 부제목을 붙인다. ${ }는 글자 안에 변수의 값을 끼워 넣는 표기이다.

yValuesAt type:sketch:yValuesAt

스케치가 주어진 x 위치에서 지나가는 모든 y 값을 숫자배열(numberList)로 돌려준다.

원문(영어) 보기

Returns a numberList of all y-values that the sketch passes through at a given x value

# Create number lists for the y values of the
# sketch at x= -8, -4, 0, 4, and 8.
▷ 스케치가 x = -8, -4, 0, 4, 8에서 지나가는 y 값들의 숫자배열을 만든다.
numberList("Y_{n8}"): this.sketch.yValuesAt(-8)
▶ 그래프의 숫자배열 Y_{n8}은 this.sketch.yValuesAt(-8), 즉 스케치가 x = -8에서 지나가는 모든 y 값의 숫자배열로 한다.
numberList("이름")은 그래핑 계산기의 변수를 주어진 숫자배열의 내용으로 정한다. yValuesAt(x)는 스케치가 주어진 x 위치에서 지나가는 모든 y 값을 숫자배열로 돌려준다.
numberList("Y_{n4}"): this.sketch.yValuesAt(-4)
▶ 그래프의 숫자배열 Y_{n4}은 this.sketch.yValuesAt(-4), 즉 x = -4에서 스케치가 지나가는 y 값들의 숫자배열로 한다.
numberList("Y_{0}" ): this.sketch.yValuesAt(0)
▶ 그래프의 숫자배열 Y_{0}은 this.sketch.yValuesAt(0), 즉 x = 0에서 스케치가 지나가는 y 값들의 숫자배열로 한다.
numberList("Y_{4}" ): this.sketch.yValuesAt(4)
▶ 그래프의 숫자배열 Y_{4}은 this.sketch.yValuesAt(4), 즉 x = 4에서 스케치가 지나가는 y 값들의 숫자배열로 한다.
numberList("Y_{8}" ): this.sketch.yValuesAt(8)
▶ 그래프의 숫자배열 Y_{8}은 this.sketch.yValuesAt(8), 즉 x = 8에서 스케치가 지나가는 y 값들의 숫자배열로 한다.

xValuesAt type:sketch:xValuesAt

스케치가 주어진 y 위치에서 지나가는 모든 x 값을 숫자배열로 돌려준다.

원문(영어) 보기

Returns a numberList of all x-values that the sketch passes through at a given y value

# Create number lists for the x values of the
# sketch at y= -8, -4, 0, 4, and 8.
▷ 스케치가 y = -8, -4, 0, 4, 8에서 지나가는 x 값들의 숫자배열을 만든다.
numberList("X_{n8}"): this.sketch.xValuesAt(-8)
▶ 그래프의 숫자배열 X_{n8}은 this.sketch.xValuesAt(-8), 즉 스케치가 y = -8에서 지나가는 모든 x 값의 숫자배열로 한다.
numberList("이름")은 그래핑 계산기의 변수를 주어진 숫자배열의 내용으로 정한다. xValuesAt(y)는 스케치가 주어진 y 위치에서 지나가는 모든 x 값을 숫자배열로 돌려준다.
numberList("X_{n4}"): this.sketch.xValuesAt(-4)
▶ 그래프의 숫자배열 X_{n4}은 this.sketch.xValuesAt(-4), 즉 y = -4에서 스케치가 지나가는 x 값들의 숫자배열로 한다.
numberList("X_{0}" ): this.sketch.xValuesAt(0)
▶ 그래프의 숫자배열 X_{0}은 this.sketch.xValuesAt(0), 즉 y = 0에서 스케치가 지나가는 x 값들의 숫자배열로 한다.
numberList("X_{4}" ): this.sketch.xValuesAt(4)
▶ 그래프의 숫자배열 X_{4}은 this.sketch.xValuesAt(4), 즉 y = 4에서 스케치가 지나가는 x 값들의 숫자배열로 한다.
numberList("X_{8}" ): this.sketch.xValuesAt(8)
▶ 그래프의 숫자배열 X_{8}은 this.sketch.xValuesAt(8), 즉 y = 8에서 스케치가 지나가는 x 값들의 숫자배열로 한다.

pointXValues type:sketch:pointXValues

스케치에 찍은 점들의 x좌표를 숫자배열로 돌려준다.

원문(영어) 보기

Returns the x coordinates of points in the sketch as a list

# Create two number lists X and Y, that track the
# x and y locations, respectively of all the points
# plotted in this component.
▷ 이 구성요소에 찍은 모든 점의 x 위치와 y 위치를 각각 따라가는 숫자배열 X와 Y를 만든다.
numberList("X"): this.sketch.pointXValues
▶ 그래프의 숫자배열 X는 this.sketch.pointXValues, 즉 스케치에 찍은 점들의 x좌표 숫자배열로 한다.
numberList("이름")은 그래핑 계산기의 변수를 주어진 숫자배열의 내용으로 정한다. pointXValues는 스케치에 찍은 점들의 x좌표를 숫자배열로 돌려준다.
numberList("Y"): this.sketch.pointYValues
▶ 그래프의 숫자배열 Y는 this.sketch.pointYValues, 즉 스케치에 찍은 점들의 y좌표 숫자배열로 한다.
pointYValues는 스케치에 찍은 점들의 y좌표를 숫자배열로 돌려준다.

pointYValues type:sketch:pointYValues

스케치에 찍은 점들의 y좌표를 숫자배열로 돌려준다.

원문(영어) 보기

Returns the y coordinates of points in the sketch as a list

# Create two number lists X and Y, that track the
# x and y locations, respectively of all the points
# plotted in this component.
▷ 이 구성요소에 찍은 모든 점의 x 위치와 y 위치를 각각 따라가는 숫자배열 X와 Y를 만든다.
numberList("X"): this.sketch.pointXValues
▶ 그래프의 숫자배열 X는 this.sketch.pointXValues, 즉 스케치에 찍은 점들의 x좌표 숫자배열로 한다.
numberList("이름")은 그래핑 계산기의 변수를 주어진 숫자배열의 내용으로 정한다. pointXValues는 스케치에 찍은 점들의 x좌표를 숫자배열로 돌려준다.
numberList("Y"): this.sketch.pointYValues
▶ 그래프의 숫자배열 Y는 this.sketch.pointYValues, 즉 스케치에 찍은 점들의 y좌표 숫자배열로 한다.
pointYValues는 스케치에 찍은 점들의 y좌표를 숫자배열로 돌려준다.

transform type:sketch:transform

함수들을 지정해 스케치에 임의의 변환을 적용한다.

원문(영어) 보기

Apply an arbitrary transformation to a sketch, by specifying functions

# Combine the current sketch and the existing sketch
# strokes into a single layer that can be transformed.
▷ 현재 스케치와 기존 스케치의 획을 하나의 레이어로 합쳐 변환할 수 있게 한다.
totalSketch = mergeSketches(this.currentStroke, this.sketch)
▶ 변수 totalSketch는 그리는 중인 획(this.currentStroke)과 지금까지의 스케치(this.sketch)를 하나로 합친 스케치(mergeSketches(this.currentStroke, this.sketch))로 한다.
mergeSketches(…)는 다른 스케치들로 하나의 스케치를 만든다.

# Use simpleFunction to create simpleFunctions to transform
# x and y, respectively
▷ simpleFunction으로 x와 y를 각각 변환하는 simpleFunction을 만든다.

xTransform = simpleFunction("1.5x","x","y")
▶ 변수 xTransform은 "1.5x"를 입력 변수 "x", "y"에 대한 함수로 만든 값(simpleFunction("1.5x","x","y"))으로 한다.
simpleFunction(…)은 latex 글자를 받아 함수를 돌려주고, 첫 인자는 latex 글자, 나머지 인자는 입력 변수 이름이다. x값을 1.5배 하는 함수이다.
yTransform = simpleFunction("1.5y","x","y")
▶ 변수 yTransform은 "1.5y"를 입력 변수 "x", "y"에 대한 함수로 만든 값(simpleFunction("1.5y","x","y"))으로 한다.
y값을 1.5배 하는 함수이다.

# Put everything together and display the transformed function as a background
# Create a sketchLayer by transforming totalSketch using xTransform and yTransform.
▷ 모두 합쳐 변환된 함수를 배경으로 표시한다. xTransform과 yTransform으로 totalSketch를 변환해 sketchLayer를 만든다.

background: sketchLayer(totalSketch.transform(xTransform,yTransform))
▶ 그림판의 배경(background)은 totalSketch를 xTransform, yTransform으로 변환한 스케치 레이어(sketchLayer(totalSketch.transform(xTransform,yTransform)))로 한다.
background는 그래프나 그림판의 배경 레이어를 정한다. .transform(…)은 함수들을 지정해 스케치에 임의의 변환을 적용하고, sketchLayer(…)는 스케치로 레이어를 만든다.