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.
16 Commits
1 Branch
0 Tags
564 KiB
Tree: 2e7bf056b8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2e7bf056b8'
${ noResults }
generative-plotter-thingies/lindenmayer-system/lindenmeyer-system.html

338 lines
8.9 KiB
Raw Normal View History Unescape

initial commit
6 years ago
<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'.split(''),
[
['X'.split(''), 'X+YF+'.split('')],
['Y'.split(''), '-FX-Y'.split('')]
],
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) {
project.clear();
if(typeof num_defects == 'undefined') { num_defects = 0 };
var r = generate(
'IA'.split(''),
[
['A'.split(''), 'B-A-B'.split('')],
['B'.split(''), 'A+B+A'.split('')]
],
8
);
for(var i=0; i<num_defects; i++) {
r[Math.floor(Math.random()*r.length)] = '*';
}
var actions = {
'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),
};
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() {
project.clear();
var r = generate(
'IF-G-G'.split(''),
[
['F'.split(''), 'F-G+F+G-F'.split('')],
['G'.split(''), 'GG'.split('')]
],
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),
}
);
p.scale(5);
p.translate(new Point(200, 200));
p.strokeWidth = 1;
p.strokeColor = '#ff00ff';
}
add barnsley fern
6 years ago
/************************************************
* Barnsley Fern
************************************************/
add some more random
6 years ago
function barnsley_fern(num_defects) {
add barnsley fern
6 years ago
project.clear();
add some more random
6 years ago
if(typeof num_defects == 'undefined') { num_defects = 0 };
add barnsley fern
6 years ago
var r = generate(
let fern grow upward
6 years ago
'iIXF'.split(''),
add barnsley fern
6 years ago
[
['X'.split(''), 'F+[[X]-X]-F[-FX]+X'.split('')],
['F'.split(''), 'FF'.split('')]
],
6
);
add some more random
6 years ago
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;
}
}
add barnsley fern
6 years ago
console.log(r);
var p = draw(
r,
{
'F': draw_forward(),
let fern grow upward
6 years ago
'i': draw_set_dir(Math.PI),
add some more random
6 years ago
'I': draw_angle_init(25/180 * Math.PI),
'*': draw_angle_add((Math.random() - 0.5) * 0.01),
add barnsley fern
6 years ago
'-': draw_angle_turn(-1),
'+': draw_angle_turn(1),
'[': draw_state_push(),
']': draw_state_pop()
}
);
p.scale(2);
let fern grow upward
6 years ago
p.translate(new Point(200, 300));
add barnsley fern
6 years ago
p.strokeWidth = 1;
p.strokeColor = '#ff00ff';
}
add some other tree
5 years ago
/************************************************
* some other tree
************************************************/
function other_tree(num_defects) {
project.clear();
if(typeof num_defects == 'undefined') { num_defects = 0 };
var r = generate(
'iIjX'.split(''),
[
['X'.split(''), 'F[-lfX][cfX][+rfX]'.split('')],
//['F'.split(''), 'FF'.split('')],
//['L'.split(''), 'LL'.split('')],
//['C'.split(''), 'CC'.split('')],
//['R'.split(''), 'RR'.split('')],
],
8
);
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(),
'f': 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),
'*': 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(60);
p.translate(new Point(200, 200));
p.strokeWidth = 1;
p.strokeColor = '#ff00ff';
}
initial commit
6 years ago
/************************************************
*
************************************************/
globals.dragon_curve = dragon_curve;
globals.sierpinski2 = sierpinski2;
globals.sierpinski = sierpinski;
add barnsley fern
6 years ago
globals.barnsley_fern = barnsley_fern;
add some other tree
5 years ago
globals.other_tree = other_tree;
initial commit
6 years ago
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('sierpinski').addEventListener('click', function() {
window.globals.sierpinski();
});
add some more random
6 years ago
document.getElementById('barnsley-fern').addEventListener('click', function() {
add barnsley fern
6 years ago
window.globals.barnsley_fern();
});
add some more random
6 years ago
document.getElementById('barnsley-fern-defects').addEventListener('click', function() {
window.globals.barnsley_fern(150);
});
add some other tree
5 years ago
document.getElementById('other-tree').addEventListener('click', function() {
window.globals.other_tree();
});
initial commit
6 years ago
}
</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="sierpinski">sierpinski</button>
add some more random
6 years ago
<button id="barnsley-fern">barnsley fern</button>
<button id="barnsley-fern-defects">barnsley fern (random defects)</button>
add some other tree
5 years ago
<button id="other-tree">other tree</button>
initial commit
6 years ago
<hr>
<canvas id="canvas" style="width: 500px; height: 500px;" resize></canvas>
</body>
</html>