I'm trying to create an array of time durations in a day with 15 minute intervals with moment.js and ES6.
Example: let time_duration= ["15 Min", "30 Min",..., "1 hr 15 min", "1 hr 30 min"]
I think it supposed to work:
generateTimeDurations(minutesGap: number, length: number): string[] {
const result = Array(length).fill(null);
let acc = 0;
return result.map(_ => {
acc += minutesGap;
if (acc >= 60) {
return `${Math.floor(acc / 60)} hr ${acc % 60} min`;
} else {
return `${acc} min`;
}
});
}
If you only need static time levels like "15 Min", "30 Min" and so on you could try to do it in plain JS with Array#fill and Array#map.
const hours = 24;
const minutes = 24 * 60;
function minsToHM(totalMins) {
let padZero = value => String(value).padStart(2, "0");
totalMins = Number(totalMins);
const h = Math.floor(totalMins / 60);
const m = Math.floor(totalMins % 60);
const hDisplay = h > 0 ? padZero(h) + (h == 1 ? " Hour" : " Hours") : "";
const mDisplay = m > 0 ? padZero(m) + (m == 1 ? " Min" : " Mins") : "";
return `${hDisplay}${h > 0 && m > 0 ? ", ": ""}${mDisplay}`;
}
function splitHours(hours, difference) {
const mins = hours * 60;
return Array(Math.floor(mins / difference))
.fill(1)
.map((_, idx) => (idx+1) * difference)
}
const output = splitHours(1.5, 15).map(i => minsToHM(i))
console.log(output)
.as-console-wrapper { max-height: 100% !important; top: 0px }
console.clear();
function digitToMinute(digit) {
return digit * 60 / 100;
}
function minutesToDigit(minute) {
return minute * 100 / 60;
}
function digitsToHourAndMinutes(digit) {
return [Math.floor(digit / 60), digitToMinute(getFraction(digit / 60))];
}
function getFraction(f) {
return Math.ceil(((f < 1.0) ? f : (f % Math.floor(f))) * 100)
}
function getIntervals(max) {
var intervals = [];
var span = 15;
var i = 0;
while (i <= max) {
if (i > 0) {
let [hour, minute] = digitsToHourAndMinutes((i));
let string = [];
if (hour > 0) {
string.push(hour + ' hour');
}
if (minute > 0) {
string.push(minute + ' minutes');
}
intervals.push(string.join(' '));
}
i = i + span;
}
return intervals;
}
console.log(getIntervals(60 * 5));
I'm doing a red-eye filter for fabricjs:
(function(global) {
'use strict';
var filters = fabric.Image.filters,
createClass = fabric.util.createClass;
filters.NoRedEyes = createClass(filters.BaseFilter, {
type: 'NoRedEyes',
fragmentSource: 'precision highp float;\n' +
'uniform sampler2D uTexture;\n' +
'uniform float uMyParameter;\n' +
'varying vec2 vTexCoord;\n' +
'void main() {\n' +
'vec4 color = texture2D(uTexture, vTexCoord);\n' +
// add your gl code here
'gl_FragColor = color;\n' +
'}',
myParameter: 0,
mainParameter: 'myParameter',
applyTo: function (options) {
console.log(options);
var canvasEl = options.targetCanvas;
var context = canvasEl.getContext('2d'),
imageData = context.getImageData(this.left, this.top, this.width, this.height),
data = imageData.data;
var p = imageData.width * imageData.height, pix = p * 4, r, g, b;
while (p--) {
pix -= 4;
r = data[pix];
b = data[pix + 1];
g = data[pix + 2];
if (parseFloat(r / (g + b) / 2) > 0.5) // лучший результат - 0.4 / 1.5 because it gives the best results
{
imageData.data[pix] = Math.round((g + b) / 2);
}
}
context.putImageData(imageData, this.left, this.top);
},
});
fabric.Image.filters.NoRedEyes.fromObject = fabric.Image.filters.BaseFilter.fromObject;
})(typeof exports !== 'undefined' ? exports : this);
I have errors:
Error: WebGL warning: readPixels: Framebuffer not complete. (status: 0x8cd7)
fabric.js:19844:3
Error: WebGL warning: readPixels: Framebuffer must be complete.
I've been fiddling around with the jpeg-js module and Node JS Buffer, and attempting to create a small command line program that modifies the decoded JPEG buffer data and creates a pattern of X number of reversed scanlines and X number of normal scanlines before saving a new JPEG. In other words, I'm looking to flip portions of the image, but not the entire image itself (plenty of modules that do such a thing, of course, but not the specific use case I have).
To create the reversed/normal line patterns, I've been reading/writing line by line, and saving a slice of that line to a variable, then starting at the end of scanline and incrementally going down by slices of 4 bytes (the alloc for an RGBA value) until I'm at the beginning of the line. Code for the program:
'use strict';
const fs = require('fs');
const jpeg = require('jpeg-js');
const getPixels = require('get-pixels');
let a = fs.readFileSync('./IMG_0006_2.jpg');
let d = Buffer.allocUnsafe(a.width * a.height * 4);
let c = jpeg.decode(a);
let val = false; // track whether normal or reversed scanlines
let lineWidth = b.width * 4;
let lineCount = 0;
let track = 0;
let track2 = 0;
let track3 = 0;
let curr, currLine; // storage for writing/reading scnalines, respectively
let limit = {
one: Math.floor(Math.random() * 141),
two: Math.floor(Math.random() * 151),
three: Math.floor(Math.random() * 121)
};
if (limit.one < 30) {
limit.one = 30;
}
if (limit.two < 40) {
limit.two = 40;
}
if (limit.two < 20) {
limit.two = 20;
}
let calc = {};
calc.floor = 0;
calc.ceil = 0 + lineWidth;
d.forEach(function(item, i) {
if (i % lineWidth === 0) {
lineCount++;
/* // alternate scanline type, currently disabled to figure out how to succesfully reverse image
if (lineCount > 1 && lineCount % limit.one === 0) {
// val = !val;
}
*/
if (lineCount === 1) {
val = !val; // setting alt scanline check to true initially
} else if (calc.floor + lineWidth < b.data.length - 1) {
calc.floor += lineWidth;
calc.ceil += lineWidth;
}
currLine = c.data.slice(calc.floor, calc.ceil); // current line
track = val ? lineWidth : 0; // tracking variable for reading from scanline
track2 = val ? 4 : 0; // tracking variable for writing from scanline
}
//check if reversed and writing variable has written 4 bytes for RGBA
//if so, set writing source to 4 bytes at end of line and read from there incrementally
if (val && track2 === 4) {
track2 = 0; // reset writing count
curr = currLine.slice(track - 4, track); // store 4 previous bytes as writing source
if (lineCount === 1 && lineWidth - track < 30) console.log(curr); //debug
} else {
curr = currLine; //set normal scanline
}
d[i] = curr[track2];
// check if there is no match between data source and decoded image
if (d[i] !== curr[track2]) {
if (track3 < 50) {
console.log(i);
}
track3++;
}
track2++; //update tracking variable
track = val ? track - 1 : track + 1; //update tracking variable
});
var rawImageData = {
data: d,
width: b.width,
height: b.height
};
console.log(b.data.length);
console.log('errors\t', track3);
var jpegImageData = jpeg.encode(rawImageData, 100);
fs.writeFile('foo2223.jpg', jpegImageData.data);
Alas, the reversed scanline code I've written does not properly. Unfortunately, I've only been able successfully reverse the red channel of my test image (see below left), with the blue and green channels just turning into vague blurs. The color scheme should look something like the right image.
What am I doing wrong here?
For reversed lines, you stored slices of 4 bytes(4 bytes = 1 pixel), then write the first value of the pixel(red) correctly.
But in the next iteration, you overwrite the slice curr with currLine, rest of channels gets wrong values.
if (val && track2 === 4) {
track2 = 0; // reset writing count
curr = currLine.slice(track - 4, track); // store 4 previous bytes as writing source
if (lineCount === 1 && lineWidth - track < 30) console.log(curr); //debug
} else {
curr = currLine; //set normal scanline
}
Iteration 0: val == true, track2 == 4, set curr to next pixel, write red channel.
Iteration 1: val == true, track2 == 1, (val && track2 === 4) == false, set curr to currLine, write green channel.
You can move track2 === 4 branch to avoid this:
if (val) {
if (track2 === 4) {
track2 = 0; // reset writing count
curr = currLine.slice(track - 4, track); // store 4 previous bytes as writing source
if (lineCount === 1 && lineWidth - track < 30) console.log(curr); //debug
}
} else {
curr = currLine; //set normal scanline
}
Fixed code should look like this:
function flipAlt(input, output) {
const fs = require('fs');
const jpeg = require('jpeg-js');
let a = fs.readFileSync(input);
let b = jpeg.decode(a);
let d = Buffer.allocUnsafe(b.width * b.height * 4);
let val = false; // track whether normal or reversed scanlines
let lineWidth = b.width * 4;
let lineCount = 0;
let track = 0;
let track2 = 0;
let track3 = 0;
let curr, currLine; // storage for writing/reading scnalines, respectively
let limit = {
one: Math.floor(Math.random() * 141),
two: Math.floor(Math.random() * 151),
three: Math.floor(Math.random() * 121)
};
if (limit.one < 30) {
limit.one = 30;
}
if (limit.two < 40) {
limit.two = 40;
}
if (limit.two < 20) {
limit.two = 20;
}
let calc = {};
calc.floor = 0;
calc.ceil = 0 + lineWidth;
d.forEach(function(item, i) {
if (i % lineWidth === 0) {
lineCount++;
if (lineCount > 1) {
val = !val;
}
if (lineCount === 1) {
val = !val; // setting alt scanline check to true initially
} else if (calc.floor + lineWidth < b.data.length - 1) {
calc.floor += lineWidth;
calc.ceil += lineWidth;
}
currLine = b.data.slice(calc.floor, calc.ceil); // current line
track = val ? lineWidth : 0; // tracking variable for reading from scanline
track2 = val ? 4 : 0; // tracking variable for writing from scanline
}
//check if reversed and writing variable has written 4 bytes for RGBA
//if so, set writing source to 4 bytes at end of line and read from there incrementally
if (val) {
if (track2 === 4) {
track2 = 0; // reset writing count
curr = currLine.slice(track - 4, track); // store 4 previous bytes as writing source
if (lineCount === 1 && lineWidth - track < 30) console.log(curr); //debug
}
} else {
curr = currLine; //set normal scanline
}
d[i] = curr[track2];
// check if there is no match between data source and decoded image
if (d[i] !== curr[track2]) {
if (track3 < 50) {
console.log(i);
}
track3++;
}
track2++; //update tracking variable
track = val ? track - 1 : track + 1; //update tracking variable
});
var rawImageData = {
data: d,
width: b.width,
height: b.height
};
console.log(b.data.length);
console.log('errors\t', track3);
var jpegImageData = jpeg.encode(rawImageData, 100);
fs.writeFile(output, jpegImageData.data);
}
flipAlt('input.jpg', 'output.jpg');
Instead of tracking array indices, you can use utility library like lodash, it should make things easier:
function flipAlt(input, output) {
const fs = require('fs');
const jpeg = require('jpeg-js');
const _ = require('lodash');
const image = jpeg.decode(fs.readFileSync(input));
const lines = _.chunk(image.data, image.width*4);
const flipped = _.flatten(lines.map((line, index) => {
if (index % 2 != 0) {
return line;
}
const pixels = _.chunk(line, 4);
return _.flatten(pixels.reverse());
}));
const imageData = jpeg.encode({
width: image.width,
height: image.height,
data: new Buffer(flipped)
}, 100).data;
fs.writeFile(output, imageData);
}
flipAlt('input.jpg', 'output.jpg');
I'm looking for a way to generate a polygon programatically by "thickening" a Bezier curve. Something like this:
My initial idea was to find the normals in the line, and generate the polygon from them:
But the problem is that the normals can cross each other in steep curves, like this:
Are there any formulas or algorithms that generate a polygon from a bezier curve? I couldn't find any information on the internet, but perhaps I'm searching using the wrong words...
If you want a constant thickness, this is called an offset curve and your idea of using normals is correct.
This indeed raises two difficulties:
The offset curve is not exactly representable as a Bezier curve; you can use a polyline instead, or retrofit Beziers to the polyline;
There are indeed cusps appearing when the radius of curvature becomes smaller than the offset width. You will have to detect the self-intersections of the polyline.
As far as I know, there is no easy solution.
For a little more info, check 38. Curve offsetting.
Step-by-step process detailed here: How to Draw an Offset Curve
Solution based on the paper ‘Quadratic bezier offsetting with selective subdivision‘ by Gabriel Suchowolski. More from the author: MATH+CODE
Interactive example: CodePen
var canvas, ctx;
var drags;
var thickness = 30;
var drawControlPoints = true;
var useSplitCurve = true;
function init() {
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
drags = [];
window.addEventListener('resize', resize);
window.addEventListener('mousedown', mousedown);
window.addEventListener('mouseup', mouseup);
window.addEventListener('mousemove', mousemove);
document.getElementById('btnControl').addEventListener('click', function(e) {
drawControlPoints = !drawControlPoints
});
document.getElementById('btnSplit').addEventListener('click', function(e) {
useSplitCurve = !useSplitCurve
});
resize();
draw();
var positions = [{
x: canvas.width * 0.3,
y: canvas.height * 0.4
}, {
x: canvas.width * 0.35,
y: canvas.height * 0.85
}, {
x: canvas.width * 0.7,
y: canvas.height * 0.25
}];
for (var i = 0; i < positions.length; i++) {
drags.push(new Drag(ctx, new Vec2D(positions[i].x, positions[i].y)));
}
}
function draw() {
requestAnimationFrame(draw);
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
for (var i = 0; i < drags.length; i++) {
d = drags[i];
d.draw();
}
for (var i = 1; i < drags.length - 1; i++) {
/*
var d1 = (i == 0) ? drags[i].pos : drags[i - 1].pos;
var d2 = drags[i].pos;
var d3 = (i == drags.length - 1) ? drags[drags.length - 1].pos : drags[i + 1].pos;
var v1 = d2.sub(d1);
var v2 = d3.sub(d2);
var p1 = d2.sub(v1.scale(0.5));
var p2 = d3.sub(v2.scale(0.5));
var c = d2;
*/
var p1 = drags[i - 1].pos;
var p2 = drags[i + 1].pos;
var c = drags[i].pos;
var v1 = c.sub(p1);
var v2 = p2.sub(c);
var n1 = v1.normalizeTo(thickness).getPerpendicular();
var n2 = v2.normalizeTo(thickness).getPerpendicular();
var p1a = p1.add(n1);
var p1b = p1.sub(n1);
var p2a = p2.add(n2);
var p2b = p2.sub(n2);
var c1a = c.add(n1);
var c1b = c.sub(n1);
var c2a = c.add(n2);
var c2b = c.sub(n2);
var line1a = new Line2D(p1a, c1a);
var line1b = new Line2D(p1b, c1b);
var line2a = new Line2D(p2a, c2a);
var line2b = new Line2D(p2b, c2b);
var split = (useSplitCurve && v1.angleBetween(v2, true) > Math.PI / 2);
if (!split) {
var ca = line1a.intersectLine(line2a).pos;
var cb = line1b.intersectLine(line2b).pos;
} else {
var t = MathUtils.getNearestPoint(p1, c, p2);
var pt = MathUtils.getPointInQuadraticCurve(t, p1, c, p2);
var t1 = p1.scale(1 - t).add(c.scale(t));
var t2 = c.scale(1 - t).add(p2.scale(t));
var vt = t2.sub(t1).normalizeTo(thickness).getPerpendicular();
var qa = pt.add(vt);
var qb = pt.sub(vt);
var lineqa = new Line2D(qa, qa.add(vt.getPerpendicular()));
var lineqb = new Line2D(qb, qb.add(vt.getPerpendicular()));
var q1a = line1a.intersectLine(lineqa).pos;
var q2a = line2a.intersectLine(lineqa).pos;
var q1b = line1b.intersectLine(lineqb).pos;
var q2b = line2b.intersectLine(lineqb).pos;
}
if (drawControlPoints) {
// draw control points
var r = 2;
ctx.beginPath();
if (!split) {
ctx.rect(ca.x - r, ca.y - r, r * 2, r * 2);
ctx.rect(cb.x - r, cb.y - r, r * 2, r * 2);
} else {
// ctx.rect(pt.x - r, pt.y - r, r * 2, r * 2);
ctx.rect(p1a.x - r, p1a.y - r, r * 2, r * 2);
ctx.rect(q1a.x - r, q1a.y - r, r * 2, r * 2);
ctx.rect(p2a.x - r, p2a.y - r, r * 2, r * 2);
ctx.rect(q2a.x - r, q2a.y - r, r * 2, r * 2);
ctx.rect(qa.x - r, qa.y - r, r * 2, r * 2);
ctx.rect(p1b.x - r, p1b.y - r, r * 2, r * 2);
ctx.rect(q1b.x - r, q1b.y - r, r * 2, r * 2);
ctx.rect(p2b.x - r, p2b.y - r, r * 2, r * 2);
ctx.rect(q2b.x - r, q2b.y - r, r * 2, r * 2);
ctx.rect(qb.x - r, qb.y - r, r * 2, r * 2);
ctx.moveTo(qa.x, qa.y);
ctx.lineTo(qb.x, qb.y);
}
ctx.closePath();
ctx.strokeStyle = '#0072bc';
ctx.stroke();
ctx.fillStyle = '#0072bc';
ctx.fill();
// draw dashed lines
ctx.beginPath();
if (!split) {
ctx.moveTo(p1a.x, p1a.y);
ctx.lineTo(ca.x, ca.y);
ctx.lineTo(p2a.x, p2a.y);
ctx.moveTo(p1b.x, p1b.y);
ctx.lineTo(cb.x, cb.y);
ctx.lineTo(p2b.x, p2b.y);
} else {
ctx.moveTo(p1a.x, p1a.y);
ctx.lineTo(q1a.x, q1a.y);
ctx.lineTo(qa.x, qa.y);
ctx.lineTo(q2a.x, q2a.y);
ctx.lineTo(p2a.x, p2a.y);
ctx.moveTo(p1b.x, p1b.y);
ctx.lineTo(q1b.x, q1b.y);
ctx.lineTo(qb.x, qb.y);
ctx.lineTo(q2b.x, q2b.y);
ctx.lineTo(p2b.x, p2b.y);
}
ctx.setLineDash([2, 4]);
ctx.stroke();
ctx.closePath();
ctx.setLineDash([]);
}
// central line
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.quadraticCurveTo(c.x, c.y, p2.x, p2.y);
ctx.strokeStyle = '#959595';
ctx.stroke();
// offset curve a
ctx.beginPath();
ctx.moveTo(p1a.x, p1a.y);
if (!split) {
ctx.quadraticCurveTo(ca.x, ca.y, p2a.x, p2a.y);
} else {
ctx.quadraticCurveTo(q1a.x, q1a.y, qa.x, qa.y);
ctx.quadraticCurveTo(q2a.x, q2a.y, p2a.x, p2a.y);
}
ctx.strokeStyle = '#0072bc';
ctx.lineWidth = 2;
ctx.stroke();
// offset curve b
ctx.beginPath();
ctx.moveTo(p1b.x, p1b.y);
if (!split) {
ctx.quadraticCurveTo(cb.x, cb.y, p2b.x, p2b.y);
} else {
ctx.quadraticCurveTo(q1b.x, q1b.y, qb.x, qb.y);
ctx.quadraticCurveTo(q2b.x, q2b.y, p2b.x, p2b.y);
}
ctx.strokeStyle = '#0072bc';
ctx.stroke();
}
}
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function mousedown(e) {
e.preventDefault();
var m = new Vec2D(e.clientX, e.clientY);
for (var i = 0; i < drags.length; i++) {
var d = drags[i];
var dist = d.pos.distanceToSquared(m);
if (dist < d.hitRadiusSq) {
d.down = true;
break;
}
}
}
function mouseup() {
for (var i = 0; i < drags.length; i++) {
var d = drags[i];
d.down = false;
}
}
function mousemove(e) {
var m = new Vec2D(e.clientX, e.clientY);
for (var i = 0; i < drags.length; i++) {
var d = drags[i];
if (d.down) {
d.pos.x = m.x;
d.pos.y = m.y;
break;
}
}
}
function Drag(ctx, pos) {
this.ctx = ctx;
this.pos = pos;
this.radius = 6;
this.hitRadiusSq = 900;
this.down = false;
}
Drag.prototype = {
draw: function() {
this.ctx.beginPath();
this.ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2);
this.ctx.closePath();
this.ctx.strokeStyle = '#959595'
this.ctx.stroke();
}
}
// http://toxiclibs.org/docs/core/toxi/geom/Vec2D.html
function Vec2D(a, b) {
this.x = a;
this.y = b;
}
Vec2D.prototype = {
add: function(a) {
return new Vec2D(this.x + a.x, this.y + a.y);
},
angleBetween: function(v, faceNormalize) {
if (faceNormalize === undefined) {
var dot = this.dot(v);
return Math.acos(this.dot(v));
}
var theta = (faceNormalize) ? this.getNormalized().dot(v.getNormalized()) : this.dot(v);
return Math.acos(theta);
},
distanceToSquared: function(v) {
if (v !== undefined) {
var dx = this.x - v.x;
var dy = this.y - v.y;
return dx * dx + dy * dy;
} else {
return NaN;
}
},
dot: function(v) {
return this.x * v.x + this.y * v.y;
},
getNormalized: function() {
return new Vec2D(this.x, this.y).normalize();
},
getPerpendicular: function() {
return new Vec2D(this.x, this.y).perpendicular();
},
interpolateTo: function(v, f) {
return new Vec2D(this.x + (v.x - this.x) * f, this.y + (v.y - this.y) * f);
},
normalize: function() {
var mag = this.x * this.x + this.y * this.y;
if (mag > 0) {
mag = 1.0 / Math.sqrt(mag);
this.x *= mag;
this.y *= mag;
}
return this;
},
normalizeTo: function(len) {
var mag = Math.sqrt(this.x * this.x + this.y * this.y);
if (mag > 0) {
mag = len / mag;
this.x *= mag;
this.y *= mag;
}
return this;
},
perpendicular: function() {
var t = this.x;
this.x = -this.y;
this.y = t;
return this;
},
scale: function(a) {
return new Vec2D(this.x * a, this.y * a);
},
sub: function(a, b) {
return new Vec2D(this.x - a.x, this.y - a.y);
},
}
// http://toxiclibs.org/docs/core/toxi/geom/Line2D.html
function Line2D(a, b) {
this.a = a;
this.b = b;
}
Line2D.prototype = {
intersectLine: function(l) {
var isec,
denom = (l.b.y - l.a.y) * (this.b.x - this.a.x) - (l.b.x - l.a.x) * (this.b.y - this.a.y),
na = (l.b.x - l.a.x) * (this.a.y - l.a.y) - (l.b.y - l.a.y) * (this.a.x - l.a.x),
nb = (this.b.x - this.a.x) * (this.a.y - l.a.y) - (this.b.y - this.a.y) * (this.a.x - l.a.x);
if (denom !== 0) {
var ua = na / denom,
ub = nb / denom;
if (ua >= 0.0 && ua <= 1.0 && ub >= 0.0 && ub <= 1.0) {
isec = new Line2D.LineIntersection(Line2D.LineIntersection.Type.INTERSECTING, this.a.interpolateTo(this.b, ua));
} else {
isec = new Line2D.LineIntersection(Line2D.LineIntersection.Type.NON_INTERSECTING, this.a.interpolateTo(this.b, ua));
}
} else {
if (na === 0 && nb === 0) {
isec = new Line2D.LineIntersection(Line2D.LineIntersection.Type.COINCIDENT, undefined);
} else {
isec = new Line2D.LineIntersection(Line2D.LineIntersection.Type.COINCIDENT, undefined);
}
}
return isec;
}
}
Line2D.LineIntersection = function(type, pos) {
this.type = type;
this.pos = pos;
}
Line2D.LineIntersection.Type = {
COINCIDENT: 0,
PARALLEL: 1,
NON_INTERSECTING: 2,
INTERSECTING: 3
};
window.MathUtils = {
getPointInQuadraticCurve: function(t, p1, pc, p2) {
var x = (1 - t) * (1 - t) * p1.x + 2 * (1 - t) * t * pc.x + t * t * p2.x;
var y = (1 - t) * (1 - t) * p1.y + 2 * (1 - t) * t * pc.y + t * t * p2.y;
return new Vec2D(x, y);
},
// http://microbians.com/math/Gabriel_Suchowolski_Quadratic_bezier_offsetting_with_selective_subdivision.pdf
// http://www.math.vanderbilt.edu/~schectex/courses/cubic/
getNearestPoint: function(p1, pc, p2) {
var v0 = pc.sub(p1);
var v1 = p2.sub(pc);
var a = v1.sub(v0).dot(v1.sub(v0));
var b = 3 * (v1.dot(v0) - v0.dot(v0));
var c = 3 * v0.dot(v0) - v1.dot(v0);
var d = -1 * v0.dot(v0);
var p = -b / (3 * a);
var q = p * p * p + (b * c - 3 * a * d) / (6 * a * a);
var r = c / (3 * a);
var s = Math.sqrt(q * q + Math.pow(r - p * p, 3));
var t = MathUtils.cbrt(q + s) + MathUtils.cbrt(q - s) + p;
return t;
},
// http://stackoverflow.com/questions/12810765/calculating-cubic-root-for-negative-number
cbrt: function(x) {
var sign = x === 0 ? 0 : x > 0 ? 1 : -1;
return sign * Math.pow(Math.abs(x), 1 / 3);
}
}
init();
html,
body {
height: 100%;
margin: 0
}
canvas {
display: block
}
#btnControl {
position: absolute;
top: 10px;
left: 10px;
}
#btnSplit {
position: absolute;
top: 35px;
left: 10px;
}
<button type="button" id="btnControl">control points on/off</button>
<button type="button" id="btnSplit">split curve on/off</button>
This is a hard problem. There are reasonable approximations like Tiller-Hanson (see my answer to this question: How to get the outline of a stroke?) but the questioner specifically raises the difficulty that 'the normals can cross each other in steep curves'; another way of looking at it is that an envelope created using normals can produce an indefinitely large number of loops, depending on how closely spaced the normals are.
A perfect solution, without self-intersections, is the envelope of the Minkowski sum of a circle and the line. I think it's impractical to get such an envelope, though: you may have to accept the intersections.
Another interesting but daunting fact is that, as Richard Kinch notes in MetaFog: Converting METAFONT Shapes to Contours, "Algebra tells us
that stroking a 3rd degree polynomial curve (the ellipse
approximated by Bézier curves) along a 3rd
degree polynomial curve (the Bézier curve of the
stroked path) results in a 6th degree envelope curve.
We will have to approximate these 6th degree exact
envelope curves with 3rd degree (Bezier) curves".
Here I had the math papers about that theme.
The “Quadratic bezier offsetting with selective subdivision" covers a method to offset quadratic beziers using a criterion that set the parametric value on which the quadratic bezier is subdivided at the start in order to generate an offset approximation with other quadratic beziers segments. This method, obviously, may not be the most perfect approximation of a hypothetical “real” offset, but a fast algorithm for drawing strokes that can be performed on different quality levels by using a non recursive algorithm.
Here all the papers and examples https://microbians.com/mathcode
that imbrizi use for the codepen he put in the answers.
https://codepen.io/microbians/pen/OJPmBZg
code in the link