|
|
|
|
|
|
|
|
|
<title>JavaScript <=> PaperScript example</title>
|
|
|
|
|
|
|
|
|
|
<code mode="text/html">
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script type="text/javascript" src="paper.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var ppp = new paper.Path();
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/javascript" src="lindenmeyer-system.js" canvas="canvas"></script>
|
|
|
|
|
<script type="text/paperscript" canvas="canvas">
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
var r = generate('A'.split(''),
|
|
|
|
|
[
|
|
|
|
|
['A'.split(''), 'AB'.split('')],
|
|
|
|
|
//['x'.split(''), 'X'.split('')],
|
|
|
|
|
//['B'.split(''), 'C'.split('')]
|
|
|
|
|
['B'.split(''), 'A'.split('')]
|
|
|
|
|
]
|
|
|
|
|
, 4);
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/************************************************
|
|
|
|
|
* Dragon Curve
|
|
|
|
|
************************************************/
|
|
|
|
|
|
|
|
|
|
function dragon_curve(variant) {
|
|
|
|
|
project.clear();
|
|
|
|
|
var r = generate(
|
|
|
|
|
'FX',
|
|
|
|
|
[
|
|
|
|
|
['X', 'X+YF+'],
|
|
|
|
|
['Y', '-FX-Y']
|
|
|
|
|
],
|
|
|
|
|
12
|
|
|
|
|
);
|
|
|
|
|
if(variant == 'random-angles') {
|
|
|
|
|
var actions = {
|
|
|
|
|
'F': draw_forward(),
|
|
|
|
|
'-': draw_turn(-Math.PI/2.23+Math.random()),
|
|
|
|
|
'+': draw_turn(Math.PI/2.42+Math.random())
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
var actions = {
|
|
|
|
|
'F': draw_forward(),
|
|
|
|
|
'-': draw_turn(-Math.PI/2),
|
|
|
|
|
'+': draw_turn(Math.PI/2),
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
var p = draw(r, actions);
|
|
|
|
|
if(variant == 'random-angles') {
|
|
|
|
|
p.scale(4);
|
|
|
|
|
} else {
|
|
|
|
|
p.scale(3);
|
|
|
|
|
}
|
|
|
|
|
p.translate(new Point(200, 200));
|
|
|
|
|
p.strokeWidth = 1;
|
|
|
|
|
p.strokeColor = '#ff00ff';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/************************************************
|
|
|
|
|
* Sierpinski Triangle
|
|
|
|
|
************************************************/
|
|
|
|
|
|
|
|
|
|
function sierpinski2(num_defects, noise) {
|
|
|
|
|
project.clear();
|
|
|
|
|
if(typeof num_defects == 'undefined') { num_defects = 0 };
|
|
|
|
|
if(typeof noise == 'undefined') { noise = 0 };
|
|
|
|
|
var r = generate(
|
|
|
|
|
'ImjJA',
|
|
|
|
|
[
|
|
|
|
|
['A', 'B-A-B'],
|
|
|
|
|
['B', 'A+B+A']
|
|
|
|
|
],
|
|
|
|
|
8
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if(num_defects > 0) {
|
|
|
|
|
r = r.split('');
|
|
|
|
|
for(var i=0; i<num_defects; i++) {
|
|
|
|
|
r[Math.floor(Math.random()*r.length)] = '*';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var actions = {
|
|
|
|
|
// TODO properly initialize draw state and remove this
|
|
|
|
|
'm': draw_forward(0.001),
|
|
|
|
|
'A': draw_forward(),
|
|
|
|
|
'B': draw_forward(),
|
|
|
|
|
'I': draw_angle_init(Math.PI/3),
|
|
|
|
|
'-': draw_angle_turn(-1),
|
|
|
|
|
'+': draw_angle_turn(1),
|
|
|
|
|
'*': draw_angle_add(0.001),
|
|
|
|
|
'j': draw_set_turn_noise(noise/10),
|
|
|
|
|
'J': draw_set_length_noise(noise),
|
|
|
|
|
};
|
|
|
|
|
var p = draw(r, actions);
|
|
|
|
|
p.scale(1.5);
|
|
|
|
|
p.translate(new Point(150, 150));
|
|
|
|
|
p.strokeWidth = 1;
|
|
|
|
|
p.strokeColor = '#ff00ff';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/************************************************
|
|
|
|
|
* Sierpinski Triangle
|
|
|
|
|
************************************************/
|
|
|
|
|
|
|
|
|
|
function sierpinski(noise) {
|
|
|
|
|
if(typeof noise == 'undefined') { noise = 0 };
|
|
|
|
|
project.clear();
|
|
|
|
|
var r = generate(
|
|
|
|
|
'ImjJF-G-G',
|
|
|
|
|
[
|
|
|
|
|
['F', 'F-G+F+G-F'],
|
|
|
|
|
['G', 'GG']
|
|
|
|
|
],
|
|
|
|
|
6
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
var p = draw(
|
|
|
|
|
r,
|
|
|
|
|
{
|
|
|
|
|
'F': draw_forward(),
|
|
|
|
|
'G': draw_forward(),
|
|
|
|
|
'I': draw_angle_init(2*Math.PI/3),
|
|
|
|
|
'-': draw_angle_turn(-1),
|
|
|
|
|
'+': draw_angle_turn(1),
|
|
|
|
|
'j': draw_set_turn_noise(noise/10),
|
|
|
|
|
'J': draw_set_length_noise(noise),
|
|
|
|
|
// TODO properly initialize draw state and remove this
|
|
|
|
|
'm': draw_forward(0.001),
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
p.scale(5);
|
|
|
|
|
p.translate(new Point(200, 200));
|
|
|
|
|
p.strokeWidth = 1;
|
|
|
|
|
p.strokeColor = '#ff00ff';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/************************************************
|
|
|
|
|
* Barnsley Fern
|
|
|
|
|
************************************************/
|
|
|
|
|
|
|
|
|
|
function barnsley_fern(num_defects) {
|
|
|
|
|
project.clear();
|
|
|
|
|
if(typeof num_defects == 'undefined') { num_defects = 0 };
|
|
|
|
|
var r = generate(
|
|
|
|
|
'iIXF',
|
|
|
|
|
[
|
|
|
|
|
['X', 'F+[[X]-X]-F[-FX]+X'],
|
|
|
|
|
['F', 'FF']
|
|
|
|
|
],
|
|
|
|
|
6
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
var n = 0;
|
|
|
|
|
while(n < num_defects) {
|
|
|
|
|
var rnd = Math.floor(Math.random()*r.length);
|
|
|
|
|
if((r[rnd] != '[') & (r[rnd] != ']')) {
|
|
|
|
|
r[rnd] = '*';
|
|
|
|
|
if(Math.random() > 0.9) {
|
|
|
|
|
if(Math.random() < 0.5) {
|
|
|
|
|
r.splice(rnd, 0, '+');
|
|
|
|
|
} else {
|
|
|
|
|
r.splice(rnd, 0, '-');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
n += 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log(r);
|
|
|
|
|
var p = draw(
|
|
|
|
|
r,
|
|
|
|
|
{
|
|
|
|
|
'F': draw_forward(),
|
|
|
|
|
'i': draw_set_dir(Math.PI),
|
|
|
|
|
'I': draw_angle_init(25/180 * Math.PI),
|
|
|
|
|
'*': draw_angle_add((Math.random() - 0.5) * 0.01),
|
|
|
|
|
'-': draw_angle_turn(-1),
|
|
|
|
|
'+': draw_angle_turn(1),
|
|
|
|
|
'[': draw_state_push(),
|
|
|
|
|
']': draw_state_pop()
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
p.scale(2);
|
|
|
|
|
p.translate(new Point(200, 300));
|
|
|
|
|
p.strokeWidth = 1;
|
|
|
|
|
p.strokeColor = '#ff00ff';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/************************************************
|
|
|
|
|
* some other tree
|
|
|
|
|
************************************************/
|
|
|
|
|
|
|
|
|
|
function other_tree() {
|
|
|
|
|
project.clear();
|
|
|
|
|
if(typeof num_defects == 'undefined') { num_defects = 0 };
|
|
|
|
|
var r = generate(
|
|
|
|
|
'iIjJX',
|
|
|
|
|
[
|
|
|
|
|
//['X', 'F[-lfX][.cfX][+rfX]'],
|
|
|
|
|
['X', ['F[-lfX][.cfX][+rfX]', 'F[-lfX]m[.cfX][+rfX]']],
|
|
|
|
|
],
|
|
|
|
|
8
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
console.log(r);
|
|
|
|
|
var p = draw(
|
|
|
|
|
r,
|
|
|
|
|
{
|
|
|
|
|
'F': draw_forward(),
|
|
|
|
|
'f': draw_forward(0.5),
|
|
|
|
|
'm': draw_forward(0.5),
|
|
|
|
|
|
|
|
|
|
'l': draw_stepsize_mul(0.7),
|
|
|
|
|
'c': draw_stepsize_mul(0.8),
|
|
|
|
|
'r': draw_stepsize_mul(0.7),
|
|
|
|
|
|
|
|
|
|
'i': draw_set_dir(Math.PI),
|
|
|
|
|
'I': draw_angle_init(25/180 * Math.PI),
|
|
|
|
|
'j': draw_set_turn_noise(1),
|
|
|
|
|
'J': draw_set_length_noise(1),
|
|
|
|
|
|
|
|
|
|
'-': draw_angle_turn(-1),
|
|
|
|
|
'+': draw_angle_turn(1),
|
|
|
|
|
'.': draw_angle_turn(0.1),
|
|
|
|
|
'[': draw_state_push(),
|
|
|
|
|
']': draw_state_pop(),
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
p.scale(80);
|
|
|
|
|
p.translate(new Point(300, 300));
|
|
|
|
|
p.strokeWidth = 1;
|
|
|
|
|
p.strokeColor = '#ff00ff';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/************************************************
|
|
|
|
|
*
|
|
|
|
|
************************************************/
|
|
|
|
|
|
|
|
|
|
globals.dragon_curve = dragon_curve;
|
|
|
|
|
globals.sierpinski2 = sierpinski2;
|
|
|
|
|
globals.sierpinski = sierpinski;
|
|
|
|
|
globals.barnsley_fern = barnsley_fern;
|
|
|
|
|
globals.other_tree = other_tree;
|
|
|
|
|
|
|
|
|
|
globals.get_svg = function() {
|
|
|
|
|
return project.exportSVG({asString: true});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
//document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
window.globals = {}
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
draw();
|
|
|
|
|
document.getElementById('redraw').addEventListener('click', function() {
|
|
|
|
|
draw();
|
|
|
|
|
});
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
paper.install(window);
|
|
|
|
|
console.log(window.globals);
|
|
|
|
|
document.getElementById('download-svg').addEventListener('click', function() {
|
|
|
|
|
var svgdata = 'data:image/svg+xml;utf8,' + encodeURIComponent(window.globals.get_svg());
|
|
|
|
|
var a = document.createElement('a');
|
|
|
|
|
a.download = 'export.svg';
|
|
|
|
|
a.href = svgdata;
|
|
|
|
|
document.body.appendChild(a);
|
|
|
|
|
a.click();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('dragon-curve').addEventListener('click', function() {
|
|
|
|
|
window.globals.dragon_curve();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('dragon-curve-random-angles').addEventListener('click', function() {
|
|
|
|
|
window.globals.dragon_curve('random-angles');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('sierpinski2').addEventListener('click', function() {
|
|
|
|
|
window.globals.sierpinski2(0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('sierpinski2-defects').addEventListener('click', function() {
|
|
|
|
|
window.globals.sierpinski2(10);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('sierpinski2-noise').addEventListener('click', function() {
|
|
|
|
|
window.globals.sierpinski2(0, 0.2);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('sierpinski').addEventListener('click', function() {
|
|
|
|
|
window.globals.sierpinski();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('sierpinski-noise').addEventListener('click', function() {
|
|
|
|
|
window.globals.sierpinski(0.2);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('barnsley-fern').addEventListener('click', function() {
|
|
|
|
|
window.globals.barnsley_fern();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('barnsley-fern-defects').addEventListener('click', function() {
|
|
|
|
|
window.globals.barnsley_fern(150);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('other-tree').addEventListener('click', function() {
|
|
|
|
|
window.globals.other_tree();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<button id="download-svg">download svg</button>
|
|
|
|
|
<button id="dragon-curve">dragon curve</button>
|
|
|
|
|
<button id="dragon-curve-random-angles">dragon curve (random angles)</button>
|
|
|
|
|
<button id="sierpinski2">sierpinski2</button>
|
|
|
|
|
<button id="sierpinski2-defects">sierpinski2 (random defects)</button>
|
|
|
|
|
<button id="sierpinski2-noise">sierpinski2 (noise)</button>
|
|
|
|
|
<button id="sierpinski">sierpinski</button>
|
|
|
|
|
<button id="sierpinski-noise">sierpinski (noise)</button>
|
|
|
|
|
<button id="barnsley-fern">barnsley fern</button>
|
|
|
|
|
<button id="barnsley-fern-defects">barnsley fern (random defects)</button>
|
|
|
|
|
<button id="other-tree">other tree</button>
|
|
|
|
|
<hr>
|
|
|
|
|
<canvas id="canvas" style="width: 700px; height: 700px;" resize></canvas>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
