Last active
December 12, 2016 15:14
-
-
Save danielmahal/1069eeee17d35c854af2e749be770fe3 to your computer and use it in GitHub Desktop.
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
class Card extends React.Component { | |
static defaultProps = { | |
width: 500, | |
height: 500, | |
colors: [ | |
'#113A1C', '#2C6135', '#C88A1C', '#071946', | |
'#fff', '#253454', '#CBAFA0', '#771D06' | |
] | |
} | |
getPoints = radius => { | |
const { width, height } = this.props | |
const sampler = poissonDiscSampler(width, height, radius) | |
const points = [] | |
let sample | |
while (sample = sampler()) { | |
points.push(sample) | |
} | |
return points | |
} | |
getNearestPoints = (points, point, count = 5) => { | |
const filtered = _.without(points, point) | |
const sorted = _.sortBy(filtered, other => ( | |
Math.sqrt( | |
Math.pow(point[0] - other[0], 2) + | |
Math.pow(point[1] - other[1], 2) | |
) | |
)) | |
return _.take(sorted, count) | |
} | |
getShapes = (points, count) => { | |
return _.times(count, i => { | |
const point = points[~~(Math.random() * points.length)] | |
const nearest = this.getNearestPoints(points, point, 8) | |
const sorted = _.sortBy(nearest, other => ( | |
Math.atan2(point[1] - other[1], point[0] - other[0]) | |
)) | |
const divided = _.flatten(_.map(sorted, (point, i) => { | |
const next = sorted[(i + 1) % sorted.length] | |
return [ | |
point, | |
[ | |
(point[0] + next[0]) / 2, | |
(point[1] + next[1]) / 2 | |
] | |
] | |
})) | |
const first = divided.shift(_.first(divided)) | |
divided.push(first) | |
divided.push(divided[0]) | |
const path = _.map(divided, ([x, y], i) => ( | |
`${i === 0 ? 'M' : (i % 2 === 0) ? '' : 'Q'}${x} ${y}` | |
)).join(' ') + 'Z' | |
return path | |
}) | |
} | |
render () { | |
const { width, height, colors, onRef } = this.props | |
const pointMaps = _.times(3, i => this.getPoints(30 * (i + 1))) | |
const shapeMaps = _.map(pointMaps, points => this.getShapes(points, 20)) | |
return ( | |
<svg ref={onRef} width={width} height={height}> | |
{shapeMaps.map(shapes => ( | |
shapes.map((path, i) => ( | |
<path key={i} d={path} fill={colors[~~(Math.random() * colors.length)]} /> | |
)) | |
))} | |
</svg> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment