Skip to content

Instantly share code, notes, and snippets.

@josephmcasey
Last active May 26, 2018 15:52
Show Gist options
  • Save josephmcasey/bebcd06bab0688ab73d347a7695f6fb7 to your computer and use it in GitHub Desktop.
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.
/**
* 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
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
}
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
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