let wallpaper; 

let pencil;

let weightSlider;

​

function grid(){

    let xMargin = width/16;

    let dy = xMargin/2;

    let n = height/dy;

​

    background(wallpaper);

    strokeWeight(2);

    stroke(color(194, 214, 249));

    for (let i=1; i<n; i++) 

      line(0, dy * i, width, dy * i);

    stroke(color(250, 83, 83));

    line(xMargin, 0, xMargin, height);

}

​

function keyPressed(){

    //eraser

    if(keyCode===LEFT_ARROW){

      pencil.mode = 'ERASER';

    }

​

    //pencil

    if(keyCode===RIGHT_ARROW){ 

      pencil.mode = 'PEN';

    }

​

    if(keyCode===UP_ARROW) drawLayer.clear() ; 

}

​

function setup() {

    createCanvas(480, 320);

    pixelDensity(1) ; 

    wallpaper = color(255,253,239); 

​

    drawLayer = createGraphics(width,height);

    pencil = {

      stroke: color(0, 0, 0, 255),

      weight: 8,

      x1: 0,

      y1: 0,

      x2: 0,

      y2: 0,

      mode: 'PEN'

    };

    weightSlider = createSlider(8, 64, 8, 1);

    grid() ; 

}

​

function draw(){

  pencil.weight = weightSlider.value();

  grid();

  if(pencil.mode === 'PEN') {

    drawLayer.noFill() ;

    drawLayer.strokeWeight(pencil.weight);

    drawLayer.stroke(pencil.stroke);

    if(mouseIsPressed) {

      drawLayer.beginShape();

      drawLayer.curveVertex(pencil.x2, pencil.y2);

      drawLayer.curveVertex(pencil.x1, pencil.y1);

      drawLayer.curveVertex(pmouseX, pmouseY);

      drawLayer.curveVertex(mouseX, mouseY);

      drawLayer.endShape() ;

    }

    pencil.x2 = pencil.x1;

    pencil.y2 = pencil.y1;

    pencil.x1 = pmouseX;

    pencil.y1 = pmouseY;

  }

  else if(pencil.mode === 'ERASER' && mouseIsPressed) {

    //replace this with circle fill or whatever shape i guess

    drawLayer.loadPixels();

    var sx = floor(mouseX - pencil.weight);

    var sy = floor(mouseY - pencil.weight);

    for(var y = sy; y < sy + pencil.weight; y++) {

      for(var x = sx; x < sx + pencil.weight; x++) {

        var index = (x + y * width) * 4;

        drawLayer.pixels[index] = 0;

        drawLayer.pixels[index+1] = 0;

        drawLayer.pixels[index+2] = 0;

        drawLayer.pixels[index+3] = 0;

      }

    }

    drawLayer.updatePixels();

  }

  image(drawLayer, 0, 0);

}