info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-02 12:54:23 +02:00
Code Issues Releases Wiki Activity

pointvectors

Browse Source
This commit is contained in:
Pomax
2020-08-13 17:16:46 -07:00
parent 8a939335ca
commit f7ec7fa90a
14 changed files with 242 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
chapters/pointvectors/content.en-GB.md
View File

@@ -73,6 +73,6 @@ treated as a sequence of three (elementary) shear operations. When we combine th
The following two graphics show the tangent and normal along a quadratic and cubic curve, with the direction vector coloured blue, and the normal vector coloured red (the markers are spaced out evenly as *t*-intervals, not spaced equidistant).
<div class="figure">
<Graphic title="Quadratic Bézier tangents and normals" inline={true} setup={this.setupQuadratic} draw={this.draw}/>
<Graphic title="Cubic Bézier tangents and normals" inline={true} setup={this.setupCubic} draw={this.draw}/>
<graphics-element title="Quadratic Bézier tangents and normals" src="./quadratic.js"></graphics-element>
<graphics-element title="Cubic Bézier tangents and normals" src="./cubic.js"></graphics-element>
</div>

67
chapters/pointvectors/cubic.js Normal file
View File

@@ -0,0 +1,67 @@
setup() {
this.curve = Bezier.defaultCubic(this);
setMovable(this.curve.points);
}
draw() {
clear();
const curve = this.curve;
curve.drawSkeleton();
const pts = curve.points;
const f = 15;
for(let i=0; i<=10; i++) {
let t = i/10.0;
let p = curve.get(t);
let d = this.getDerivative(t, pts);
let m = sqrt(d.x*d.x + d.y*d.y);
d = { x: d.x/m, y: d.y/m };
let n = this.getNormal(t, d);
setStroke(`blue`);
line(p.x, p.y, p.x + d.x*f, p.y + d.y*f);
setStroke(`red`);
line(p.x, p.y, p.x + n.x*f, p.y + n.y*f);
setStroke(`purple`);
line(p.x, p.y, p.x - n.x*f, p.y - n.y*f);
setStroke(`black`);
circle(p.x, p.y, 3);
}
curve.drawPoints();
}
getDerivative(t, points) {
let mt = (1 - t), a = mt*mt, b = mt*t, c = t*t, d = [
{
x: 3 * (points[1].x - points[0].x),
y: 3 * (points[1].y - points[0].y)
},
{
x: 3 * (points[2].x - points[1].x),
y: 3 * (points[2].y - points[1].y)
},
{
x: 3 * (points[3].x - points[2].x),
y: 3 * (points[3].y - points[2].y)
}
];
return {
x: a * d[0].x + b * d[1].x + c * d[2].x,
y: a * d[0].y + b * d[1].y + c * d[2].y
};
}
getNormal(t, d) {
const q = sqrt(d.x * d.x + d.y * d.y);
return { x: -d.y / q, y: d.x / q };
}
onMouseMove() {
redraw();
}

63
chapters/pointvectors/quadratic.js Normal file
View File

@@ -0,0 +1,63 @@
setup() {
this.curve = Bezier.defaultQuadratic(this);
setMovable(this.curve.points);
}
draw() {
clear();
const curve = this.curve;
curve.drawSkeleton();
const pts = curve.points;
const f = 15;
for(let i=0; i<=10; i++) {
let t = i/10.0;
let p = curve.get(t);
let d = this.getDerivative(t, pts);
let m = sqrt(d.x*d.x + d.y*d.y);
d = { x: d.x/m, y: d.y/m };
let n = this.getNormal(t, d);
setStroke(`blue`);
line(p.x, p.y, p.x + d.x*f, p.y + d.y*f);
setStroke(`red`);
line(p.x, p.y, p.x + n.x*f, p.y + n.y*f);
setStroke(`purple`);
line(p.x, p.y, p.x - n.x*f, p.y - n.y*f);
setStroke(`black`);
circle(p.x, p.y, 3);
}
curve.drawPoints();
}
getDerivative(t, points) {
let mt = (1 - t), d = [
{
x: 2 * (points[1].x - points[0].x),
y: 2 * (points[1].y - points[0].y)
},
{
x: 2 * (points[2].x - points[1].x),
y: 2 * (points[2].y - points[1].y)
}
];
return {
x: mt * d[0].x + t * d[1].x,
y: mt * d[0].y + t * d[1].y
};
}
getNormal(t, d) {
const q = sqrt(d.x * d.x + d.y * d.y);
return { x: -d.y / q, y: d.x / q };
}
onMouseMove() {
redraw();
}

BIN
images/chapters/pointvectors/05a1ee3b81a4838292814a7097b4cf50.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
images/chapters/pointvectors/3158c82ea512f70ec17d4a1ce2e7c7b2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
images/chapters/reordering/140b23b10b4159b03b2a555db7ddf826.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
images/chapters/reordering/4541eeb2113d81cbc0c0a56122570d48.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

36
index.html
View File

@@ -2586,18 +2586,38 @@ function drawCurve(points[], t):
evenly as <em>t</em>-intervals, not spaced equidistant).
</p>
<div class="figure">
<Graphic
<graphics-element
title="Quadratic Bézier tangents and normals"
inline="{true}"
setup="{this.setupQuadratic}"
draw="{this.draw}"
width="275"
height="275"
src="./chapters/pointvectors/quadratic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\pointvectors\3158c82ea512f70ec17d4a1ce2e7c7b2.png"
loading="lazy"
/>
<Graphic
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<graphics-element
title="Cubic Bézier tangents and normals"
inline="{true}"
setup="{this.setupCubic}"
draw="{this.draw}"
width="275"
height="275"
src="./chapters/pointvectors/cubic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\pointvectors\05a1ee3b81a4838292814a7097b4cf50.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
</div>
</section>
<section id="pointvectors3d">

