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

no grid on lerp

Browse Source
This commit is contained in:
Pomax
2020-11-01 14:44:26 -08:00
parent 5f86b86776
commit 3288732350
15 changed files with 1281 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/chapters/control/lerp.js
View File

@@ -33,7 +33,7 @@ setup() {
// and capturing the resulting Shape object that yields. We'll draw // and capturing the resulting Shape object that yields. We'll draw
// those in the draw() function. // those in the draw() function.
this.shapes = this.interpolationFunctions.map(f => plot(f, 0, 1, degree*5) ); this.shapes = this.interpolationFunctions.map(f => plot(f, 0, 1, degree*5) );
noGrid();
setSlider(`.slide-control`, `position`, 0) setSlider(`.slide-control`, `position`, 0)
} }

BIN
docs/images/chapters/control/1b8c5e574dc67bfb0afc3fb0a8727378.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/images/chapters/control/8332e5d34b7344bbee2a2e1f4521ce46.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/images/chapters/control/c26d2655e8741ef7e2eeb4f6554fc7a5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

8
docs/index.html
View File

@@ -38,7 +38,7 @@
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-10-31T03:22:30+00:00" /> <meta property="og:updated_time" content="2020-11-01T22:42:49+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -1008,7 +1008,7 @@ function Bezier(3,t):
<graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3"> <graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/f700cd59e6021b0e06b819105ec931da.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/8332e5d34b7344bbee2a2e1f4521ce46.png" loading="lazy" />
<label>Quadratic interpolations</label> <label>Quadratic interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -1016,7 +1016,7 @@ function Bezier(3,t):
<graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4"> <graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/1b8c5e574dc67bfb0afc3fb0a8727378.png" loading="lazy" />
<label>Cubic interpolations</label> <label>Cubic interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -1024,7 +1024,7 @@ function Bezier(3,t):
<graphics-element title="15th degree interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15"> <graphics-element title="15th degree interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/c26d2655e8741ef7e2eeb4f6554fc7a5.png" loading="lazy" />
<label>15th degree interpolations</label> <label>15th degree interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />

8
docs/ja-JP/index.html
View File

@@ -41,7 +41,7 @@
<meta property="og:locale" content="ja-JP" /> <meta property="og:locale" content="ja-JP" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-10-31T03:22:30+00:00" /> <meta property="og:updated_time" content="2020-11-01T22:42:49+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -974,7 +974,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/f700cd59e6021b0e06b819105ec931da.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/8332e5d34b7344bbee2a2e1f4521ce46.png" loading="lazy" />
<label>2次の補間</label> <label>2次の補間</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -990,7 +990,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/1b8c5e574dc67bfb0afc3fb0a8727378.png" loading="lazy" />
<label>3次の補間</label> <label>3次の補間</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -1006,7 +1006,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/c26d2655e8741ef7e2eeb4f6554fc7a5.png" loading="lazy" />
<label>15次の補間</label> <label>15次の補間</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />

26
docs/js/custom-element/api/graphics-api.js
View File

@@ -12,6 +12,7 @@ const MOUSE_PRECISION_ZONE = 5;
const TOUCH_PRECISION_ZONE = 30; const TOUCH_PRECISION_ZONE = 30;
let CURRENT_HUE = 0; let CURRENT_HUE = 0;
let CURRENT_CURSOR = `pointer`;
/** /**
* Our Graphics API, which is the "public" side of the API. * Our Graphics API, which is the "public" side of the API.
@@ -276,11 +277,34 @@ class GraphicsAPI extends BaseAPI {
} }
} }
/**
* Set a (CSS) margin around the canvas
*/
setMargin(width = 0) {
this.canvas.style.marginTop = `${width}px`;
this.canvas.style.marginBottom = `${width}px`;
}
/**
* Hide the cursor in a way that we can restore later.
*/
hideCursor() {
this.canvas.style.cursor = `none`;
}
/**
* Rebind the cursor to what it should be.
*/
showCursor() {
this.canvas.style.cursor = CURRENT_CURSOR;
}
/** /**
* Set the cursor type while the cursor is over the canvas * Set the cursor type while the cursor is over the canvas
*/ */
setCursor(type) { setCursor(type) {
this.canvas.style.cursor = type; CURRENT_CURSOR = type;
this.showCursor();
} }
/** /**

2
docs/js/custom-element/api/impart-slider-logic.js
View File

@@ -14,7 +14,7 @@ export default function impartSliderLogic(GraphicsAPI) {
slider.setAttribute(`value`, value); slider.setAttribute(`value`, value);
slider.setAttribute(`class`, classes); slider.setAttribute(`class`, classes);
this.element.append(slider); this.element.append(slider);
this.setSlider(slider, propname, value, transform); return this.setSlider(slider, propname, value, transform);
} }
}; };

18
docs/js/custom-element/graphics-element.js
View File

@@ -78,7 +78,7 @@ class GraphicsElement extends CustomElement {
:host([hidden]) { display: none; } :host([hidden]) { display: none; }
:host { max-width: calc(2em + ${this.getAttribute(`width`)}px); } :host { max-width: calc(2em + ${this.getAttribute(`width`)}px); }
:host style { display: none; } :host style { display: none; }
:host .top-title { display: flex; flex-direction: row; justify-content: space-between; } :host .top-title { display: flex; flex-direction: row-reverse; justify-content: space-between; }
:host canvas { position: relative; z-index: 1; display: block; margin: auto; border-radius: 0; box-sizing: content-box!important; border: 1px solid lightgrey; } :host canvas { position: relative; z-index: 1; display: block; margin: auto; border-radius: 0; box-sizing: content-box!important; border: 1px solid lightgrey; }
:host canvas:focus { border: 1px solid red; } :host canvas:focus { border: 1px solid red; }
:host a.view-source { font-size: 60%; text-decoration: none; } :host a.view-source { font-size: 60%; text-decoration: none; }
@@ -204,6 +204,8 @@ class GraphicsElement extends CustomElement {
return `${main} "${modulebase}${group}"`; return `${main} "${modulebase}${group}"`;
}); });
this.linkableCode = code;
// Then, step 2: split up the code into "global" vs. "class" code. // Then, step 2: split up the code into "global" vs. "class" code.
const split = splitCodeSections(code); const split = splitCodeSections(code);
const globalCode = split.quasiGlobal; const globalCode = split.quasiGlobal;
@@ -328,18 +330,20 @@ class GraphicsElement extends CustomElement {
const toptitle = document.createElement(`div`); const toptitle = document.createElement(`div`);
toptitle.classList.add(`top-title`); toptitle.classList.add(`top-title`);
const r = document.createElement(`button`);
r.classList.add(`reset`);
r.textContent = this.getAttribute(`reset`) || `reset`;
r.addEventListener(`click`, () => this.reset());
toptitle.append(r);
if (this.src) {
const a = document.createElement(`a`); const a = document.createElement(`a`);
a.classList.add(`view-source`); a.classList.add(`view-source`);
a.textContent = this.getAttribute(`viewSource`) || `view source`; a.textContent = this.getAttribute(`viewSource`) || `view source`;
a.href = this.src; a.href = this.src;
a.target = `_blank`; a.target = `_blank`;
toptitle.append(a); toptitle.append(a);
}
const r = document.createElement(`button`);
r.classList.add(`reset`);
r.textContent = this.getAttribute(`reset`) || `reset`;
r.addEventListener(`click`, () => this.reset());
toptitle.append(r);
if (this.label) slotParent.insertBefore(toptitle, this.canvas); if (this.label) slotParent.insertBefore(toptitle, this.canvas);
} }

1249
docs/js/custom-element/lib/bezierjs/bezier.js
View File

File diff suppressed because it is too large Load Diff

2
docs/news/2020-09-18.html
View File

@@ -34,7 +34,7 @@
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" /> <meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" />
<meta property="og:updated_time" content="Fri Oct 30 2020 20:22:30 +00:00" /> <meta property="og:updated_time" content="Sun Nov 01 2020 14:42:49 +00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />

2
docs/news/index.html
View File

@@ -33,7 +33,7 @@
<meta property="og:description" content="" /> <meta property="og:description" content="" />
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="Fri Oct 30 2020 20:22:30 GMT-0700 (Pacific Daylight Time)" /> <meta property="og:published_time" content="Sun Nov 01 2020 14:42:49 GMT-0800 (Pacific Standard Time)" />
<meta property="og:updated_time" content="" /> <meta property="og:updated_time" content="" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />

2
docs/news/rss.xml
View File

@@ -6,7 +6,7 @@
<atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link> <atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link>
<description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description> <description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description>
<language>en-GB</language> <language>en-GB</language>
<lastBuildDate>Fri Oct 30 2020 20:22:30 +00:00</lastBuildDate> <lastBuildDate>Sun Nov 01 2020 14:42:49 +00:00</lastBuildDate>
<image> <image>
<url>https://pomax.github.io/bezierinfo/images/og-image.png</url> <url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
<title>A Primer on Bézier Curves</title> <title>A Primer on Bézier Curves</title>

8
docs/uk-UA/index.html
View File

@@ -39,7 +39,7 @@
<meta property="og:locale" content="uk-UA" /> <meta property="og:locale" content="uk-UA" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-10-31T03:22:30+00:00" /> <meta property="og:updated_time" content="2020-11-01T22:42:49+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -1039,7 +1039,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Скрипти вимкнено. показує резервний.</span> <span class="view-source">Скрипти вимкнено. показує резервний.</span>
<img width="275px" height="275px" src="./images/chapters/control/f700cd59e6021b0e06b819105ec931da.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/8332e5d34b7344bbee2a2e1f4521ce46.png" loading="lazy" />
<label>Quadratic interpolations</label> <label>Quadratic interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -1055,7 +1055,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Скрипти вимкнено. показує резервний.</span> <span class="view-source">Скрипти вимкнено. показує резервний.</span>
<img width="275px" height="275px" src="./images/chapters/control/4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/1b8c5e574dc67bfb0afc3fb0a8727378.png" loading="lazy" />
<label>Cubic interpolations</label> <label>Cubic interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -1071,7 +1071,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Скрипти вимкнено. показує резервний.</span> <span class="view-source">Скрипти вимкнено. показує резервний.</span>
<img width="275px" height="275px" src="./images/chapters/control/be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/c26d2655e8741ef7e2eeb4f6554fc7a5.png" loading="lazy" />
<label>15th degree interpolations</label> <label>15th degree interpolations</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />

8
docs/zh-CN/index.html
View File

@@ -41,7 +41,7 @@
<meta property="og:locale" content="zh-CN" /> <meta property="og:locale" content="zh-CN" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" /> <meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
<meta property="og:updated_time" content="2020-10-31T03:22:30+00:00" /> <meta property="og:updated_time" content="2020-11-01T22:42:49+00:00" />
<meta property="og:author" content="Mike 'Pomax' Kamermans" /> <meta property="og:author" content="Mike 'Pomax' Kamermans" />
<meta property="og:section" content="Bézier Curves" /> <meta property="og:section" content="Bézier Curves" />
<meta property="og:tag" content="Bézier Curves" /> <meta property="og:tag" content="Bézier Curves" />
@@ -946,7 +946,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/f700cd59e6021b0e06b819105ec931da.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/8332e5d34b7344bbee2a2e1f4521ce46.png" loading="lazy" />
<label>二次插值</label> <label>二次插值</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -962,7 +962,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/4b206c16ccf8a06a0834fe9e5254560c.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/1b8c5e574dc67bfb0afc3fb0a8727378.png" loading="lazy" />
<label>三次插值</label> <label>三次插值</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -978,7 +978,7 @@ function Bezier(3,t):
> >
<fallback-image> <fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span> <span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="275px" height="275px" src="./images/chapters/control/be82cd31c4892a8f0582b1b5285231d9.png" loading="lazy" /> <img width="275px" height="275px" src="./images/chapters/control/c26d2655e8741ef7e2eeb4f6554fc7a5.png" loading="lazy" />
<label>15次插值</label> <label>15次插值</label>
</fallback-image> </fallback-image>
<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" /> <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />