/
sketch.js
74 lines (58 loc) · 2.09 KB
/
sketch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
'use strict'
const r = new Rune({
container: "body",
width: 794,
height: 560,
debug: true
});
function graphic() {
// Page setup
const margin = 50;
const w = r.width - margin * 2;
const h = r.height - margin * 2;
const lGrp = r.group(margin, margin);
const rGrp = r.group(margin, margin);
// Sketch parameters
const lines = 30; // How many lines
const lineSep = 5; // Distance between lines
const yStart = (h - lines * lineSep) / 2; // y-height the liens start at
const detail = 300; // Detail points per line
const splitVariance = 10; // Max width of split randomness
const split = Rune.random(w / 3, 2 * w / 3); // Centre position of split
const anchor = new Rune.Vector(split, yStart + (lines * lineSep)); // Point to rotate side around
const rot = -10; // Rotation amount (deg)
// Loop over lines
for (let line = 0; line < lines; line++) {
// Get y-coordinate of line
const y = line * lineSep;
// Start a path
let p = r.path(0, yStart + y, lGrp).fill("none")
// Determine random split point
const dSplit = split + Rune.random(-splitVariance, splitVariance);
// Variable to track if split has happened yet
let splat = false;
// Loop over detail points
for (let d = 0; d < detail; d++) {
// Get x-coordiante of detail point
const x = d * w / detail;
// Check if split occurs
if (x > dSplit && !splat) {
// If so, start a new path
p = r.path(x, yStart + y, rGrp).fill("none");
splat = true; // and update tracker variable
}
// Draw line to next point (with correction if split has happened)
if (!splat) {
p.lineTo(x, 0);
} else {
p.lineTo(x - dSplit, 0);
}
}
}
// Rotate groups
lGrp.rotate(rot, anchor.x, anchor.y)
rGrp.rotate(-rot, anchor.x, anchor.y)
}
// Draw it
graphic();
r.draw();