add blome

5 years ago · 87f7dceacf
2 changed files with 133 additions and 0 deletions
--- a/blome/blome.html
+++ b/blome/blome.html
@ -0,0 +1,59 @@
				@@ -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>
+
--- a/blome/blome.js
+++ b/blome/blome.js
@ -0,0 +1,74 @@
				@@ -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);
+};
+