I would like to let the computer draw something. It should look like a human is drawing something on a paper, with random values.
This is my try:
JavaScript
x
12
12
1
function setup() {
2
createCanvas(500, 500);
3
frameRate(30);
4
}
5
6
function draw() {
7
x1 = random(500);
8
y1 = random(500);
9
x2 = random(500);
10
y2 = random(500);
11
line(x1, y1, x2, y2);
12
}
JavaScript
1
1
1
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
So at the moment, it just puts random lines on top of each other. But it should result something like this for example:
How is it possible to code it like that?
Advertisement
Answer
Hope it helps a little. Still not perfect but possible approach to play with and further advance 😉 Have a fun with
JavaScript
1
35
35
1
var x1, y1, x2=250, y2=250, maxVal = 500;
2
3
function setup() {
4
createCanvas(maxVal, maxVal);
5
frameRate(30);
6
}
7
8
// just uncomment one line, comment another and do restart please
9
// var a = 2, b = 1;
10
var a = 40, b = 20;
11
// var a = 100, b = 50;
12
//var a = 200, b = 100;
13
14
function draw() {
15
16
function tryFix(val) {
17
18
let res = val < 0 ? 0 : val > maxVal ? maxVal : val;
19
20
return res;
21
22
}
23
24
dx = random(a)-b;
25
dy = random(a)-b;
26
x1 = x2;
27
y1 = y2;
28
x = x2 + dx;
29
y = y2 + dy;
30
x = tryFix(x);
31
y = tryFix(y);
32
x2 = x;
33
y2 = y;
34
line(x1, y1, x2, y2);
35
}
JavaScript
1
1
1
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>