frederic
/
generative-plotter-thingies
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
22 Commits
1 Branch
0 Tags
564 KiB
 
 
Tree: 4fd0f149fd
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4fd0f149fd'
${ noResults }
generative-plotter-thingies/lindenmayer-system/lindenmeyer-system.html

343 lines
9.1 KiB
Raw Blame History

<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>