p5绘图板

用P5.js实现了一个简单的动态绘图板，可以画出动态的作品。

效果图大概是这样的

为了方便作画，增加了隐藏工具栏选项，按shift就可以隐藏工具栏，有三种不同的画笔提供选择，圆形，三角形，直线，颜色暂时只加了9中，可以在代码中随便添加，位置如下：

  frameRate(FPS);
  createCanvas(600, 600);
  noCursor();
  strokeCap(PROJECT);
 
  btns.push(new ColorBtn(5, 5, 30, 30, 0, 0, 0));
  btns.push(new ColorBtn(5+ 30 * 1, 5 , 30, 30, 255, 255, 255));
  btns.push(new ColorBtn(5 + 30 * 2, 5, 30, 30, 200, 50, 50));

  btns.push(new ColorBtn(5 + 30 * 3, 5, 30, 30, 50, 200, 50));
  btns.push(new ColorBtn(5 + 30 * 4, 5, 30, 30, 250, 200, 50));
  btns.push(new ColorBtn(5 + 30 * 5, 5, 30, 30, 250, 0, 250));

  btns.push(new ColorBtn(5 + 30 * 6, 5, 30, 30, 250, 100, 50));
  btns.push(new ColorBtn(5 + 30 * 7,5, 30, 30, 50, 100, 200));
  btns.push(new ColorBtn(5+ 30 * 8, 5 , 30, 30, 150, 100, 255));

可以改变背景颜色

 if (this.cmd == "sun") {
    bR = 255;
    bG = 255;
    bB = 255;
    this.cmd = "moon";

  } else if (this.cmd == "moon") {
    bR = 0;
    bG = 0;
    bB = 0;
    this.cmd = "sun";
  }

实现了一些常规小功能例如清除上一步，清屏，动态转静态，保存图片等

并且为了增加创意性，加了点击音乐，就是鼠标点击会有音乐出现，代码也很简单

var sound, reverb;

function preload() {
  soundFormats('mp3', 'ogg');
  soundFile = loadSound('assets/Damscray_DancingTiger');

  soundFile.disconnect();
}

function setup() {
  createCanvas(720,100);
  background(0);

  reverb = new p5.Reverb();

  reverb.process(soundFile, 6, 0.2);

  reverb.amp(4); // turn it up!
}

function mousePressed() {
  soundFile.play();
}

 background(bR, bG, bB);
  timepast += 1 / FPS;
  if (!isMenuHide) {
    if (timepast < 2) {
      noStroke();
      textAlign(LEFT);
      textSize(15);
      fill(255 - bR);
      text("Floating Light v1.0 - Made By Shangjing Lin(Stanley)", 10, height - 10);
    } else if (timepast < 5) {
      noStroke();
      textAlign(LEFT);
      textSize(15);
      fill(255 - bR);
      text("Press Left Shift to hide Menu, Press S to save canvas to PNG.", 10, height - 10);
    }
  }

  if (mouseIsPressed && (mouseX > 40 || isMenuHide)) {
    if (brushType == "CIRCLE" || brushType == "LINES" || brushType == "TRIANGLE") {
      var position = createVector(mouseX, mouseY);
      objs.push(new Node(position, sqrt(sq(mouseX - pmouseX) + sq(mouseY - pmouseY)), R, G, B));
    }
    //Eraser
    else if (brushType == "ERASER" && objs.length > 0) {
      for (var i = 0; i < objs.length; i++) {
        if (sqrt(sq(objs[i].position.x - mouseX) + sq(objs[i].position.y - mouseY)) <= eraserRange) {
          objs.splice(i, 1);
          break;

        }
      }
    } else if (brushType == "TIMER" && objs.length > 0) {
      for (var i = 0; i < objs.length; i++) {
        if (sqrt(sq(objs[i].position.x - mouseX) + sq(objs[i].position.y - mouseY)) <= timerRange) {
          objs[i].timepast += 2 / FPS;
          objs[i].isPlaying = false;
        }
      }


    }
  }
  for (var i = 0; i < objs.length; i++) {
    objs[i].drawing();
    objs[i].update();
  }
  

  stroke(0);
  strokeWeight(2);
  if (!isMenuHide) {
    for (var i = 0; i < btns.length; i++) {
      btns[i].displayBtn();
      if (btns[i].isMouseInBtn()) {
        cursor(HAND);
      }
    }
  }

  if (mouseX > 40 || isMenuHide) {
    noCursor();
    fill(R * 1.5, G * 1.5, B * 1.5);
    stroke(R * 1.5, G * 1.5, B * 1.5);
    if (brushType == "CIRCLE") {
      ellipse(mouseX, mouseY, 10, 10);
    } else if (brushType == "TRIANGLE") {
      triangle(mouseX - 5, mouseY + 3, mouseX + 5, mouseY + 3, mouseX, mouseY - 5);
    } else if (brushType == "LINES") {
      translate(mouseX, mouseY);
      noFill();
      stroke(255 - bR);
      ellipse(0, 0, 20, 20);
      fill(R * 1.5, G * 1.5, B * 1.5);
      noStroke();
      ellipse(0, 0, 6, 6);
      resetMatrix();
    } else if (brushType == "ERASER") {
      translate(mouseX, mouseY);
      noFill();
      stroke(255 - bR);
      ellipse(0, 0, eraserRange, eraserRange);
      resetMatrix();

    } else if (brushType == "TIMER") {
      translate(mouseX, mouseY);
      stroke(255 - bR);
      noFill();
      ellipse(0, 0, timerRange, timerRange);
      ellipse(0, 0, 22, 22);
      ellipse(0, 0, 25, 25);
      fill(255 - bR);
      ellipse(0, 0, 3, 3);
      strokeWeight(2);
      line(0, 0, 5, 0);
      line(0, 0, 0, -7);
      resetMatrix();
    }
  }
}

function mouseClicked() {
  if (!isMenuHide) {
    for (var i = 0; i < btns.length; i++) {
      if (btns[i].isMouseInBtn()) {
        btns[i].clickBtn();
      }
    }
  }
  return false;

当然，仅仅实现了简单的功能，与常规画板不同之处在于呈现的效果是动态的，但是局限性在于线条的粗细没有办法控制。参考了许多大神的例子。

总体来说还是非常有趣的。

例子

http://p5js.org/examples/

http://alpha.editor.p5js.org/WestRiverLin/sketches/