Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/.gistup

Last active August 21, 2016 05:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 1wheel/f4dd5c4b997e02efe9be to your computer and use it in GitHub Desktop.
Save 1wheel/f4dd5c4b997e02efe9be to your computer and use it in GitHub Desktop.
Download ZIP
Raw
geomtry.js
//creates new point
function P(x, y, color){
var rv
if (x.map){
rv = {x: x[0], y: x[1], color: 'black'}
} else{
rv = {x: x, y: y, color: color || 'black'}
}
rv.toString = function(){ return rv.x + ',' + rv.y }
rv.type = 'point'
return rv
}
function clone(d){
if (d.type == 'point'){
return P(d.x, d.y, d.color)
}
}
//dist
function distP(a, b){
return Math.sqrt(
Math.pow(a.x - b.x, 2) +
Math.pow(a.y - b.y, 2))
}
//http://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment
//todo clean up
function distLine(a, b, p){
function sqr(x) { return x * x }
function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) }
function distToSegmentSquared(p, v, w) {
var l2 = dist2(v, w);
if (l2 == 0) return dist2(p, v);
var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
if (t < 0) return dist2(p, v);
if (t > 1) return dist2(p, w);
return dist2(p, { x: v.x + t * (w.x - v.x),
y: v.y + t * (w.y - v.y) });
}
function distToSegment(p, v, w) { return Math.sqrt(distToSegmentSquared(p, v, w)); }
return distToSegment(p, a, b)
}
function calcAngle(a, b, c){
var v1 = [b.x - a.x, b.y - a.y]
var v2 = [c.x - b.x, c.y - b.y]
var dot = v1[0]*v2[0] + v1[1]*v2[1]
var ab = distP(a, b)
var bc = distP(b, c)
var ca = distP(c, a)
return Math.acos((bc*bc + ab*ab - ca*ca)/(2*bc*ab))//*180/Math.PI
// return Math.acos((bc*bc + ab*ab - ca*ca)/(2*bc*ab))*180/Math.PI
}
//intersection between lines connect points [a, b] and [c, d]
function intersection(a, b, c, d){
var det = (a.x - b.x)*(c.y - d.y)
- (a.y - b.y)*(c.x - d.x),
l = a.x*b.y - a.y*b.x,
m = c.x*d.y - c.y*d.x,
ix = (l*(c.x - d.x) - m*(a.x - b.x))/det,
iy = (l*(c.y - d.y) - m*(a.y - b.y))/det,
i = P(ix, iy)
i.isOverlap = (ix == a.x && iy == a.y) || (ix == b.x && iy == b.y)
i.isIntersection = !(a.x < ix ^ ix < b.x)
&& !(c.x < ix ^ ix < d.x)
&& !i.isOverlap
return i
}
function isLeft(a, b, c){
return (b.x - a.x)*(c.y - a.y) - (b.y - a.y)*(c.x - a.x) > 0
}
//http://stackoverflow.com/questions/2049582/how-to-determine-a-point-in-a-2d-triangle
function triangleContains(a, b, c, p){
var b1 = isLeft(p, a, b)
var b2 = isLeft(p, b, c)
var b3 = isLeft(p, c, a)
return (b1 == b2) && (b2 == b3)
}
function lineXatY(l, y){
var a = l[0], b = l[1],
m = (a.y - b.y)/(a.x - b.x)
return (y - a.y + m*a.x)/m
}
function toPathStr(d){ return 'M' + d.join('L') }
function negFn(d){ return !d }
function clamp(a,b,c){ return Math.max(a, Math.min(b, c)) }
function pairs(array){
var rv = []
array.forEach(function(d, i){
for (var j = i + 1; j < array.length; j++) rv.push([d, array[j]])
})
return rv
}
function mod(n, m){ return ((n % m) + m) % m }
function tree(array){
var key = function(d){ return d }
array.insert = function(d){
var i = 0
var val = key(d)
while (array[i] && val > key(array[i])) i++
if (array[i] && val == key(array[i])) return // don't add dupes
array.splice(i, 0, d)
}
array.remove = function(d){
var index = array.indexOf(d.line)
array.splice(index, 1)
}
array.swap = function(i, j){
}
// nukes existing array
// array.array = function(_){
// array = _
// return array
// }
array.key = function(_){
key = _
array.sort(d3.ascendingKey(key))
return array
}
return array
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
margin: 0px;
}
path{
stroke: black;
}
</style>
<body></body>
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
<script>
var width = 960,
height = 1600
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var s = 405
!(function(){
var duration = 100
var points = [[0, 0], [s, 0], [s, s], [0, s]]
var g = svg.append('g').translate([50, 50])
setInterval(function(){
var curPoint = points.shift()
var nextPoint = points[0]
g.append('path')
.attr('d', ['M', curPoint, 'L', curPoint].join(' '))
.transition().duration(duration)
.attr('d', ['M', curPoint, 'L', nextPoint].join(' '))
var percent = .06
points.push([
curPoint[0]*(1 - percent) + nextPoint[0]*percent,
curPoint[1]*(1 - percent) + nextPoint[1]*percent])
}, duration)
})()
!(function(){
var duration = 100
var count = 0
var points = [[0, 0], [s, 0], [s, s], [0, s]]
var g = svg.append('g').translate([555, 50])
setInterval(function(){
count++
var curPoint = points.shift()
var nextPoint = points[0]
g.append('path')
.attr('d', ['M', curPoint, 'L', curPoint].join(' '))
.transition().duration(duration)
.attr('d', ['M', curPoint, 'L', nextPoint].join(' '))
var percent = .000 + count*.0005
points.push([
curPoint[0]*(1 - percent) + nextPoint[0]*percent,
curPoint[1]*(1 - percent) + nextPoint[1]*percent])
}, duration)
})()
// !(function(){
// var duration = 100
// var count = 0
// var points = [[0, 0], [s, 0], [s, s], [0, s]]
// var g = svg.append('g').translate([50, 555])
// setInterval(function(){
// count++
// var curPoint = points.shift()
// var nextPoint = points[0]
// g.append('path')
// .attr('d', ['M', curPoint, 'L', curPoint].join(' '))
// .transition().duration(duration)
// .attr('d', ['M', curPoint, 'L', nextPoint].join(' '))
// var percent = Math.max(.035, .30 - count*.0075)
// points.push([
// curPoint[0]*(1 - percent) + nextPoint[0]*percent,
// curPoint[1]*(1 - percent) + nextPoint[1]*percent])
// }, duration)
// })()
!(function(){
var duration = 100
var count = 0
var points = [[0, 0], [s, 0], [s, s], [0, s]]
var g = svg.append('g').translate([555, 555])
setInterval(function(){
count++
var curPoint = points.shift()
var nextPoint = points[0]
g.append('path')
.attr('d', ['M', curPoint, 'L', curPoint].join(' '))
.transition().duration(duration)
.attr('d', ['M', curPoint, 'L', nextPoint].join(' '))
var percent = Math.random()*.06 + .03
points.push([
curPoint[0]*(1 - percent) + nextPoint[0]*percent,
curPoint[1]*(1 - percent) + nextPoint[1]*percent])
}, duration)
})()
!(function(){
var duration = 100
var count = 0
var points = [[0, 0], [s, 0], [s, s], [0, s]]
var g = svg.append('g').translate([50, 555])
setInterval(function(){
count++
var curPoint = points.shift()
var nextPoint = points[0]
g.append('path')
.attr('d', ['M', curPoint, 'L', curPoint].join(' '))
.transition().duration(duration)
.attr('d', ['M', curPoint, 'L', nextPoint].join(' '))
var dist = Math.sqrt(
Math.pow(curPoint[0] - nextPoint[0], 2) +
Math.pow(curPoint[1] - nextPoint[1], 2))
percent = 6/dist
points.push([
curPoint[0]*(1 - percent) + nextPoint[0]*percent,
curPoint[1]*(1 - percent) + nextPoint[1]*percent])
}, duration)
})()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment