drawing with javascript ['p5js'] Delivery

My first drawing with squares - big and small!

About Delivery

Before I made my delivery on JaveScript, I drew it on paper!

It was quite fun, but I also made some silly mistakes.

A lot of squares, don't you think! 16!

My dad is going to help me put it through the pen plotter.

How I made it

First I drew a square, then drew the eyes and mouth. I drew all 16 then put it on my website.

Then, I will put it through the penplotter.

The only colour is white.

function setup() {    
    margin = 50
    createCanvas(margin + 400 + margin, margin + 400 + margin).parent("container");
    angleMode(DEGREES);
    rectMode(CENTER)
}
function draw() {
  push()
  fill('transparent')
  rect(250, 250, 500, 500)
  rect(250, 250, 400, 400)
  pop()

  push()
  translate(50 + 50, 50 + 50)
  rotate(-30)
  rect(0, 0, 40, 40)
  circle(-5, -10, 5)
  circle(5, -10, 5)
  line(0, 0, 0, 10)
  pop()

  push()
  translate(150 + 50, 50 + 50)
  rotate(21)
  rect(0, 10, 50, 50)
  circle(-9, 0, 5)
  circle(9, 0, 5)
  line(-10, 15, 10, 20)
  pop()

  push()
  translate(250 + 50, 50 + 50)
  rotate(-20)
  rect(5, 0, 40, 40)
  circle(-7, -7, 5)
  circle(15, -9, 5)
  line(-9, 10, 18, 10)
  pop()

  push()
  translate(350 + 50, 50 + 50)
  rotate(18)
  rect(0, 0, 40, 40)
  circle(-10, -7, 5)
  circle(13, -9, 5)
  line(0, 7, 0, -7)
  pop()

  push()
  translate(50 + 50, 150 + 50)
  rotate(21)
  rect(0, 0, 50, 50)
  circle(-10, -7, 5)
  circle(10, -9, 5)
  line(0, 7, 0, -7)
  pop()

  push()
  translate(150 + 50, 150 + 50)
  rotate(-18)
  rect(0, 0, 20, 20)
  circle(-3, -5, 3)
  circle(7, -5, 3)
  line(-4, 3, 0, 4)
  pop()

  push()
  translate(250 + 50, 150 + 50)
  rect(0, -4, 70, 70)
  circle(-17, -16, 5)
  circle(15, -16, 5)
  line(0, -6, 0, 14)
  pop()

  push()
  translate(350 + 50, 150 + 50)
  rotate(-45)
  rect(0, 0, 30, 30)
  circle(-9, -7, 5)
  circle(10, -7, 5)
  line(-7, 10, 8, 10)
  pop()

  push()
  translate(50 + 50, 250 + 50)
  rotate(2)
  rect(0, 0, 30, 30)
  circle(-9, -7, 5)
  circle(10, -7, 5)
  line(-7, 10, 3, 10)
  pop()

  push()
  translate(150 + 50, 250 + 50)
  rotate(21)
  rect(0, 0, 45, 45)
  circle(-9, -7, 5)
  circle(10, -7, 5)
  line(-7, 10, 8, 4)
  pop()

  push()
  translate(250 + 50, 250 + 50)
  rotate(-45)
  rect(0, 0, 30, 30)
  circle(-7, -7, 5)
  circle(7, -7, 5)
  line(-5, 10, 4, 10)
  pop()

  push()
  translate(350 + 50, 250 + 50)
  rotate(40)
  rect(0, 0, 65, 65)
  circle(-17, -10, 5)
  circle(17, -10, 5)
  line(-10, 25, 14, 4)
  pop()

  push()
  translate(50 + 50, 350 + 50)
  rotate(-45)
  rect(0, 0, 45, 45)
  circle(-15, -10, 5)
  circle(10, -12, 5)
  line(8, 19, -10, -3)
  pop()

  push()
  translate(150 + 50, 350 + 50)
  rotate(0)
  rect(0, 0, 50, 50)
  circle(-10, -10, 5)
  circle(10, -10, 5)
  line(0, 7, 0, -7)
  pop()

  push()
  translate(250 + 50, 350 + 50)
  rotate(27)
  rect(0, 0, 50, 50)
  circle(-10, -10, 5)
  circle(10, -10, 5)
  line(-2, 0, 3, 0)
  pop()

  push()
  translate(350 + 50, 350 + 50)
  rotate(0)
  rect(0, 0, 20, 20)
  circle(-7, -7, 3)
  circle(7, -7, 3)
  line(-3, 0, 3, 0)
  pop()

  noLoop();
}