2 changed files with 114 additions and 0 deletions
@ -0,0 +1,65 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<title>Braid</title> |
||||||
|
|
||||||
|
<code mode="text/html"> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<style> |
||||||
|
body { |
||||||
|
background-color: #ffffcc; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<script type="text/javascript" src="paper.js"></script> |
||||||
|
<script type="text/javascript" src="jsoneditor.min.js"></script> |
||||||
|
<script type="text/javascript" src="braid.js" canvas="canvas"></script> |
||||||
|
<script type="text/javascript"> |
||||||
|
var params; |
||||||
|
|
||||||
|
function draw() { |
||||||
|
paper.project.clear(); |
||||||
|
var grp = braid(params); |
||||||
|
grp.translate(new Point(1.2, 1.2)); |
||||||
|
grp.scale(190, new Point(0,0)); |
||||||
|
} |
||||||
|
|
||||||
|
function get_svg() { |
||||||
|
return paper.project.exportSVG({asString: true}); |
||||||
|
} |
||||||
|
|
||||||
|
window.onload = function() { |
||||||
|
paper.install(window); |
||||||
|
paper.setup(document.getElementById('canvas')); |
||||||
|
var editor; |
||||||
|
|
||||||
|
draw(); |
||||||
|
|
||||||
|
document.getElementById('download-svg').addEventListener('click', function() { |
||||||
|
var svgdata = 'data:image/svg+xml;utf8,' + encodeURIComponent(get_svg()); |
||||||
|
var a = document.createElement('a'); |
||||||
|
a.download = 'export.svg'; |
||||||
|
a.href = svgdata; |
||||||
|
document.body.appendChild(a); |
||||||
|
a.click(); |
||||||
|
}); |
||||||
|
|
||||||
|
document.getElementById('new').addEventListener('click', function() { |
||||||
|
draw(); |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<canvas id="canvas" style="width: 500px; height: 500px;" resize></canvas> |
||||||
|
<hr> |
||||||
|
<button id="download-svg">download svg</button> |
||||||
|
<button id="new">new</button> |
||||||
|
<br> |
||||||
|
<div id="params"></div> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
||||||
@ -0,0 +1,49 @@ |
|||||||
|
|
||||||
|
function braid_get_rnd_params() { |
||||||
|
return { |
||||||
|
num_points: 10, |
||||||
|
point_noise: 0.6, |
||||||
|
num_connections: 8, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function braid(params) { |
||||||
|
if(typeof params == 'undefined') { |
||||||
|
var params = braid_get_rnd_params(); |
||||||
|
} |
||||||
|
|
||||||
|
let points = []; |
||||||
|
for(let i=0; i<params.num_points; i++) { |
||||||
|
//const angle = i/params.num_points * 2 * Math.PI + Math.random() * params.point_noise;
|
||||||
|
const angle = i/params.num_points * 2 * Math.PI + Math.random() * params.point_noise; |
||||||
|
const p1 = new Point(Math.sin(angle) + (Math.random() - 0.5) * params.point_noise, Math.cos(angle) + (Math.random() - 0.5) * params.point_noise); |
||||||
|
const p2 = new Point(Math.sin(angle) + (Math.random() - 0.5) * params.point_noise, Math.cos(angle) + (Math.random() - 0.5) * params.point_noise); |
||||||
|
points.push([p1, p2]); |
||||||
|
} |
||||||
|
|
||||||
|
var lines = []; |
||||||
|
for(let i=0; i<params.num_points; i++) { |
||||||
|
var l = new Path.Line(points[i][0], points[i][1]); |
||||||
|
l.strokeColor = 'black'; |
||||||
|
l.strokeWidth = 5; |
||||||
|
lines.push(l); |
||||||
|
} |
||||||
|
|
||||||
|
var connections = []; |
||||||
|
for(let i=0; i<params.num_points; i++) { |
||||||
|
var l1 = lines[i]; |
||||||
|
var l2 = lines[(i+1) % params.num_points]; |
||||||
|
for(let j=0; j<params.num_connections; j++) { |
||||||
|
var o = j / (params.num_connections - 1); |
||||||
|
var cl = new Path.Line(l1.getPointAt(o * l1.length), l2.getPointAt(o * l2.length)); |
||||||
|
cl.strokeColor = 'black'; |
||||||
|
connections.push(cl); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var grp = new paper.Group(lines); |
||||||
|
grp.addChildren(connections); |
||||||
|
return grp; |
||||||
|
} |
||||||
|
|
||||||
Loading…
Reference in new issue