fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-29 05:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Bezier derivative and normal implementation (#679)

Browse Source 
* added ui for derivative impl

* Add derivative computation for bezier-rs library

* integrate devivative ui with library

* Add implementation for the normal function

* Update rustdoc comments

* Rename handles and getters, add tangent function

* Rename variables, address nits

Co-authored-by: Rob Nadal <robnadal44@gmail.com>
Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>
Co-authored-by: ll2zheng <Linda Zheng>
This commit is contained in:
Hannah Li
2022-06-23 17:03:48 -04:00
committed by GitHub
co-authored by Rob Nadal Thomas Cheng ll2zheng
parent 2052c00010
commit a4a174db04
7 changed files with 224 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bezier-rs/docs/interactive-docs/src/App.vue
+68 -16
View File
@@ -13,7 +13,7 @@
<script lang="ts">
import { defineComponent, markRaw } from "vue";
import { drawText, drawPoint, getContextFromCanvas } from "@/utils/drawing";
import { drawText, drawPoint, drawLine, getContextFromCanvas } from "@/utils/drawing";
import { WasmBezierInstance } from "@/utils/types";
import ExamplePane from "@/components/ExamplePane.vue";
@@ -34,6 +34,14 @@ const testBezierLib = async () => {
});
};
const tSliderOptions = {
min: 0,
max: 1,
step: 0.01,
default: 0.5,
variable: "t",
};
export default defineComponent({
name: "App",
components: {
@@ -60,30 +68,19 @@ export default defineComponent({
name: "Compute",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: string): void => {
const point = JSON.parse(bezier.compute(parseFloat(options)));
point.r = 4;
point.selected = false;
drawPoint(getContextFromCanvas(canvas), point, "DarkBlue");
drawPoint(getContextFromCanvas(canvas), point, 4, "Red");
},
template: markRaw(SliderExample),
templateOptions: {
min: 0,
max: 1,
step: 0.01,
default: 0.5,
variable: "t",
},
templateOptions: tSliderOptions,
},
{
id: 4,
name: "Lookup Table",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: string): void => {
const lookupPoints = bezier.compute_lookup_table(Number(options));
lookupPoints.forEach((serPoint, index) => {
lookupPoints.forEach((serialisedPoint, index) => {
if (index !== 0 && index !== lookupPoints.length - 1) {
const point = JSON.parse(serPoint);
point.r = 3;
point.selected = false;
drawPoint(getContextFromCanvas(canvas), point, "DarkBlue");
drawPoint(getContextFromCanvas(canvas), JSON.parse(serialisedPoint), 3, "Red");
}
});
},
@@ -96,6 +93,61 @@ export default defineComponent({
variable: "Steps",
},
},
{
id: 5,
name: "Derivative",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: string): void => {
const t = parseFloat(options);
const context = getContextFromCanvas(canvas);
const intersection = JSON.parse(bezier.compute(t));
const derivative = JSON.parse(bezier.derivative(t));
const curveFactor = bezier.get_points().length - 1;
const tangentStart = {
x: intersection.x - derivative.x / curveFactor,
y: intersection.y - derivative.y / curveFactor,
};
const tangentEnd = {
x: intersection.x + derivative.x / curveFactor,
y: intersection.y + derivative.y / curveFactor,
};
drawLine(context, tangentStart, tangentEnd, "Red");
drawPoint(context, tangentStart, 3, "Red");
drawPoint(context, intersection, 3, "Red");
drawPoint(context, tangentEnd, 3, "Red");
},
template: markRaw(SliderExample),
templateOptions: tSliderOptions,
},
{
id: 6,
name: "Normal",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: string): void => {
const t = parseFloat(options);
const context = getContextFromCanvas(canvas);
const intersection = JSON.parse(bezier.compute(t));
const normal = JSON.parse(bezier.normal(t));
const normalStart = {
x: intersection.x - normal.x * 20,
y: intersection.y - normal.y * 20,
};
const normalEnd = {
x: intersection.x + normal.x * 20,
y: intersection.y + normal.y * 20,
};
drawLine(context, normalStart, normalEnd, "Red");
drawPoint(context, normalStart, 3, "Red");
drawPoint(context, intersection, 3, "Red");
drawPoint(context, normalEnd, 3, "Red");
},
template: markRaw(SliderExample),
templateOptions: tSliderOptions,
},
],
};
},