Fr3deric
5 years ago
2 changed files with 133 additions and 0 deletions
@ -0,0 +1,59 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<title>Blome</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/paperscript" src="blome.js" canvas="canvas"></script> |
||||||
|
<script type="text/javascript"> |
||||||
|
window.globals = {}; |
||||||
|
function draw() { |
||||||
|
paper.project.clear(); |
||||||
|
window.globals.blome(); |
||||||
|
} |
||||||
|
|
||||||
|
function get_svg() { |
||||||
|
return paper.project.exportSVG({asString: true}); |
||||||
|
} |
||||||
|
|
||||||
|
window.onload = function() { |
||||||
|
paper.install(window); |
||||||
|
paper.setup(document.getElementById('canvas')); |
||||||
|
|
||||||
|
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: 300px; height: 485px;" resize></canvas> |
||||||
|
<hr> |
||||||
|
<button id="download-svg">download svg</button> |
||||||
|
<button id="new">new</button> |
||||||
|
<br> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
@ -0,0 +1,74 @@ |
|||||||
|
|
||||||
|
function cp(phi) { |
||||||
|
return new Point(Math.sin(phi), Math.cos(phi)); |
||||||
|
} |
||||||
|
|
||||||
|
function rnd(min, max) { |
||||||
|
return min + Math.random() * (max - min); |
||||||
|
} |
||||||
|
|
||||||
|
function scribblify(objs, delta) { |
||||||
|
for(var i=0; i<objs.length; i++) { |
||||||
|
var p = objs[i].clone(); |
||||||
|
for(var j=0; j<p.segments.length; j++) { |
||||||
|
console.log(i, j); |
||||||
|
p.segments[j].point += new Size(rnd(-delta/2, delta/2), |
||||||
|
rnd(-delta/2, delta/2)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
globals.blome = function() { |
||||||
|
var pathprops = {strokeColor: 'black', strokeWidth: 1, |
||||||
|
closed: true}; |
||||||
|
var size = project.view.size; |
||||||
|
var stemwidth = 0.03; |
||||||
|
var num_leaves = 9; |
||||||
|
var leave_start = 5; |
||||||
|
var leave_size = size.width / 3; |
||||||
|
var spos = size * new Size(0.5, 0.99); |
||||||
|
var pos = project.view.size * new Size(rnd(0.4, 0.6), 0.3); |
||||||
|
|
||||||
|
var flower = []; |
||||||
|
|
||||||
|
var stem = new Path(pathprops); |
||||||
|
flower.push(stem); |
||||||
|
stem.add(spos - size * new Size(stemwidth, 0)); |
||||||
|
stem.add(pos); |
||||||
|
stem.add(spos + size * new Size(stemwidth, 0)); |
||||||
|
|
||||||
|
function mk_stemleave(stempos) { |
||||||
|
var stemleave = new Path(pathprops); |
||||||
|
flower.push(stemleave); |
||||||
|
var stemleavesize = size * new Size(0.25, 0.05); |
||||||
|
var p = stem.getPointAt(stem.length * stempos); |
||||||
|
var sig = (stempos < 0.5) ? -1 : 1; |
||||||
|
stemleave.add(p + new Size(size.width/70 * sig, 0)); |
||||||
|
stemleave.add(p + new Size(sig * rnd(0.8, 1.2), sig) * |
||||||
|
stemleavesize); |
||||||
|
stemleave.add(p + new Size(sig * rnd(0.8, 1.2), -sig) * |
||||||
|
stemleavesize); |
||||||
|
} |
||||||
|
mk_stemleave(rnd(0.15, 0.26)); |
||||||
|
mk_stemleave(rnd(0.75, 0.85)); |
||||||
|
|
||||||
|
for(var i=0; i<num_leaves; i++) { |
||||||
|
if(i==0) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
var phi = (2 * Math.PI * i) / num_leaves; |
||||||
|
var dphi = (2 * Math.PI) / (num_leaves + 2) * 0.5; |
||||||
|
var leave = new Path(pathprops); |
||||||
|
flower.push(leave); |
||||||
|
leave.add(pos + cp(phi + rnd(-0.1, 0.1)) * leave_start * |
||||||
|
rnd(0.5, 5)); |
||||||
|
leave.add(pos + cp(phi + dphi + rnd(-0.1, 0.1)) * leave_size * |
||||||
|
rnd(0.9, 1.3)); |
||||||
|
leave.add(pos + cp(phi - dphi + rnd(-0.1, 0.1)) * leave_size * |
||||||
|
rnd(0.9, 1.3)); |
||||||
|
} |
||||||
|
scribblify(flower, 25); |
||||||
|
scribblify(flower, 25); |
||||||
|
scribblify(flower, 5); |
||||||
|
}; |
||||||
|
|
Loading…
Reference in new issue