drawing with javascript ['p5js'] Delivery Random

About Delivery Random

Delivery Random is my first project that uses random numbers!

I was so suprised when I found out how easy it was to generate random numbers.

If you want to know how, write "random" then put your numbers in it.

Example: random(2, 8).

It will generate a number between them both. It will between 2 and 8.

What was wrong with the original Delivery

For the original Delivery, I had to create code for 16 rectangles and their features. I had to keep writing the code for the eyes and lines, it was very annoying.

What I changed to make Delivery better

I used random numbers to change the size, rotation and other stuff like that so that every time you refresh it loads a different rectangle.

But then I made it so that it changes every 2 seconds.

What I need to improve on Delivery Random

I need to make a rule to make the eyes and mouth inside the rectangle.

The smallest the rectangle can be is 20 so we start with ten each side, but the smallest the eyes can be is 3 and the biggest the eyes can be is 17 so the eyes can come out of the square sometimes.

Look out for Delivery Rules later.

function setup() {
  margin = 50
  createCanvas(margin + 100 + margin, margin + 100 + margin).parent("container");
  angleMode(DEGREES);
  rectMode(CENTER);
  frameRate(0.5);
  draw();
}

function draw() {
  clear();
  background(0, 250, 200);
  rotation = random(-45, 45);
  rectWidth = random(20, 70);
  circleX = random(3, 17);
  circleY = random(-16, 0);
  circleD = random(4, 8);
  lineX1 = random(-10, 8);
  lineY1 = random(-6, 25);
  lineX2 = random(-10, 14);
  lineY2 = random(-7, 20);

  push();
  translate(50 + 50, 50 + 50);
  rotate(rotation);
  rect(0, 0, rectWidth, rectWidth);
  circle(-circleX, circleY, circleD);
  circle(circleX, circleY, circleD);
  line(lineX1, lineY1, lineX2, lineY2);
  pop();
}