Graphs and Sketches (그래프와 그림판)
원본: Computation Layer 문서(Graphs and Sketches)
Our graphing calculator is the secret engine behind a lot of Computation Layer's power. Sketches can benefit from this power as well, especially if you set the background of the sketch to be a graph.
그래핑 계산기는 Computation Layer의 힘 가운데 많은 부분을 맡는 숨은 엔진이다. 그림판(sketch)도 이 힘의 도움을 받을 수 있고, 특히 그림판의 배경을 그래프로 정하면 그렇다.
Note that these features work best when you're using the graph component rather than the graphing calculator. The former hides the expressions list, while the latter includes it. Using CL with the graphing calculator will give warnings because we can't make guarantees about which variables will exist since a student could delete or duplicatively define named variables.
이 기능들은 그래핑 계산기(graphing calculator)가 아니라 그래프 구성요소(graph component)를 쓸 때 가장 잘 작동한다. 그래프 구성요소는 식 목록을 숨기고 그래핑 계산기는 식 목록을 포함한다. 그래핑 계산기에서 CL을 쓰면 경고가 나온다. 학생이 이름 붙은 변수를 지우거나 중복해서 정의할 수 있어서 어떤 변수가 존재할지 보장할 수 없기 때문이다.
Numbers, NumberLists, and PointLabels
숫자(Numbers), 숫자배열(NumberLists), 점 라벨(PointLabels)
There are three main ways to get data into and out of graphs: numbers, numberLists, and pointLabels. Numbers are a single value, numberLists are a list of values, and pointLabels take a string. In each case, you can only read and write to named values. For example, if you make a point A=(1,n), turn on its label, and then use CL, you can both dynamically place and label the point like this:
그래프에 데이터를 넣고 꺼내는 주요 방법은 세 가지이다. 숫자(number), 숫자배열(numberList), 점 라벨(pointLabel)이다. 숫자는 값 하나이고, 숫자배열은 값의 배열(List)이고, 점 라벨은 글자(string)를 받는다. 어느 경우든 이름이 붙은 값만 읽고 쓸 수 있다. 예를 들어 점 A=(1,n)을 만들고 그 라벨을 켠 뒤 CL을 쓰면 다음과 같이 점을 동적으로 놓고 라벨도 붙일 수 있다:
#position the point number("n"): exp1.numericValue #label the point. Note that I'm using the LaTeX type so that it'll format as math. #if you use "" instead of `` it'll look like plaintext pointLabel("A"): `n = ${exp1.numericValue}`
Note that number and numberList overwrite the value in the graph for the named variable. It's okay to put dummy data in the graph, just know that it'll get replaced when CL runs.
number와 numberList는 그래프에서 그 이름의 변수 값을 덮어쓴다는 점에 주의한다. 그래프에 임시 값을 넣어 두어도 되지만, CL이 실행되면 그 값이 바뀐다.
You can also pass in a numberList to a named variable. For example, the "history" sink on a button returns a numberList. You could leave a trail of every place that a point has been using capture/history in combination with number/numberList. If the graph is named "g1" and the button is named "b1", here's what you'd write in the button's script:
이름 붙은 변수에 숫자배열을 넘길 수도 있다. 예를 들어 버튼의 "history" sink는 숫자배열을 돌려준다. capture/history를 number/numberList와 함께 쓰면 점이 지나간 모든 자리를 남기는 자취를 만들 수 있다. 그래프 이름이 "g1", 버튼 이름이 "b1"이라면 버튼의 스크립트에는 다음과 같이 쓴다:
#capture the current values of the point capture("a"): g1.number(`a`) capture("b"): g1.number(`b`)
And here's what you'd write in the graph's script:
그리고 그래프의 스크립트에는 다음과 같이 쓴다:
#populate the list of prior points from the button history numberList("A"): b1.history("a") numberList("B"): b1.history("b")
Animating Graphs
그래프 애니메이션(Animating Graphs)
Many things in Desmos activities that look like videos are actually just animated graphs. To add a play button on top of a graph, just use the animationDuration sink. That sets how long the animation will play. You can then read off the animationTime sink and inject that straight into the graph. For example:
Desmos 활동에서 동영상처럼 보이는 것 중 상당수는 사실 애니메이션 그래프이다. 그래프 위에 재생 버튼을 붙이려면 animationDuration sink를 쓴다. 이 sink가 애니메이션이 재생되는 시간을 정한다. 그런 다음 animationTime을 읽어 그래프에 바로 넣을 수 있다. 예를 들면 다음과 같다:
#this is a 5 second animation animationDuration:5 #take the animationTime and inject it in number("t_0"): this.animationTime #Add in accessibility tied to the animationTime! narration(1): when this.animationTime > 0 "" otherwise "This graph shows a circle." narration(2): when this.animationTime = 0 "" otherwise "The original circle splits into two circles, labeled \"Stage 1\". To get to the next stage, every circle splits into two more circles." narration(3): when this.animationTime = 0 "" otherwise "The animation shows Stages 1 through 4."
Interpreting Sketches
스케치 해석하기(Interpreting Sketches)
At first glance, it might seem like sketches are similar to free response text and that there isn't anything interesting to extract from them. But sketches are full of rich data that you can connect to other representations.
얼핏 보면 스케치는 자유 답변 글과 비슷해 보이고 뽑아낼 흥미로운 것이 없어 보인다. 하지만 스케치에는 다른 표현과 연결할 수 있는 풍부한 데이터가 가득하다.
For example, you can read off the number of strokes and points. You can also grab every value of a sketch at a given x-value. You can combine all of these features together to make a lightweight version of Function Carnival. Start by making a graph (g1) and sketch (s1).
예를 들어 획의 수와 점의 수를 읽을 수 있다. 주어진 x 값에서 스케치가 가진 모든 값을 가져올 수도 있다. 이 기능들을 모두 합치면 Function Carnival의 가벼운 버전을 만들 수 있다. 먼저 그래프(g1)와 그림판(s1)을 만든다.
Add this script for the graph:
그래프에 다음 스크립트를 추가한다:
animationDuration: 10 number("t"): this.animationTime numberList("L"): s1.sketch.yValuesAt(this.animationTime)
And add this script for the sketch:
그리고 그림판에 다음 스크립트를 추가한다:
#this draws a vertical line in the sketch) number("t"): g1.animationTime #only show the message before you've drawn #by looking at currentStroke, we also hide the message as soon as you start sketching number("v"): when (this.sketch.strokeCount = 0 and this.sketch.pointCount = 0 and this.currentStroke.strokeCount = 0) 1 otherwise 0
Layers and Transformations
레이어와 변환(Layers and Transformations)
You can add layers behind graphs and sketches using the "background" sink. Combine this with transformations that you can do on sketches to build some fun interactives.
"background" sink로 그래프와 그림판 뒤에 레이어를 추가할 수 있다. 이것을 스케치에 할 수 있는 변환과 합치면 재미있는 상호작용을 만들 수 있다.
For example, you could have students sketch something and then animate their sketch offscreen when they press a button:
예를 들어 학생이 무언가를 스케치한 뒤 버튼을 누르면 그 스케치가 화면 밖으로 움직이게 할 수 있다:
isAnimating = btn.timeSincePress > 0 #disallow sketching disableSketch: isAnimating #and hide the sketch (the background will show it instead) hideSketch: isAnimating #transform the sketch: xTransform = simpleFunction("x+${btn.timeSincePress}","x","y") yTransform = simpleFunction("y","x","y") background: sketchLayer(this.sketch.transform(xTransform,yTransform))