Skip to content

Instantly share code, notes, and snippets.

@Announcement

Announcement/a_stickfigure.js

Last active April 1, 2018 04:10
Show Gist options
  • Save Announcement/83980f8fdff087ae8e633b8d36fefaf2 to your computer and use it in GitHub Desktop.
Save Announcement/83980f8fdff087ae8e633b8d36fefaf2 to your computer and use it in GitHub Desktop.
Download ZIP
what percent math is this
Raw
a_stickfigure.js
let canvas;
let context;
let styles = [];
canvas = document.createElement('canvas');
context = canvas.getContext('2d');
function getDistance(point1, point2) {
return Math.sqrt(Math.pow(point2.y - point1.y, 2) + Math.pow(point2.x - point1.x, 2));
}
function getDirection(point1, point2) {
return Math.atan2(point2.y - point1.y, point2.x - point1.x);
}
function getPointVector(point, vector) {
return {
x: point.x * vector.magnitude * Math.cos(vector.direction),
y: point.y + vector.magnitude * Math.sin(vector.direction)
};
}
function Triangle_SSS({
a,
b,
c
}) {
const sorted = [a, b, c].sort((a, b) => a - b);
const maximum = sorted.reverse()[0];
const minimum = sorted[0];
const C = (Math.pow(a, 2) + Math.pow(b, 2) - Math.pow(c, 2)) / (2 * a * b);
const A = (Math.pow(b, 2) + Math.pow(c, 2) - Math.pow(a, 2)) / (2 * b * c);
const B = (Math.pow(c, 2) + Math.pow(a, 2) - Math.pow(b, 2)) / (2 * c * a);
let cos;
let sin;
if (a === maximum) {
cos = A;
sin = b * Math.sin(A) / a;
cos = Math.abs(cos);
sin = Math.abs(sin);
return {
A: cos,
B: sin,
C: Math.PI - (cos + sin)
};
}
if (b === maximum) {
cos = B;
sin = c * Math.sin(B) / b;
cos = Math.abs(cos);
sin = Math.abs(sin);
return {
A: Math.PI - (cos + sin),
B: cos,
C: sin
};
}
if (c === maximum) {
cos = C;
sin = a * Math.sin(C) / c;
cos = Math.abs(cos);
sin = Math.abs(sin);
return {
A: sin,
B: Math.PI - (cos + sin),
C: cos
};
}
}
function getTrianglePoints(points, sides, angles) {
let direction1 = getDirection(points[0], points[1]);
let direction2 = getDirection(points[1], points[0]);
let angle = {
elbow: angles.A,
shoulder: angles.B,
wrist: angles.C
};
let side = {
forearm: sides.b,
bicep: sides.c
};
let chest = points[0];
let hand = points[1];
let shoulder_elbow = [{
x: chest.x + side.bicep * Math.cos(direction1 - angle.shoulder),
y: chest.y + side.bicep * Math.sin(direction1 - angle.shoulder)
}, {
x: chest.x + side.bicep * Math.cos(direction2 - angle.shoulder),
y: chest.y + side.bicep * Math.sin(direction2 - angle.shoulder)
}, {
x: chest.x + side.bicep * Math.cos(direction1 + angle.shoulder),
y: chest.y + side.bicep * Math.sin(direction1 + angle.shoulder)
}, {
x: chest.x + side.bicep * Math.cos(direction2 + angle.shoulder),
y: chest.y + side.bicep * Math.sin(direction2 + angle.shoulder)
}];
let hand_elbow = [{
x: hand.x + side.forearm * Math.cos(direction1 - angle.wrist),
y: hand.y + side.forearm * Math.sin(direction1 - angle.wrist)
}, {
x: hand.x + side.forearm * Math.cos(direction2 - angle.wrist),
y: hand.y + side.forearm * Math.sin(direction2 - angle.wrist)
}, {
x: hand.x + side.forearm * Math.cos(direction1 + angle.wrist),
y: hand.y + side.forearm * Math.sin(direction1 + angle.wrist)
}, {
x: hand.x + side.forearm * Math.cos(direction2 + angle.wrist),
y: hand.y + side.forearm * Math.sin(direction2 + angle.wrist)
}];
console.log('se', shoulder_elbow);
shoulder_elbow.forEach((elbow, index) => {
let bicepDistance = getDistance(elbow, chest);
let forearmDistance = getDistance(elbow, hand);
let bicepEqual = bicepDistance === side.bicep;
let forearmEqual = forearmDistance === side.forearm;
console.log(index, `bicep: ${side.bicep} === ${bicepDistance} ; ${bicepEqual}`, `forearm: ${side.forearm} === ${forearmDistance} ; ${forearmEqual}`);
});
hand_elbow.forEach((elbow, index) => {
let bicepDistance = getDistance(elbow, chest);
let forearmDistance = getDistance(elbow, hand);
let bicepEqual = bicepDistance === side.bicep;
let forearmEqual = forearmDistance === side.forearm;
console.log(index, `bicep: ${side.bicep} === ${bicepDistance} ; ${bicepEqual}`, `forearm: ${side.forearm} === ${forearmDistance} ; ${forearmEqual}`);
});
}
document.body.appendChild(canvas);
context.canvas.width = 850;
context.canvas.height = 400;
person({
x: context.canvas.width / 2,
y: 0
});
function rgba(red, green, blue, alpha) {
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}
function fill(style) {
if (styles.length === 0) {
context.beginPath();
if (style) context.fillStyle = style;
}
styles.push({
fill: style
});
}
function stroke(style) {
if (styles.length === 0) {
context.beginPath();
if (style) context.strokeStyle = style;
}
styles.push({
stroke: style
});
}
function draw() {
let style;
while (style = styles.shift()) {
if (style.stroke) context.stroke();
if (style.fill) context.fill();
}
context.closePath();
}
function person(point, target) {
const personHeight = 300;
let headPosition = {
x: 0,
y: 0
};
let shoulderPosition = {
x: 0,
y: 0
};
headPosition.x = 0;
headPosition.y = shoulderPosition.x = 0;
shoulderPosition.y = personHeight * 2 / 3;
function line($from, $to) {
return $to ? move($to) : move;
function move($to) {
context.moveTo(point.x + $from.x, context.canvas.height - $from.y);
context.lineTo(point.x + $to.x, context.canvas.height - $to.y);
}
}
function circle($center, radius) {
const x = point.x + $center.x;
const y = context.canvas.height - $center.y;
context.arc(x, y, radius, 0, Math.PI * 2, false);
}
stroke(rgba(0, 0, 0, 0.5));
line({
x: 0 - personHeight / 8,
y: 0
})({
x: 0,
y: personHeight * 1 / 3
});
draw();
stroke(rgba(0, 0, 0, 0.5));
line({
x: 0 + personHeight / 8,
y: 0
})({
x: 0,
y: personHeight * 1 / 3
});
draw();
stroke(rgba(0, 0, 0, 0.5));
line({
x: 0,
y: personHeight * 1 / 3
})({
x: 0,
y: personHeight * 2 / 3
});
draw();
stroke(rgba(0, 0, 0, 0.5));
circle({
x: 0,
y: personHeight * 2 / 3 + personHeight * 1 / 6
}, personHeight / 6);
draw();
function gun(target) {
const armLength = personHeight * 1 / 2;
const bicepLength = armLength * 4 / 9;
const forearmLength = armLength * 5 / 9;
let chest = {
x: point.x - 0,
y: context.canvas.height - personHeight * 33 / 51
};
let contact = {
x: point.x - 0,
y: context.canvas.height - personHeight * 31 / 51
};
let center = {
x: context.canvas.width / 2,
y: context.canvas.height / 2
};
let direction = getDirection(contact, target);
let distance = getDistance(contact, target);
let muzzle = {
x: contact.x + personHeight * 3 / 8 * Math.cos(direction),
y: contact.y + personHeight * 3 / 8 * Math.sin(direction)
};
let butt = {
x: contact.x - personHeight * 1 / 8 * Math.cos(direction),
y: contact.y - personHeight * 1 / 8 * Math.sin(direction)
};
let handDistances = [(3 / 8 + 1 / 8) * (3 / 9) - 1 / 8, (3 / 8 + 1 / 8) * (8 / 9) - 1 / 8];
let handPlacements = [{
x: contact.x + personHeight * handDistances[0] * Math.cos(direction),
y: contact.y + personHeight * handDistances[0] * Math.sin(direction)
}, {
x: contact.x + personHeight * handDistances[1] * Math.cos(direction),
y: contact.y + personHeight * handDistances[1] * Math.sin(direction)
}];
stroke(rgba(0, 0, 0, 0.5));
context.arc(chest.x, chest.y, 3, 0, Math.PI * 2, false);
draw();
for (let handPlacement of handPlacements) {
stroke(rgba(0, 0, 0, 0.5));
context.arc(handPlacement.x, handPlacement.y, 3, 0, Math.PI * 2, false);
draw();
}
stroke(rgba(0, 0, 0, 0.5));
context.moveTo(muzzle.x, muzzle.y);
context.lineTo(butt.x, butt.y);
draw();
let thirdDistances = [getDistance(chest, handPlacements[0]), getDistance(chest, handPlacements[1])];
let armTriangles = [{
a: thirdDistances[0],
b: forearmLength,
c: bicepLength
}, {
a: thirdDistances[1],
b: forearmLength,
c: bicepLength
}];
let armAngles = [Triangle_SSS(armTriangles[0]), Triangle_SSS(armTriangles[1])];
for (var i = 0; i < 2; i++) {
let sides = armTriangles[i];
let angles = armAngles[i];
let point = handPlacements[i];
getTrianglePoints([chest, point], sides, angles);
let elbow = {
x: point.x + sides.b * Math.cos(angles.B),
y: point.y + sides.b * Math.sin(angles.B)
};
context.beginPath();
context.strokeStyle = rgba(0, 0, 0, 0.5);
context.moveTo(point.x, point.y);
context.lineTo(elbow.x, elbow.y);
context.lineTo(chest.x, chest.y);
context.stroke();
context.closePath();
}
function getAngles({
radians,
degrees
}) {
if (exists(radians) && empty(degrees)) degrees = radians * 180 / Math.PI;
if (exists(degrees) && empty(radians)) radians = degrees * Math.PI / 180;
return {
radians,
degrees
};
}
function getAngleStrings({
radians,
degrees
}) {
let precision = 3;
let magnitude = Math.pow(10, precision);
function format(it, l, r) {
let string;
string = (Math.round(it * magnitude) / magnitude).toString();
let numbers = string.split('.');
numbers[0] = numbers[0].padStart(l);
numbers[1] = numbers[1].padEnd(precision, '0');
return numbers.join('.');
}
return {
radians: format(radians, 1) + ' pi',
degrees: format(degrees, 3) + '\u00b0'
};
}
}
if (target) gun(target);
function pointIntercept(y_1, m, x, x_1) {
return m * (x - x_1) + y;
_;
1;
}
function pointSlope(m, x, b) {
return m * x + b;
}
}
aim({
x: context.canvas.width * 1 / 8,
y: context.canvas.height * 1 / 2
});
function aim(point) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
context.strokeStyle = 'rgba(0, 0, 0, 0.5)';
context.arc(point.x, point.y, 10, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
person({
x: context.canvas.width / 2,
y: 0
}, {
x: point.x,
y: point.y
});
}
canvas.addEventListener('mousemove', function canvas_mouseMove(event) {
aim({
x: event.offsetX,
y: event.offsetY
});
});
function exists(it) {
return it !== undefined && it !== null;
}
function empty(it) {
return it === undefined || it === null;
}
Raw
z_other.tsx
// // }
// // function typedRotate (theta: Angle, center?: Point, antiClockwise: boolean = false) {
// // const rotation = antiClockwise ? rotateCounterClockwise : rotateClockwise;
// // return function * (...points: Point[]) {
// // // const each = center ? relativePoint(center)(...points) : points
// //
// // for (const {x, y} of points) {
// // // console.log(x, y, rotation(x, y, theta.radians))
// // yield rotation(x, y, theta.radians)
// // }
// // }
// // }
// // function rotateCounterClockwise (x, y, theta) {
// // return {
// // x: ( Math.cos(theta) * x) + (Math.sin(theta) * y),
// // y: (-Math.sin(theta) * x) + (Math.cos(theta) * y)
// // }
// // }
// // function rotateClockwise (x, y, theta) {
// // return {
// // x: (Math.cos(theta) * x) + (-Math.sin(theta) * y),
// // y: (Math.sin(theta) * x) + ( Math.cos(theta) * y)
// // }
// // }
// // function multiplyMatrix2D (column, matrix) {
// // return [
// // matrix[0][0] * column[0] + matrix[1][0] * column[1],
// // matrix[0][1] * column[0] + matrix[1][1] * column[1]
// // ]
// // }
// // function multiplyMatrix3D (column, matrix) {
// // return [
// // matrix[0][0] * column[0] + matrix[1][0] * column[1] + matrix[2][0] * column[2],
// // matrix[0][1] * column[0] + matrix[1][1] * column[1] + matrix[2][1] * column[2],
// // matrix[0][2] * column[0] + matrix[1][2] * column[1] + matrix[2][2] * column[2],
// // ]
// // }
// // function matrixMultiplyND (column, matrix) {
// // let rows
// // let row
// //
// // rows = new Array(column.length)
// // rows = rows.fill(0)
// //
// // for (let x: number = 0; x < column.length; x++)
// // for (let y: number = 0; y < column.length; y++)
// // rows[x] = rows[x] + matrix[x][y] * column[y]
// //
// // return rows
// // }
// // function generateCounterClockwiseMatrix (theta) {
// // return [
// // [ Math.cos(theta), Math.sin(theta)],
// // [-Math.sin(theta), Math.cos(theta)]
// // ]
// // }
// // function generateClockwiseMatrix (theta) {
// // return [
// // [Math.cos(theta), -Math.sin(theta)],
// // [Math.sin(theta), Math.cos(theta)]
// // ]
// // }
// // function generateStretchXMatrix (k: number) {
// // return [
// // [k, 0],
// // [0, 1]
// // ]
// // }
// // function generateStretchYMatrix (k: number) {
// // return [
// // [1, 0],
// // [0, k]
// // ]
// // }
// // function rotate3d (theta, l, m, n) {
// // const matrix = [
// // [
// // l * l * (1 - Math.cos(theta)) + Math.cos(theta),
// // m * l * (1 - Math.cos(theta)) - n * Math.sin(theta),
// // n * l * (1 - Math.cos(theta)) + m * Math.sin(theta)
// // ],
// // [
// // l * m * (1 - Math.cos(theta)) + n * Math.sin(theta),
// // m * m * (1 - Math.cos(theta)) + Math.cos(theta),
// // n * m * (1 - Math.cos(theta)) - l * Math.sin(theta)
// // ],
// // [
// // l * n * (1 - Math.cos(theta)) - m * Math.sin(theta),
// // m * n * (1 - Math.cos(theta)) + l * Math.sin(theta),
// // n * n * (1 - Math.cos(theta)) + Math.cos(theta)
// // ]
// // ]
// // return multiplyMatrix3D(l, m, n)
// // }
// // function relativePoint ({x, y}: Point) {
// // return function * (...points: Point[]) {
// // for (const point of points) {
// // yield {
// // x: point.x + x,
// // y: point.y + y
// // }
// // }
// // }
// // }
// //
// // function* getIntersections (radius,...lines) {
// // for (const [point1, point2] of lines) {
// // const point3 = {
// // x: point2.x - point1.x,
// // y: point2.y - point1.y
// // }
// //
// // const detererminate = point1.x * point2.y - point2.x * point1.y
// // const distance = Math.sqrt(Math.pow(point3.y, 2) + Math.pow(point3.x, 2))
// // const distanceSquared = Math.pow(distance, 2)
// // const discriminant = radius * radius * distanceSquared - detererminate * detererminate
// //
// // if (discriminant < 0) {
// // yield [
// // point1,
// // point2
// // ]
// // }
// // if (discriminant === 0) {
// // const point4 = {
// // x: detererminate * point3.y / distanceSquared,
// // y: -detererminate * point3.x / distanceSquared
// // }
// // yield [
// // point1,
// // point4,
// // point2
// // ]
// // }
// // if (discriminant > 0) {
// // const discriminantSquareroot = Math.sqrt(discriminant)
// // const sign = point3.y < 0 ? -1 : 1
// //
// // const point4 = {
// // x: ( detererminate * point3.y + sign * point3.x * discriminantSquareroot) / distanceSquared,
// // y: (-detererminate * point3.x + Math.abs(point3.y) * discriminantSquareroot) / distanceSquared
// // }
// //
// // const point5 = {
// // x: ( detererminate * point3.y - sign * point3.x * discriminantSquareroot) / distanceSquared,
// // y: (-detererminate * point3.x - Math.abs(point3.y) * discriminantSquareroot) / distanceSquared
// // }
// //
// // const contactPoints = getDistance(point1, point4) < getDistance(point1, point5) ?
// // [point4, point5] :
// // [point5, point4]
// //
// // yield [ point1, ...contactPoints, point2 ]
// // }
// // }
// // }
// //
// // /* SSS */ function* getTriangle (side1: Side, side2: Side, side3: Side);
// // /* SAS */ function* getTriangle (side1: Side, angle: Angle, side2: Side);
// // /* SSA */ function* getTriangle (side1: Side, side2: Side, angle: Angle);
// // /* ASA */ function* getTriangle (angle1: Angle, side: Side, angle2: Angle);
// // /* AAS */ function* getTriangle (angle1: Angle, angle2: Angle, side: Side);
// // /* AAA */ function* getTriangle (angle1: Angle, angle2: Angle, angle3: Angle);
// // function* getTriangle ($1, $2, $3) {
// // if ($1 instanceof Side && $2 instanceof Side && $3 instanceof Side)
// // yield sss(+$1, +$2, +$3)
// // if ($1 instanceof Side && $2 instanceof Angle && $3 instanceof Side)
// // yield sas(+$1, +$2, +$3)
// // if ($1 instanceof Side && $2 instanceof Side && $3 instanceof Angle)
// // yield ssa(+$1, +$2, +$3)
// // if ($1 instanceof Angle && $2 instanceof Side && $3 instanceof Angle)
// // yield asa(+$1, +$2, +$3)
// // if ($1 instanceof Angle && $2 instanceof Angle && $3 instanceof Side)
// // yield aas(+$1, +$2, +$3)
// // if ($1 instanceof Angle && $2 instanceof Angle && $3 instanceof Angle)
// // yield aaa(+$1, +$2, +$3)
// //
// // function* sss (a, b, c) {
// // const alpha = Math.acos(((b * b) + (c * c) - (a * a)) / (2 * b * c))
// // const beta = Math.acos(((a * a) + (c * c) - (b * b)) / (2 * a * c))
// // const gamma = Math.PI - alpha - beta
// //
// // yield { a, b, c, alpha, beta, gamma } as Triangle
// // }
// // function* sas (a, gamma, b) {
// // const c = Math.sqrt((a * a) + (b * b) - (2 * a * b) * Math.cos(gamma))
// // const alpha = Math.acos(((b * b) + (c * c) - (a * a)) / (2 * b * c))
// // const beta = Math.PI - alpha - gamma
// //
// // yield { a, b, c, alpha, beta, gamma } as Triangle
// // }
// // function* ssa (b, c, beta) {
// // const D = c / b * Math.sin(beta)
// //
// // if (D > 1) {
// // const message =
// // `A triangle with angle \u03b2 ${beta} not between side b of ${b} and side c of ${c} `
// //
// // const error =
// // new Error(message)
// //
// // throw error
// // }
// //
// // if (D === 1) {
// // const gamma = Math.PI / 2
// // const alpha = Math.PI - beta - gamma
// // const a = b * (Math.sin(alpha) / Math.sin(beta))
// //
// // yield { a, b, c, alpha, beta, gamma } as Triangle
// // }
// //
// // if (D < 1) {
// // if (b >= c) {
// // const gamma = Math.asin(D)
// // const alpha = Math.PI - beta - gamma
// // const a = b * (Math.sin(alpha) / Math.sin(beta))
// // yield { a, b, c, alpha, beta, gamma } as Triangle
// // }
// // if (b < c) {
// // const acute = Math.asin(D)
// // const abtuse = Math.PI - acute
// //
// // let alpha
// // let a
// // let gamma
// //
// // alpha = Math.PI - beta - acute
// // a = b * (Math.sin(alpha) / Math.sin(beta))
// // gamma = acute
// // yield { a, b, c, alpha, beta, gamma } as Triangle
// //
// // alpha = Math.PI - beta - abtuse
// // a = b * (Math.sin(alpha) / Math.sin(beta))
// // gamma = abtuse
// // yield { a, b, c, alpha, beta, gamma } as Triangle
// // }
// // }
// // }
// // function* asa (alpha, c, beta) {
// // const gamma = Math.PI - alpha - beta
// // const a = c * Math.sin(alpha) / Math.sin(gamma)
// // const b = c * Math.sin(beta) / Math.sin(gamma)
// // // const denominator = Math.sin(alpha) * Math.cos(beta) + Math.sin(beta) * Math.cos(alpha)
// // // const a = c * Math.sin(alpha) / denominator
// // // const b = c * Math.sin(beta) / denominator
// //
// // yield { a, b, c, alpha, beta, gamma } as Triangle
// // }
// // function* aas (alpha, gamma, c) {
// // const beta = Math.PI - alpha - gamma
// // const a = c / Math.sin(gamma) * Math.sin(alpha)
// // const b = c / Math.sin(gamma) * Math.sin(beta)
// //
// // yield { a, b, c, alpha, beta, gamma } as Triangle
// // }
// // function* aaa (alpha, beta, gamma) {
// // const message = `Could not solve absolute triangle without an absolute measurement.`
// // const error = new Error(message)
// //
// // throw error
// // }
// // }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment