Skip to content
Advertisement

p5.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 something like this for example:

enter image description here

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>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement