Last active
May 26, 2018 15:52
-
-
Save josephmcasey/bebcd06bab0688ab73d347a7695f6fb7 to your computer and use it in GitHub Desktop.
My obsolete solution for a PixiJS bug that uses a few mathematical concepts.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Given an origin and target, determine the x,y coordinate | |
* of a distance along the hypotenuse of a right triangle. | |
* @param {number} x0 The origin X | |
* @param {number} y0 The origin Y | |
* @param {number} x1 The target X | |
* @param {number} y1 The target Y | |
* @param {number} d0 A distance between the origin to target | |
* @return {[number, number]} [x,y] The desired x, y coordinate | |
*/ | |
const deriveCoordinates = (x0, y0, x1, y1, d0) => { | |
const xCardinal = (x1 > x0) ? 1 : (x1 < x0) ? -1 : 0 | |
const yCardinal = (y1 > y0) ? 1 : (y1 < y0) ? -1 : 0 | |
let x = x0 | |
let y = y0 | |
if(xCardinal === 0 && yCardinal === 0) | |
return [x,y] | |
else if (xCardinal === 0) | |
y += d0 * yCardinal | |
else if (yCardinal === 0) | |
x += d0 * xCardinal | |
else | |
{ | |
const rise = Math.abs(y1 - y0) | |
const run = Math.abs(x1 - x0) | |
const slope = rise / run | |
const atan = Math.atan(slope) | |
const absoluteX = d0 * Math.cos(atan) | |
const absoluteY = d0 * Math.sin(atan) | |
const xDelta = absoluteX * xCardinal | |
const yDelta = absoluteY * yCardinal | |
x = x0 + xDelta | |
y = y0 + yDelta | |
} | |
return [x,y] | |
} | |
module.exports = deriveCoordinates |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const inputSimpleLine = { | |
"stroke": { | |
"color": 11316396, | |
"width": 5.5, | |
"alpha": 1 | |
}, | |
"commands": [ | |
{ | |
"command": "polygon", | |
"data": { | |
"0": 0, | |
"1": 0, | |
"2": 0, | |
"3": 10 | |
} | |
} | |
], | |
"dash": { | |
"count": 1, | |
"values": [2] | |
}, | |
"fill": undefined | |
} | |
export const expectSimpleLine = { | |
"stroke": { | |
"color": 11316396, | |
"width": 5.5, | |
"alpha": 1 | |
}, | |
"commands": [ | |
{ | |
"command": "moveTo", | |
"data": { | |
"0": 0, | |
"1": 0, | |
} | |
}, | |
{ | |
"command": "lineTo", | |
"data": { | |
"0": 0, | |
"1": 2, | |
} | |
}, | |
{ | |
"command": "moveTo", | |
"data": { | |
"0": 0, | |
"1": 4, | |
} | |
}, | |
{ | |
"command": "lineTo", | |
"data": { | |
"0": 0, | |
"1": 6, | |
} | |
}, | |
{ | |
"command": "moveTo", | |
"data": { | |
"0": 0, | |
"1": 8, | |
} | |
}, | |
{ | |
"command": "lineTo", | |
"data": { | |
"0": 0, | |
"1": 10, | |
} | |
} | |
], | |
"fill": undefined | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const deriveCoordinates = require("./derive-coordinate") | |
/** | |
* Generates a primitive object with a transformed | |
* commands property when provided an object with | |
* stroke, fill, and coordinate pair properties. | |
* @param feature | |
* @param dash | |
* @return | |
* @see http://pixijs.download/dev/docs/PIXI.Graphics.html | |
*/ | |
const rewriteCommandsToDashedLines = ({ fill, commands, stroke , dash}) => { | |
const generateLineSegments = coordinates => { | |
const lineCount = coordinates.length * 1.5 / 2 | |
const lineSegments = [] | |
for (let i = 0; i < lineCount; i += 2) { | |
let lineSegment = [coordinates[i], coordinates[i + 1], coordinates[i + 2], coordinates[i + 3]] | |
lineSegments.push(lineSegment) | |
} | |
return lineSegments | |
} | |
const generateLineSegmentLengths = lineSegments => lineSegments.map( ([x0,y0,x1,y1]) => Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)) ) | |
const generateLineSegmentPatternPositions = (totalPatternCycles, dash) => { | |
let x = [] | |
let roundedDistance = 0 | |
do { | |
debugger; | |
dash.values.forEach( | |
roundedDistance += Math.ceil(distance) | |
// (distance, index) => { | |
// let shouldDraw = Math.abs(roundedDistance) < Math.abs(lineSegmentLength) | |
// } | |
) | |
totalPatternCycles-- | |
} while( totalPatternCycles > 0) | |
return [] | |
} | |
if(commands.length === 1) { | |
const lineSegments = generateLineSegments(commands[0].data) | |
const lineSegmentLengths = generateLineSegmentLengths(lineSegments) | |
const totalPatternLength = dash.values.reduce((sum, value) => sum + value, 1) | |
const totalLineLength = lineSegmentLengths.reduce((sum, value) => sum + value, 1) | |
const totalPatternCycles = totalPatternLength / totalLineLength | |
const linePatternPositions = generateLineSegmentPatternPositions(totalPatternCycles, dash) | |
} | |
return { fill, commands, stroke, dash } | |
// Constants | |
// const lineWidth = stroke.width | |
// const lineColor = stroke.color | |
// const dashCount = dash.count | |
// const dashValues = dash.values | |
// const lineCount = coordinates.length * 1.5 / 2 | |
// const dashTotal = dashValues.reduce((sum, value) => sum + value, 1) | |
// | |
// // Constant Functions | |
// | |
// const lineLength = (x0, y0, x1, y1) => Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)) | |
// | |
// // Functions | |
// | |
// const drawSegment = (x0, y0, x1, y1) => { | |
// let lineTotal = lineLength(x0, y0, x1, y1) | |
// let patternCycles = lineTotal / dashTotal | |
// let roundedDistance = 0 | |
// | |
// graphic.moveTo(x0, y0) | |
// | |
// while( patternCycles > 0) { | |
// patternCycles-- | |
// dashValues.forEach( | |
// (distance, index) => { | |
// if(dashCount === 1) | |
// { | |
// let shouldDraw | |
// roundedDistance += Math.round(distance) | |
// shouldDraw = Math.abs(roundedDistance) < Math.abs(lineTotal) | |
// drawPattern(x0, y0, x1, y1, roundedDistance, 0, shouldDraw) | |
// | |
// roundedDistance += Math.round(distance) | |
// shouldDraw = Math.abs(roundedDistance) < Math.abs(lineTotal) | |
// drawPattern(x0, y0, x1, y1, roundedDistance, 1, shouldDraw) | |
// } | |
// else | |
// { | |
// roundedDistance += Math.round(distance) | |
// let shouldDraw = Math.abs(roundedDistance) < Math.abs(lineTotal) | |
// drawPattern(x0, y0, x1, y1, roundedDistance, index, shouldDraw) | |
// } | |
// } | |
// ) | |
// } | |
// } | |
// | |
// const drawPattern = (x0, y0, x1, y1, d0, index, shouldDraw) => { | |
// | |
// const isDash = index % 2 === 0 | |
// | |
// if(shouldDraw) | |
// { | |
// const coordinates = deriveCoordinates(x0, y0, x1, y1, d0) | |
// if (isDash) | |
// drawDash(coordinates) | |
// else | |
// drawGap(coordinates) | |
// } | |
// else | |
// { | |
// const coordinates = deriveCoordinates(x1, y1, x0, y0, Math.sqrt(d0)) | |
// drawDash(coordinates) | |
// drawGap([x1,y1]) | |
// } | |
// } | |
// | |
// const drawDash = ([x,y]) => { | |
// graphic.lineTo(x, y) | |
// } | |
// | |
// const drawGap = ([x,y]) => { | |
// graphic.moveTo(x, y) | |
// } | |
// | |
// graphic.lineStyle(lineWidth, lineColor, 1) | |
// for (let i = 0; i < lineCount; i += 2) { | |
// drawSegment(coordinates[i], coordinates[i + 1], coordinates[i + 2], coordinates[i + 3]) | |
// } | |
} | |
module.exports = rewriteCommandsToDashedLines |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import tap from "tap" | |
import {inputSimpleLine, expectSimpleLine} from "../test-data/transformers.data" | |
// Modules | |
const rewriteCommandsToDashedLines = require("../src/transformers/rewrite-commands-to-dashed-lines") | |
tap.test('feature-to-sprite background features', () => { | |
const convertedCommands = rewriteCommandsToDashedLines(inputSimpleLine) | |
console.log("convertedCommands: ", convertedCommands) | |
tap.same(convertedCommands,expectSimpleLine) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment