frederic
/
generative-plotter-thingies
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

use meaningful file names, prepare parametrization

master
Fr3deric 6 years ago
parent
ea65fc493b
commit
aae5ceb5a1
3 changed files with 116 additions and 115 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      chaostest/chaostest3.html
  2. 52
      chaostest/connected-lines.html
  3. 64
      chaostest/connected-lines.js

115
chaostest/chaostest3.html
Unescape View File

@ -1,115 +0,0 @@ @@ -1,115 +0,0 @@
<title>JavaScript <=> PaperScript example</title>
<code mode="text/html">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var xstart = Math.random();
var ystart = Math.random();
//var xstart = 0.976119763841021;
//var ystart = 0.06095897568349018;
//var xstart = 0.981709002734148;
//var ystart = 0.7482912451397156;
//var xstart = 0.01408766142248663
//var ystart = 0.5826524694499656;
var scale = 500;
var num_steps = 7;
var fac = 0.0005;
var num_steps = 5;
var fac = 0.05;
var lines = [];
for(var i=0; i<2; i++) {
var x = xstart + i*fac;
var y = ystart + i*fac;
var path = new Path({strokeWidth: 1, strokeColor: 'black'});
for(var s=0; s<num_steps; s++) {
x = (4*x*(1-x)) % 1;
y = (x+y) % 1;
var p = new Point(x*scale, y*scale);
path.add(p);
console.log(p);
}
lines.push(path);
}
lines[0].strokeWidth = 5;
lines[1].strokeWidth = 0;
//lines[1].fullySelected = true;
for(var i=0; i<num_steps-1; i++) {
var o0start = lines[0].getOffsetOf(lines[0].segments[i].point);
var o0end = lines[0].getOffsetOf(lines[0].segments[i+1].point);
var o1start = lines[1].getOffsetOf(lines[1].segments[i].point);
var o1end = lines[1].getOffsetOf(lines[1].segments[i+1].point);
var num_steps2_0 = (o0end - o0start) / 7;
var num_steps2_1 = (o1end - o1start) / 7;
var num_steps2 = Math.min(num_steps2_0, num_steps2_1);
console.log(num_steps2);
for(var j=0; j<num_steps2; j++) {
var p0 = lines[0].getPointAt(o0start + (o0end-o0start) * (j/num_steps2));
var p1 = lines[1].getPointAt(o1start + (o1end-o1start) * (j/num_steps2));
var path = new Path.Line({
from: p0, to: p1,
strokeWidth: 2,
strokeColor: 'black'
});
if(path.length < 5) {
path.removeSegments();
delete path;
}
}
}
globals.get_svg = function() {
return project.exportSVG({asString: true});
}
console.log("start: ", xstart, ystart);
</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();
});
}
</script>
</head>
<body>
<button id="download-svg">download svg</button>
<canvas id="canvas" style="width: 500px; height: 500px;" resize></canvas>
</body>
</html>

52
chaostest/connected-lines.html
Unescape View File

@ -0,0 +1,52 @@ @@ -0,0 +1,52 @@
<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" src="connected-lines.js" canvas="canvas"></script>
<script type="text/paperscript" canvas="canvas">
function draw() {
paper.project.clear();
var grp = connected_lines();
grp.scale(500, new Point(0,0));
}
globals.draw = draw;
globals.get_svg = function() {
return project.exportSVG({asString: true});
}
</script>
<script type="text/javascript">
window.globals = {}
window.onload = function() {
paper.install(window);
window.globals.draw();
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('draw').addEventListener('click', function() {
window.globals.draw();
});
}
</script>
</head>
<body>
<canvas id="canvas" style="width: 500px; height: 500px;" resize></canvas>
<hr>
<button id="download-svg">download svg</button>
<button id="draw">draw</button>
</body>
</html>

64
chaostest/connected-lines.js
Unescape View File

@ -0,0 +1,64 @@ @@ -0,0 +1,64 @@
function connected_lines_get_rnd_params() {
return {
start: new Point(Math.random(), Math.random()),
offs: new Point(0.05, 0.05),
num_steps: 5,
};
}
function connected_lines(params) {
if(typeof params == 'undefined') {
var params = connected_lines_get_rnd_params();
}
var lines = [];
for(var i=0; i<2; i++) {
var x = params.start.x + i*params.offs.x;
var y = params.start.y + i*params.offs.y;
var path = new paper.Path({strokeWidth: 5, strokeColor: 'black'});
for(var s=0; s<params.num_steps; s++) {
x = (4*x*(1-x)) % 1;
y = (x+y) % 1;
var p = new paper.Point(x, y);
path.add(p);
}
lines.push(path);
}
var conlines = new paper.Group();
for(var i=0; i<params.num_steps-1; i++) {
// TODO use less variables?
var o0start = lines[0].getOffsetOf(lines[0].segments[i].point);
var o0end = lines[0].getOffsetOf(lines[0].segments[i+1].point);
var o1start = lines[1].getOffsetOf(lines[1].segments[i].point);
var o1end = lines[1].getOffsetOf(lines[1].segments[i+1].point);
// TODO param: conn lines density
var num_steps2_0 = (o0end - o0start) / (7/500);
var num_steps2_1 = (o1end - o1start) / (7/500);
var num_steps2 = Math.min(num_steps2_0, num_steps2_1);
for(var j=0; j<num_steps2; j++) {
var p0 = lines[0].getPointAt(o0start + (o0end-o0start) * (j/num_steps2));
var p1 = lines[1].getPointAt(o1start + (o1end-o1start) * (j/num_steps2));
var path = new paper.Path.Line({
from: p0, to: p1,
strokeWidth: 2,
strokeColor: 'black'
});
// TODO param: conn lines min length
if(path.length < 0.001) {
path.removeSegments();
delete path;
} else {
conlines.addChild(path);
}
}
}
lines[1].removeSegments();
delete lines[1];
return new paper.Group([lines[0], conlines]);
}
Write Preview
Loading…
Cancel
Save