0
143
Viewsp5.js: Let the computer draw something
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 in one long connected scribble with curves, like this:
How is it possible to code it like that?
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question