36
ja-JP/index.html
View File

@@ -2180,18 +2180,38 @@ function drawCurve(points[], t):
evenly as <em>t</em>-intervals, not spaced equidistant).
</p>
<div class="figure">
<Graphic
<graphics-element
title="Quadratic Bézier tangents and normals"
inline="{true}"
setup="{this.setupQuadratic}"
draw="{this.draw}"
width="275"
height="275"
src="./chapters/pointvectors/quadratic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\pointvectors\3158c82ea512f70ec17d4a1ce2e7c7b2.png"
loading="lazy"
/>
<Graphic
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<graphics-element
title="Cubic Bézier tangents and normals"
inline="{true}"
setup="{this.setupCubic}"
draw="{this.draw}"
width="275"
height="275"
src="./chapters/pointvectors/cubic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\pointvectors\05a1ee3b81a4838292814a7097b4cf50.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
</div>
</section>
<section id="pointvectors3d">

2
lib/custom-element/api/base-api.js
View File

@@ -200,7 +200,7 @@ class BaseAPI {
*/
setup() {
// console.log(`setup`);
this.moveable = [];
this.movable = [];
}
/**

12
lib/custom-element/api/graphics-api.js
View File

@@ -72,8 +72,8 @@ class GraphicsAPI extends BaseAPI {
? TOUCH_PRECISION_ZONE
: MOUSE_PRECISION_ZONE;
for (let i = 0, e = this.moveable.length, p, d; i < e; i++) {
p = this.moveable[i];
for (let i = 0, e = this.movable.length, p, d; i < e; i++) {
p = this.movable[i];
d = new Vector(p).dist(this.cursor);
if (d <= cdist) {
this.currentPoint = p;
@@ -88,8 +88,8 @@ class GraphicsAPI extends BaseAPI {
this.currentPoint.x = this.cursor.x;
this.currentPoint.y = this.cursor.y;
} else {
for (let i = 0, e = this.moveable.length, p; i < e; i++) {
p = this.moveable[i];
for (let i = 0, e = this.movable.length, p; i < e; i++) {
p = this.movable[i];
if (new Vector(p).dist(this.cursor) <= 5) {
this.setCursor(this.HAND);
return; // NOTE: this is a return, not a break.
@@ -105,12 +105,12 @@ class GraphicsAPI extends BaseAPI {
}
resetMovable(points) {
this.moveable.splice(0, this.moveable.length);
this.movable.splice(0, this.movable.length);
if (points) this.setMovable(points);
}
setMovable(points) {
points.forEach((p) => this.moveable.push(p));
points.forEach((p) => this.movable.push(p));
}
/**

9
tools/build/markdown/generate-fallback-image.js
View File

@@ -10,7 +10,9 @@ const __root = path.join(__dirname, `..`, `..`, `..`);
/**
* ...docs go here...
*/
async function generateFallbackImage(src, width, height) {
async function generateFallbackImage(localeStrings, src, width, height) {
const locale = localeStrings.getCurrentLocale();
// Get the sketch code
const sourcePath = path.join(__root, src);
let code;
@@ -23,6 +25,9 @@ async function generateFallbackImage(src, width, height) {
// Do we need to even generate a file here?
const hash = createHash(`md5`).update(code).digest(`hex`);
if (locale !== localeStrings.getDefaultLocale()) return hash;
const destPath = path.dirname(path.join(__root, `images`, src));
const filename = path.join(destPath, `${hash}.png`);
if (fs.existsSync(filename)) return hash;
@@ -50,7 +55,7 @@ async function generateFallbackImage(src, width, height) {
fs.ensureDirSync(path.dirname(filename));
fs.writeFileSync(filename, imageData);
console.log(`Generated fallback image for ${src}`);
console.log(`Generated fallback image for ${src} (${locale})`);
return hash;
}

7
tools/build/markdown/preprocess-graphics-element.js
View File

@@ -51,7 +51,12 @@ async function preprocessGraphicsElement(chapter, localeStrings, markdown) {
src = src.replace(`./`, `./chapters/${chapter}/`);
}
let imageHash = await generateFallbackImage(src, width, height); // ← this is super fancy functionality.
let imageHash = await generateFallbackImage(
localeStrings,
src,
width,
height
); // ← this is super fancy functionality.
let imgUrl = path.join(
path.dirname(src.replace(`./`, `./images/`)),
`${imageHash}.png`

36
zh-CN/index.html
View File

@@ -2190,18 +2190,38 @@ function drawCurve(points[], t):
evenly as <em>t</em>-intervals, not spaced equidistant).
</p>
<div class="figure">
<Graphic
<graphics-element
title="Quadratic Bézier tangents and normals"
inline="{true}"
setup="{this.setupQuadratic}"
draw="{this.draw}"
width="275"
height="275"
src="./chapters/pointvectors/quadratic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\pointvectors\3158c82ea512f70ec17d4a1ce2e7c7b2.png"
loading="lazy"
/>
<Graphic
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
<graphics-element
title="Cubic Bézier tangents and normals"
inline="{true}"
setup="{this.setupCubic}"
draw="{this.draw}"
width="275"
height="275"
src="./chapters/pointvectors/cubic.js"
>
<fallback-image>
<img
width="275px"
height="275px"
src="images\chapters\pointvectors\05a1ee3b81a4838292814a7097b4cf50.png"
loading="lazy"
/>
Scripts are disabled. Showing fallback image.
</fallback-image></graphics-element
>
</div>
</section>
<section id="pointvectors3d">