stick figure

A simple stick figure. Can be adjusted in size and position.

sketch.js

var x = 0;
  var y = 12;
  var w = 42; // make him bigger or smaller
  var h = w; // distort by changing the h seperatly
  var bmi = 40; // body mass index

// getting started with p5js
function setup(){
  // executed once
  colorMode(HSB,360,100,100,100);
var canvas = createCanvas(400,400);
canvas.parent('sketch');
  x = width/2;
  y = height/2;
  fill(0);
  strokeWeight(3);
  // draw some simple shapes
  // hint! The order in which you draw is important
  // change x and y to move him around
  // a line takes 4 values the starting point and the end point
  line(x - w, y + h, x +w, y+h);
  // a ellipse always takes 4 values as parameter
  ellipse(x, y, w, h);
  // a point just two
  strokeWeight(10);
  stroke(100,0,100);
  point(x, y); // look he has a nose
  stroke(0);
  strokeWeight(3);
  // a rectangle also takes 4 values like the ellipse
  // but draws from its upper left corner
  rect(x-bmi/2, y + h, bmi, h);
  // you can also draw free forms by using vertecies
  noFill();
  beginShape();
  vertex(x - w, y + h*3);
  vertex(x - w, y + h*2);
  vertex(x + w, y + h*2);
  vertex(x + w, y + h*3);
  endShape();
}

function draw(){
  // executed all the time
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{page.title}</title>
    <meta name="description" content="something">
    <meta name="author" content="me">
  </head>
  <body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
    <div id="sketch"></div>
  </body>
</html>