-
Notifications
You must be signed in to change notification settings - Fork 0
/
sketch.js
150 lines (128 loc) · 2.86 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
let brushSize = 20;
let f = 0.5;
let spring = 1; //friction
let friction = 0.45;
let v = 0.5;
let r = 0;
let vx = 0;
let vy = 0;
let splitNum = 100;
let diff = 10;
let x = 0;
let y = 0;
let newPath = true;
let oldR, oldX, oldY;
function setup() {
createCanvas(600, 600);
setInterval(() => {
background(243, 244, 234);
loadJSON("/garden", gotGraden);
}, 10000);
}
function draw() {}
let drawing;
function gotGraden(data) {
//console.log(data);
let drawing = data.image.drawing;
let sentence = data.sentence;
//console.log(drawing);
// p.html(sentence);
// Make the drawing
push();
translate(200, 100);
inkDrawing(drawing);
pop();
push();
translate(200, 100);
scale(1, 1.5);
for (let path of drawing) {
noFill();
blendMode(MULTIPLY);
strokeCap(ROUND);
stroke(203, 201, 196, 80);
strokeWeight(30);
beginShape();
for (let i = 0; i < path[0].length; i++) {
let x = path[0][i];
let y = path[1][i];
vertex(x, y);
}
endShape();
}
pop();
push();
fill(0);
textSize(14);
textFont("Georgia");
textAlign(CENTER, CENTER);
rectMode(CENTER, CENTER);
text(sentence, width / 2, height - height / 4, width - 100);
pop();
}
function inkDrawing(drawing) {
// transform drawing data structure for this function
let mypaths = drawing.map((d) =>
d[0].map((e, index) => {
return { x: e, y: d[1][index] };
})
);
for (let drawing of mypaths) {
let i = 0;
let path = drawing[0]; // first parth of drawing
let pX = path.x;
let pY = path.y;
for (path of drawing) {
if (i++ === 0) {
continue; // Ignore the first pass
}
// Inking stroke settings
// Setting value of x and y
vx += (path.x - x) * spring;
vy += (path.y - y) * spring;
vx *= friction;
vy *= friction;
// Do something to v
v += sqrt(vx * vx + vy * vy) - v;
v *= 0.55;
// Do something to r
oldR = r;
r = brushSize - v;
// Random numbers
var num = random(0.1, 0.8);
var num2 = random(0.1, 0.8);
// Do something to r
oldR += (r - oldR) / splitNum;
if (oldR < 1) {
oldR = 1;
}
// Set variables
x = path.x;
y = path.y;
let oldX = pX;
let oldY = pY;
// Change the diff (Affects stroke)
diff = 4;
// Setting the stroke part
stroke("black");
strokeWeight(oldR * 0.35);
// Drawing Part
line(pX, pY, path.x, path.y);
line(path.x + num, path.y + num, pX + num, pY + num);
line(
x + diff * num2,
y + diff * num2,
oldX + diff * num2,
oldY + diff * num2
); // ADD
line(
x - diff * num,
y - diff * num,
oldX - diff * num,
oldY - diff * num
); // ADD
// Update the points
pX = path.x;
pY = path.y;
}
}
}