From 6f434a190272e39fe97634e81d83473c538a164c Mon Sep 17 00:00:00 2001 From: Avery Date: Mon, 15 Jul 2019 17:16:38 -0700 Subject: [PATCH 1/5] drag --- docs/drag.md | 243 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 243 insertions(+) create mode 100644 docs/drag.md diff --git a/docs/drag.md b/docs/drag.md new file mode 100644 index 00000000..05a326bc --- /dev/null +++ b/docs/drag.md @@ -0,0 +1,243 @@ +--- +layout: documentation +title: Drag +--- + +Drag is a property that can be applied to points, lines, and curves that allows the user to move these objects in a certain direction by dragging the object with their cursor. Drag may follow many directional patterns, as will be shown below. + +There are three basic components of drag that must be defined for drag to work: +* `directions`: this determines how the cursor appears for dragging. The `x` direction displays horizontal arrows, the `y` direction displays vertical arrows, and the `xy` direction displays arrows going both horizontally and vertically. +* `param`: this describes which parameter will change when the user drags the object. This means that at least one parameter must be defined in the program for drag to act on. +* `expression`: this explains how the parameter will change when the object is dragged by the user in the form of an equation. The equation may be in terms of the following variables: + * `x` and `y` + *`drag.x` and `drag.y`, which describe the position of the mouse as it is dragged. + * `drag.dx` and `drag.dy`, which describe the amount that the `x` and `y` coordinate have changed from their original position as the mouse is dragged. + * `params.param`, where `param` is the parameter being changed by the drag behavior. + +Let us look at an example of a simple drag expression, a point that can be moved up and down while maintaining the same x-coordinate. Notice that the increments by which the y-coordinate changes depend on the `round` value of the parameter `y`. + +First, let's look at a how a univariate function is generated. There are a few key components of the function code: +* `"fn"`: this is the function you want the curve to follow. For example, _x_+2 or 3_y_. +* `"ind"`: this is your independent variable, which can be _x_ or _y_ depending on how your function is defined. In general, _x_ is taken as the default, so if your independent variable is _x_, it does not need to be specified. + +
+ +layout: + OneGraph: + graph: + objects: + - Curve: + univariateFunction: + fn: 1 + 2*(x) + ind: x + label: + text: "'f(x) = 1 + 2x'" + x: 2 + +
+ +Notice that the curve is a line, which we've been able to generate using points, slopes, and intercepts. Here is a comparison of the two methods, with dashed lines and solid curves: + +
+ +layout: + OneGraph: + graph: + objects: + - Line: + yIntercept: 3 + slope: 2 + color: colors.red + lineStyle: dashed + label: + text: y = 3 + 2x + x: 2 + align: right + - Curve: + univariateFunction: + fn: 1 + 2*(x) + ind: x + color: colors.red + label: + text: "'f(x) = 1 + 2x'" + x: 2 + align: left + - Line: + xIntercept: 1 + invSlope: 2 + color: colors.green + lineStyle: dashed + label: + text: x = 1 + 2y + x: 4 + align: right + - Curve: + univariateFunction: + fn: 3 + 2*(y) + ind: y + color: colors.green + label: + text: "'f(y) = 3 + 2y'" + y: 2.5 + align: left + +
+ +Here is a more complicated univariate function, the quadratic function: + +
+ +layout: + OneGraph: + graph: + objects: + - Curve: + univariateFunction: + fn: 1 + (x)^2 + ind: x + color: colors.red + label: + text: "'f(x) = 1 + x^2'" + x: 2 + +
+ +We can also create parametric functions, which are especially useful for displaying circles or trigonometric functions. Parametric functions include: +* `xFunction`: a function in terms of _t_ to show how _x_ changes as the parameter _t_ changes. +* `yFunction`: a function in terms of _t_ to show how _y_ changes as the parameter _t_ changes. +* `min` and `max`: the minimum and maximum values that you want _t_ to take, which may determine the length of the curve generated. + +Here is an example of a quarter circle in the first quadrant (note that the max for _t_ is 1.57, approximately _pi/2_): + +
+ +layout: + OneGraph: + graph: + xAxis: + min: -10 + max: 10 + yAxis: + min: -10 + max: 10 + objects: + + # define a curve parametrically + # using two functions, x(t) and y(t) + # the min and max define the range of t + - Curve: + parametricFunction: + xFunction: 8*cos(t) + yFunction: 8*sin(t) + min: 0 + max: 1.57 + color: colors.blue + + +
+ +You can be very creative with parametric functions, as shown below: + +
+ +layout: + OneGraph: + graph: + xAxis: + min: -10 + max: 10 + yAxis: + min: -10 + max: 10 + objects: + - Curve: + parametricFunction: + xFunction: 0.5*t*cos(t) + yFunction: 0.5*t*sin(t) + min: 0 + max: 20 + color: colors.purple + +
+ +In general, it is often easier and more successful to draw circles, ellipses, and sinusoidal functions using the parametric form. Below is a univariate function for creating a circle. Notice that it does not format well near the x-axis: + +
+ +layout: + OneGraph: + graph: + objects: + - Curve: + univariateFunction: + fn: sqrt(25 - (x)^2) + min: 0 + max: 5 + +
+ +If you do choose to draw a circular or elliptical curve using a univariate function, there are two ways to smooth out the end of the curve: +* Create two functions, one in terms of _x_ and one in terms of _y_ that each handle the area where they are well-defined. +* Change the sample point parameter. + +## Drag behavior + +One practical use of curves is to have a point traveling along a curve. In this case, the `drag` of the point will follow the form of the curve, using a calculation, like this: + +
+ +params: +- {name: x, value: 0, min: -10, max: 10, round: 0.01} +calcs: + m: "(cos(params.x))" +layout: + OneGraph: + graph: + xAxis: { min: -10, max: 10} + yAxis: { min: -10, max: 10} + objects: + - Curve: + univariateFunction: + fn: cos((x)) + - Point: + # plot point at (params.x, calcs.m) + coordinates: + - params.x + - calcs.m + # use drag to just change params.x + drag: + - directions: x + param: x + expression: params.x + drag.dx + +
+ +You can also move an entire curve in the x or y direction. Let's try to change the y-intercept of the quadratic curve shown above: + +
+ +params: +- name: yintercept + value: 1 + min: 0 + max: 5 + round: 0.01 +layout: + OneGraph: + graph: + objects: + - Curve: + univariateFunction: + fn: params.yintercept + (x)^2 + ind: x + color: colors.red + label: + text: "`f(x) = ${params.yintercept.toFixed(2)} + x^2`" + x: 2 + drag: + - directions: y + param: yintercept + expression: params.yintercept + drag.dy + +
+ From c6e330cc5ca68ccdadd4fcb0d88b5022e54a4912 Mon Sep 17 00:00:00 2001 From: Avery Date: Mon, 15 Jul 2019 21:07:37 -0700 Subject: [PATCH 2/5] drag 2 --- .DS_Store | Bin 8196 -> 8196 bytes docs/drag.md | 232 +++++--------------------------------------------- docs/index.md | 1 + 3 files changed, 20 insertions(+), 213 deletions(-) diff --git a/.DS_Store b/.DS_Store index 373540d299798a604a775ba8baec07d88d62d3d1..b1d02cc0069fe3645e118110fc863293d09d5b4c 100644 GIT binary patch delta 42 ycmZp1XmOa}&nUVvU^hRb=w=>)Q%sxHMIJD3YzSoB%r5bbWwW2yPR5N5evAM!pbl#Q delta 146 zcmZp1XmOa}&nU4mU^hRb#AY6WQ%r$845 - -layout: - OneGraph: - graph: - objects: - - Curve: - univariateFunction: - fn: 1 + 2*(x) - ind: x - label: - text: "'f(x) = 1 + 2x'" - x: 2 - - - -Notice that the curve is a line, which we've been able to generate using points, slopes, and intercepts. Here is a comparison of the two methods, with dashed lines and solid curves: - -
- -layout: - OneGraph: - graph: - objects: - - Line: - yIntercept: 3 - slope: 2 - color: colors.red - lineStyle: dashed - label: - text: y = 3 + 2x - x: 2 - align: right - - Curve: - univariateFunction: - fn: 1 + 2*(x) - ind: x - color: colors.red - label: - text: "'f(x) = 1 + 2x'" - x: 2 - align: left - - Line: - xIntercept: 1 - invSlope: 2 - color: colors.green - lineStyle: dashed - label: - text: x = 1 + 2y - x: 4 - align: right - - Curve: - univariateFunction: - fn: 3 + 2*(y) - ind: y - color: colors.green - label: - text: "'f(y) = 3 + 2y'" - y: 2.5 - align: left - -
- -Here is a more complicated univariate function, the quadratic function: - -
- -layout: - OneGraph: - graph: - objects: - - Curve: - univariateFunction: - fn: 1 + (x)^2 - ind: x - color: colors.red - label: - text: "'f(x) = 1 + x^2'" - x: 2 - -
- -We can also create parametric functions, which are especially useful for displaying circles or trigonometric functions. Parametric functions include: -* `xFunction`: a function in terms of _t_ to show how _x_ changes as the parameter _t_ changes. -* `yFunction`: a function in terms of _t_ to show how _y_ changes as the parameter _t_ changes. -* `min` and `max`: the minimum and maximum values that you want _t_ to take, which may determine the length of the curve generated. - -Here is an example of a quarter circle in the first quadrant (note that the max for _t_ is 1.57, approximately _pi/2_): - -
- -layout: - OneGraph: - graph: - xAxis: - min: -10 - max: 10 - yAxis: - min: -10 - max: 10 - objects: - - # define a curve parametrically - # using two functions, x(t) and y(t) - # the min and max define the range of t - - Curve: - parametricFunction: - xFunction: 8*cos(t) - yFunction: 8*sin(t) - min: 0 - max: 1.57 - color: colors.blue - - -
-You can be very creative with parametric functions, as shown below: - -
- -layout: - OneGraph: - graph: - xAxis: - min: -10 - max: 10 - yAxis: - min: -10 - max: 10 - objects: - - Curve: - parametricFunction: - xFunction: 0.5*t*cos(t) - yFunction: 0.5*t*sin(t) - min: 0 - max: 20 - color: colors.purple - -
- -In general, it is often easier and more successful to draw circles, ellipses, and sinusoidal functions using the parametric form. Below is a univariate function for creating a circle. Notice that it does not format well near the x-axis: - -
- -layout: - OneGraph: - graph: - objects: - - Curve: - univariateFunction: - fn: sqrt(25 - (x)^2) - min: 0 - max: 5 - -
- -If you do choose to draw a circular or elliptical curve using a univariate function, there are two ways to smooth out the end of the curve: -* Create two functions, one in terms of _x_ and one in terms of _y_ that each handle the area where they are well-defined. -* Change the sample point parameter. - -## Drag behavior - -One practical use of curves is to have a point traveling along a curve. In this case, the `drag` of the point will follow the form of the curve, using a calculation, like this: - -
- params: -- {name: x, value: 0, min: -10, max: 10, round: 0.01} -calcs: - m: "(cos(params.x))" -layout: - OneGraph: - graph: - xAxis: { min: -10, max: 10} - yAxis: { min: -10, max: 10} - objects: - - Curve: - univariateFunction: - fn: cos((x)) - - Point: - # plot point at (params.x, calcs.m) - coordinates: - - params.x - - calcs.m - # use drag to just change params.x - drag: - - directions: x - param: x - expression: params.x + drag.dx - -
- -You can also move an entire curve in the x or y direction. Let's try to change the y-intercept of the quadratic curve shown above: - -
- -params: -- name: yintercept - value: 1 +- name: y + value: 3 min: 0 - max: 5 - round: 0.01 + max: 10 + round: 0.5 + layout: OneGraph: graph: objects: - - Curve: - univariateFunction: - fn: params.yintercept + (x)^2 - ind: x - color: colors.red - label: - text: "`f(x) = ${params.yintercept.toFixed(2)} + x^2`" - x: 2 - drag: - - directions: y - param: yintercept - expression: params.yintercept + drag.dy + - Point: + coordinates: + - 5 + - params.y + drag: + - directions: y + param: y + expression: drag.y + label: + text: y = params.y + x: 6 + + +
diff --git a/docs/index.md b/docs/index.md index 54fefdac..8522a9e0 100644 --- a/docs/index.md +++ b/docs/index.md @@ -36,3 +36,4 @@ Graph objects: * [point](point.html) * [line](line.html) * [curve](curve.html) +* [drag](drag.html) From 47fb9d721ba9679bbd2fe12b5d888a7ceb1c2b78 Mon Sep 17 00:00:00 2001 From: Avery Date: Mon, 15 Jul 2019 21:40:10 -0700 Subject: [PATCH 3/5] more drag --- docs/drag.md | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/docs/drag.md b/docs/drag.md index ddb1b64e..758f5f4f 100644 --- a/docs/drag.md +++ b/docs/drag.md @@ -42,8 +42,69 @@ layout: text: y = params.y x: 6 + - +Some drag functions are more complicated. For example, see the following drag command for pivoting the slope of a line around the point (4,5). We will use the parameter `m` to represent the slope of the line. The expression for the drag is `(drag.y-5)/(drag.x-4)` because the slope is represented by rise over run. The 'rise' of the line is drag.y, the new position of y, minus its anchor point with a y-coordinate of 5. The same logic applies to the run. As you can see, the point itself does not change position since the line will always go through the point (4,5) because we are changing the slope parameter `m`, not the location of the line. + +
+ +params: +- name: m + value: 1 + min: -10 + max: 10 + round: 0.01 + +layout: + OneGraph: + graph: + objects: + - Line: + color: colors.blue + point: [4,5] + slope: params.m + drag: + - directions: xy + param: m + expression: "(drag.y-5)/(drag.x-4)" + - Point: + coordinates: [4,5] +
+You can attribute multiple drag commands to a single object, such as a point. See how two different drag commands could be applied to our point example from above, now with one in the x-direction: + +
+ +params: +- name: y + value: 3 + min: 0 + max: 10 + round: 0.5 +- name: x + value: 5 + min: 2 + max: 8 + round: 0.1 + +layout: + OneGraph: + graph: + objects: + - Point: + coordinates: + - params.x + - params.y + drag: + - directions: y + param: y + expression: drag.y + - directions: x + param: x + expression: drag.x + label: + text: "(params.x, params.y)" + +
\ No newline at end of file From 82aafd3b647ebe013af9b695013805ee92de9b7c Mon Sep 17 00:00:00 2001 From: Avery Date: Tue, 16 Jul 2019 15:40:36 -0700 Subject: [PATCH 4/5] drag --- .DS_Store | Bin 8196 -> 8196 bytes docs/drag.md | 66 ++++++++++++++++++++++++++++++++++++++++++++--- docs/line.md | 8 +----- src/ts/.DS_Store | Bin 8196 -> 8196 bytes 4 files changed, 63 insertions(+), 11 deletions(-) diff --git a/.DS_Store b/.DS_Store index b1d02cc0069fe3645e118110fc863293d09d5b4c..fb07313c90c77eecf6bf604fa507c02e6f48e364 100644 GIT binary patch delta 43 kcmZp1XmQwJAabdhEz0RJZoT>t<8 delta 25 bcmZp1XmQwJAv&2;&~tO6=yrA}qnQZ+aNY<< diff --git a/docs/drag.md b/docs/drag.md index 758f5f4f..2625e00c 100644 --- a/docs/drag.md +++ b/docs/drag.md @@ -73,7 +73,7 @@ layout: -You can attribute multiple drag commands to a single object, such as a point. See how two different drag commands could be applied to our point example from above, now with one in the x-direction: +You can attribute multiple drag commands to a single object, such as a point. See how two different drag commands could be applied to our point example from above, now with drag ability in the x-direction:
@@ -82,12 +82,12 @@ params: value: 3 min: 0 max: 10 - round: 0.5 + round: 0.01 - name: x value: 5 min: 2 max: 8 - round: 0.1 + round: 0.01 layout: OneGraph: @@ -105,6 +105,64 @@ layout: param: x expression: drag.x label: - text: "(params.x, params.y)" + text: "(params.x.toFixed(2), params.y.toFixed(2))" + +
+ +One might also want to drag in a curved direction, such as along a sinusoidal path. (The sine curve is shown here for reference, but has no influence on the point or its drag path). + +
+ +params: +- {name: x, value: 0, min: -10, max: 10, round: 0.01} +calcs: + m: "(2*(sin(params.x)))" +layout: + OneGraph: + graph: + xAxis: { min: -10, max: 10} + yAxis: { min: -10, max: 10} + objects: + - Curve: + univariateFunction: + fn: (2*sin(x)) + - Point: + coordinates: + - params.x + - calcs.m + drag: + - directions: x + param: x + expression: params.x + drag.dx + +
+ +It is important to note the difference between `drag.x` and `drag.dx` and when each variable should be used. `drag.x` is the placement of the cursor as it drags an object. `drag.dx` is the _difference_ between the original parameter value and the new location of the cursor. So, for example, if a point is at (2,2) and is dragged to (4,2), `drag.x` is 4 and `drag.dx` is 2. This also means that `drag.x` = `params.x + drag.dx` if x is a parameter. + +Notice that we can recreate the above example by substituting `drag.x` for `params.x + drag.dx`: + +
+ +params: +- {name: x, value: 0, min: -10, max: 10, round: 0.01} +calcs: + m: "(2*(sin(params.x)))" +layout: + OneGraph: + graph: + xAxis: { min: -10, max: 10} + yAxis: { min: -10, max: 10} + objects: + - Curve: + univariateFunction: + fn: (2*sin(x)) + - Point: + coordinates: + - params.x + - calcs.m + drag: + - directions: x + param: x + expression: drag.x
\ No newline at end of file diff --git a/docs/line.md b/docs/line.md index bdf37298..fb90e31c 100644 --- a/docs/line.md +++ b/docs/line.md @@ -159,16 +159,10 @@ layout: -Now, let's see how we can make a line interactive, such that it can be dragged in a number of ways. The components of the `drag` command are as follows: -* `directions`: the direction of the dragging may be in the x direction, the y direction, or in both the x and y direction (notated `xy` as below). -* `param`: this is the parameter you will be changing by dragging the line. In the example below, we are changing the intercepts, so `param` is `"intercepts"`. -* `expression`: the expression describes how the `param` will change based on the amount of dragging done. See below for a concrete example. +Now, let's see how we can make a line interactive, such that it can be dragged in a number of ways. Look at the `drag` section of the KGJS documentation site for more background on `drag`. First, let's see how to drag a line defined by intercepts. We want to drag the line so that it is always parallel to its starting position; in other words, the x- and y-intercepts will always be equal to each other. -* The direction of dragging can be in the x- or y-direction, so `directions` is `xy`. -* We are given the parameter `intercepts`, and that is what we want to change. So `param` is `intercepts`. -* `expression` is a bit trickier to come up with. Notice that our line is of the equation _y = intercept - x_. We could also write this as _intercept = x + y_. Thus, the change in the intercept is the sum of the change in x and y. We write this as `drag.x + drag.y`, where drag is the amount that the cursor drags the line.
diff --git a/src/ts/.DS_Store b/src/ts/.DS_Store index 977c8dec9558377c098753c4971c8bf91239783d..1a8eecbaa7028724f4a929615de60b440aa4d86c 100644 GIT binary patch delta 21 ccmZp1XmQwJE68DDX`rKEVraVARd7Ea07K&i=l}o! delta 21 ccmZp1XmQwJE68DNY@(xJY-+gKRd7Ea07JF~ Date: Mon, 22 Jul 2019 11:45:39 -0700 Subject: [PATCH 5/5] final drag --- docs/drag.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/drag.md b/docs/drag.md index 2625e00c..9b8b133a 100644 --- a/docs/drag.md +++ b/docs/drag.md @@ -39,8 +39,7 @@ layout: param: y expression: drag.y label: - text: y = params.y - x: 6 + text: "`y = ${params.y}`"
@@ -105,7 +104,7 @@ layout: param: x expression: drag.x label: - text: "(params.x.toFixed(2), params.y.toFixed(2))" + text: "`(${params.x.toFixed(2)}, ${params.y.toFixed(2)})`"