var steps = 1;

var div;

​

function setup() {

  createCanvas(windowWidth,windowHeight);

  background(255);

  turtle = new Turtle();

  turtle.penDown();

  turtle.setColor(color(0,0,0,10));

  turtle.setWeight(1);

  turtle.setAngleMode(DEGREES);

  //div = createDiv('').size(100, 100);

}

​

​

function draw() {

  for(var i = 0; i < 5; i++){

    turtle.moveForward(5);

    //turtle.rotate(floor(random(25))*15);

    turtle.rotate((PI*(floor(random()*4)))/4);

    turtle.border();

    //turtle.draw();

    steps++; 

    //div.html('Steps: '+steps);    

  }

}

​

class Turtle {

  constructor(x,y){

    this.pos = createVector(random(width),random(height));

    this.color = 0;

    this.heading = 0;

    this.pen = true;

    this.weight = 0;

  }

  setColor(c){

    this.color = c;

  }

  setAngleMode(type){

    angleMode(type);

  }

  setWeight(w){

    this.weight = w;

  }

  penDown(){

    this.pen = true;

  }

  penUp(){

    this.pen = false;

  }

  rotate(a){

    this.heading += a;

    //this.draw();

  }

  moveForward(d){

    var futureX = d * sin(this.heading) + this.pos.x;

    var futureY = -d * cos(this.heading) + this.pos.y;

    if(this.pen){

      stroke(this.color);

      strokeWeight(this.weight);

      line(this.pos.x,this.pos.y,futureX,futureY);

    }

    this.pos.x = futureX;

    this.pos.y = futureY;

    //this.draw();

  }

  draw(){

    var theta = this.heading;

    push();

    translate(this.pos.x,this.pos.y);

    rotate(theta);

    strokeWeight(1);

    beginShape();

    vertex(0, -5 * 2);

    vertex(-5, 5 * 2);

    vertex(5, 5 * 2);

    endShape(CLOSE);

    pop();

  }

  border(){

  if (this.pos.x < -1) {

    this.pos.x = width + 1;

  }

​

  if (this.pos.x > width + 1) {

    this.pos.x = -1;

  }

​

  if (this.pos.y > height + 1) {

    this.pos.y = -1;

  }

​

  if (this.pos.y < -1) {

    this.pos.y = height + 1;

  }

  }

}

​

​