路线图绘画系统

一、前言
因为导航软件现在几乎人人都会用了，相信大家现在都已经不会迷路，但是还是难以避免会有问路的，会不会觉得难以描述或者并不形象呢？现在的每一栋大厦或者场所必定都会有安全疏散图相信大家都知道，但是会有多少人每次花心思先去看一看呢？想必现在开车的人最头疼的一件事就是找停车场吧，即使找到了停车场，找不到入口？还得绕一圈发现进到了最堵得地方有没有觉得好难受。我们能不能像下面的藏宝图一样设计出来路线图呢?

二、绘图软件简介
根据我们这次作业的要求：编写一个“绘画系统”，提供一系列的绘画材料给用户操作，以创作动态交互作品，也就是创作一个app，看起来比较像“画画工具”，再加上之前的问题，我的主题便定了下来，一个可以导航的绘图软件。
其主界面如下：

看起来十分的简洁，接下来我来介绍他所具有的功能：左边的白色区域是绘画的区域，右面是工具栏，工具栏的最下面首先是brush：笔刷的类型，具体的每种笔刷会在之后介绍，按键C可以清屏，↕按键可以换笔刷的类型，L/S按键用来保存和读取你的画（还未完善），在上面是一个表设置他的原因我会在之后解释，再上面是颜色盘，对应的是画笔和背景的颜色。

三、功能设计
1.钟表的设计：其实加入这个钟表的原因有很多，起因是我自己在设计绘画板的时候忘记了吃饭，就发现注意时间的重要性，就有了加入表的想法，主要是我考虑到用我的这个系统画这些设计图的时候可能都会很赶时间比如说想画一个找路的图，疏散图，找地点的图，有一个表在时刻的提醒着是非常不错的。
钟表源代码：

var cx=paintingWidth+80, cy=470;
var secondsRadius;
var minutesRadius;
var hoursRadius;
var clockDiameter;
function setup() {
  var clockradius = 50;
  secondsRadius = clockradius * 0.71;
  minutesRadius = clockradius * 0.60;
  hoursRadius = clockradius * 0.50;
  clockDiameter = clockradius * 1.7;
  function draw() {
   //表
  push();
noStroke();
  fill(244,122,158);
  ellipse(cx, cy, clockDiameter + 25, clockDiameter + 25);
  fill(237,34,93);
  ellipse(cx, cy, clockDiameter, clockDiameter);
  
  // 时间
  var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
  var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;

  // 表针
  stroke(255);
  strokeWeight(1);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
  strokeWeight(2);
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
  strokeWeight(4);
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);

  // 每分钟的点
  strokeWeight(2);
  beginShape(POINTS);
  for (var a = 0; a < 360; a+=6) 
  {
    var angle = radians(a);
    var x = cx + cos(angle) * secondsRadius;
    var y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
	pop();
}

2.颜色块的设计：我按照了我们经常用到的画图软件的调色板设计了这个，只是加入了三原色（红绿蓝）和二次色（青黄品红）和黑白。
颜色块的代码：

var R=0;G=0;B=0;
var r=255;g=255;b=255;
  //画笔颜色
  buttonW=Button(paintingWidth+20,20,255,255,255,30);
  buttonR=Button(paintingWidth+20,70,255,0,0,30);
  buttonG=Button(paintingWidth+20,120,0,255,0,30);
  buttonB=Button(paintingWidth+20,170,0,0,255,30);
  buttonQ=Button(paintingWidth+20,220,0,255,255,30);
  buttonF=Button(paintingWidth+20,270,255,0,255,30);
  buttonH=Button(paintingWidth+20,320,255,255,0,30);
  buttonBL=Button(paintingWidth+20,370,0,0,0,30); 
function Button(x,y,R,G,B,size)
{
  this.bx=x;
  this.by=y;
  var boxSize = 30;
  stroke(R,G,B); 
  fill(R,G,B);
  rect(bx, by, boxSize, boxSize);
}  
  //背景颜色
  buttonW2=Button(paintingWidth+110,20,255,255,255,30);
  buttonR2=Button(paintingWidth+110,70,255,0,0,30);
  buttonG2=Button(paintingWidth+110,120,0,255,0,30);
  buttonB2=Button(paintingWidth+110,170,0,0,255,30);
  buttonQ2=Button(paintingWidth+110,220,0,255,255,30);
  buttonF2=Button(paintingWidth+110,270,255,0,255,30);
  buttonH2=Button(paintingWidt