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:
function setup() { createCanvas(500, 500); frameRate(30); } function draw() { x1 = random(500); y1 = random(500); x2 = random(500); y2 = random(500); line(x1, y1, x2, y2); }
<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
var x1, y1, x2=250, y2=250, maxVal = 500; function setup() { createCanvas(maxVal, maxVal); frameRate(30); } // just uncomment one line, comment another and do restart please // var a = 2, b = 1; var a = 40, b = 20; // var a = 100, b = 50; //var a = 200, b = 100; function draw() { function tryFix(val) { let res = val < 0 ? 0 : val > maxVal ? maxVal : val; return res; } dx = random(a)-b; dy = random(a)-b; x1 = x2; y1 = y2; x = x2 + dx; y = y2 + dy; x = tryFix(x); y = tryFix(y); x2 = x; y2 = y; line(x1, y1, x2, y2); }
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>