var leftKnobY;

var leftKnobAngle;

var rightKnobX;

var rightKnobY;

var rightKnobAngle;

var knobRadius;

​

var penArrX=[];      // Array of Pen Locations

var penArrY=[];

​

var penX;            // Location of the drawing dot

var penY;

var speed=1;          // Speed of the pen;

​

var flag=true;        // Flag to control left/ right

var count=0;          // Control when to flip flag

​

var size=2;

​

function setup() {

  createCanvas(500, 400);

  leftKnobX=50;

  leftKnobY=height-25;

  leftKnobAngle=270;

  rightKnobX=width-50;

  rightKnobY=height-25;

  rightKnobAngle=270;

  knobRadius=40;

  background(220);

  // penX=51;

  // penY=51;

  penX=width/2;

  penY=height/2;

  penArrX.push(penX);

  penArrY.push(penY);

}

​

function up()

  {

  rightKnobAngle+=speed;

  for(var i=0; i<speed; i++)

    {

    if(penY>51)

      {

      penY-=1;

      penArrY.push(penY);

      penArrX.push(penX);

        }    

      }

  }

function down()

  {

  rightKnobAngle-=speed;

    for(var i=0; i<speed; i++)

    {

        if(penY<height-51)

          {

          penY+=1;  

          penArrY.push(penY);

          penArrX.push(penX);

          }

    }

  }

function right()

  {

  leftKnobAngle+=speed;

  for(var i=0; i<speed; i++)

      {

        if(penX<width-51)

            {

              penX+=1;;  

              penArrX.push(penX);

              penArrY.push(penY);

            }

      }

  }

function left()

  {

  leftKnobAngle-=speed;

  for(var i=0; i<speed; i++)

  {

  if(penX>51)

    {

    penX-=1;

    penArrX.push(penX);

    penArrY.push(penY);

    }

  }

  }

​

function draw() {

  drawBorder();

  //point(penX,penY);

  beginShape(POINTS);

  //console.log(penArrX.length);

  for(var i=0; i<penArrX.length; i++)

  {

  vertex(penArrX[i], penArrY[i]);

  }

  endShape();

  //Draw randomly

  switch(floor(random(4)))

  {

  //console.log(floor(random(4)));

    case 0: for(var i=0; i<floor(random(10)); i++)

                {up();}

      break;

    case 1: for(var i=0; i<floor(random(10)); i++)

    {      down();}

      break;

    case 2:  for(var i=0; i<floor(random(10)); i++){left();}

      break;

    case 3:  for(var i=0; i<floor(random(10)); i++){right();}

      break;

  }

​

​

  //leftKnobAngle++;

}

​

​

function drawBorder()

{

noStroke()

  fill("red")

  rect(0,0, width, 50);    // Top

  rect(0,0, 50, height);    // Left side

  rect(0,height-50, width, 50);  // Bottom?

  rect(width-50, 0, height, width-50);

  fill("white");

  stroke(0);

  circle(leftKnobX,leftKnobY, knobRadius);      // Left Knob

  circle(rightKnobX, rightKnobY, knobRadius);  // Right Knob

  fill("black");

  circle((knobRadius/2 * cos(radians(leftKnobAngle)) +leftKnobX), (knobRadius/2* sin(radians(leftKnobAngle)) +leftKnobY), 5);    // Show pos for left knob

  circle((knobRadius/2 * cos(radians(rightKnobAngle)) +rightKnobX), (knobRadius/2* sin(radians(rightKnobAngle)) +rightKnobY), 5);  // Show pos for right knob

  textSize(30);

  textStyle(BOLD);

  fill("yellow");

  stroke(0);

  text("Code-A-Sketch", 140, height-15);

}

​

function keyPressed()

{

//console.log(keyCode);

switch(keyCode)

  {

    case 37: left();

      break;

    case 38: up();

      break;

    case 39:  right();

      break

    case 40:  down();

      break;

    case 32:  shake();

      break;

    case 67:  close();

      break;

  }    

​

function shake()

  {

  background(220);

  penArrX.length=0;

  penArrY.length=0;

    loop();

  }

  }

​

function close()

{

background(220);

fill("white");

beginShape()

for(var i=0; i<penArrX.length; i++)

{

vertex(penArrX[i], penArrY[i]);  

}

endShape(CLOSE);

noLoop();  

}

​

​

function tri()

{

for(var i=0; i<size; i++)

  {

  left();  

  }

  for(var i=0; i<size/2; i++)

  {

  right();

  up();

  }

  for(var i=0; i<size/2; i++)

  {

  right();

  down();

  }

}