​

​

class EtchSketch {

  constructor() {

    this.pixelSize = 5;

    this.controlled = false;

    this.pointer = createVector(width/2,height/2);

  }

  control() {

    if (!this.controlled) {

      return;

    }

    if (keyIsDown(UP_ARROW)) {

      this.pointer.y -= 1;

    }

    if (keyIsDown(DOWN_ARROW)) {

      this.pointer.y += 1;

    }

    if (keyIsDown(LEFT_ARROW)) {

      this.pointer.x -= 1;

    }

    if (keyIsDown(RIGHT_ARROW)) {

      this.pointer.x += 1;

    }

  }

  update() {

    this.control();

  }

  show() {

    square(this.pointer.x,this.pointer.y,2);

  }

}

​

​

​

​

​

​

let c;

let fps;

let pixelCount = 0;

​

function setup() {

  let cvs = createCanvas(700, 500); // Sets default size and ratio.

  cvs.canvas.style.width = "100%"; // 100% width of available space

  cvs.canvas.style.height = "auto";

  fps = document.getElementById('fps');

  frameRate(55);

  background(220);

  fill(0);

  c = new EtchSketch();

}

​

function draw() {

  c.update();

  c.show();

  performanceCheck();

}

​

function keyPressed() {

  if (!c) {return;}

  c.controlled = true;

}

​

function keyReleased() {

  if (!c) {return;}

  if (!keyIsPressed) {

    // In case two keys were pressed and one released

    c.controlled = false;

  }

}

​

function performanceCheck() {

  f = int(frameRate()); // fps

  if (frameCount%10==0 && f<20) {

    noLoop();

    print("maximized");

  }

  fps.innerText = ''+f;

}

​