简易画板

简易画板

前言

编写一个“绘画系统”，提供一系列绘画材料（例如画笔/颜料/滤镜）给用户操作，以创作出动态/交互的绘画作品。这个绘画系统是对“绘画”的概念的扩展，但仍然体现出与传统绘画系统的相似性。

目录

 1.画板的总体概括
 2.画板提供的功能
 3.画板的笔刷效果
 4.代码示例
 5总结

1.画板的总体概括

这个画板是基于网上的一个例子进行的修改与拓展，旨在实现更多的有趣的功能，提升画板的可玩性。用户可以通过颜料框进行颜色的选择，本画板共提供了7种颜色，如果想要更多的颜色可自行调节。工具栏里则提供了6种作画方式，包括：圆形，三角形，直线，花形，动态斐波那契曲线，笑脸，双层圆形圈，风车形。此外，工具栏还提供包括：选择模式，暂停，时间胶囊，清除画板，保存图片等功能。

画板提供的功能

1.更改模式（白天/黑夜）

通过点击太阳按钮改变模式至白天模式（默认为黑夜）
白天效果如下

2.暂停功能

通过点击暂停按钮或者按“c”键可实现动态画布的暂停；

3.时间胶囊功能

通过点击时钟按钮，会产生一个时钟状的刷子，单击后可实现部分区域的暂停，长按则区域播放

4.橡皮

点击“E”按钮或键盘按“E”键可调出橡皮，对图片进行擦除

5.清空画布

点击“C”按钮或键盘按“C”键可调出橡皮，对图片进行擦除

6.保存

点击“S”按钮或键盘按“S”键可调出橡皮，对图片进行擦除

3.画板的笔刷效果

1.圆形，三角形，直线

通过点击可进行切换

圆形效果

三角形效果

直线效果

花形效果

斐波那契曲线效果

笑脸效果

风车形效果

4.代码示例

代码都很简单，这里只贴上斐波那契曲线的实现代码

function Fibonacci() {
  var Fibonacci = [];
  stroke(0);
  noFill();
  strokeWeight(5);
  rotate(-PI / 18 * frameCount);
  for (var i = 0; i < 20; i++) {
    var a = i <= 1 ? 1 : Fibonacci[i - 1] + Fibonacci[i - 2];
    Fibonacci.push(a);
    arc(0, 0, a * 2, a * 2, 0, PI / 2);
    rotate(PI / 2);
    translate(-Fibonacci[i - 1], 0);
  }

5.总结

创意的画板能实现创意的绘画，预置的画笔能让绘画变得更加简单，也更加方便；但是，没有一丝变化的重复则让画作失去了灵魂，他不能成为表现作者心理状态的方式，不能起到表达作者情感的作用。所以，我更倾向与用传统的方式去作画。

参考：https://blog.csdn.net/qq_27534999/article/details/79427721