一、前言
因為導航軟件現在幾乎人人都會用了，相信大家現在都已經不會迷路，但是還是難以避免會有問路的，會不會覺得難以描述或者并不形象呢？現在的每一棟大廈或者場所必定都會有安全疏散圖相信大家都知道，但是會有多少人每次花心思先去看一看呢？想必現在開車的人最頭疼的一件事就是找停車場吧，即使找到了停車場，找不到入口？還得繞一圈發現進到了最堵得地方有沒有覺得好難受。我們能不能像下面的藏寶圖一樣設計出來路線圖呢?

二、繪圖軟件簡介
根據我們這次作業的要求：編寫一個“繪畫系統”，提供一系列的繪畫材料給用戶操作，以創作動態交互作品，也就是創作一個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(paintingWidth+110,320,255,255,0,30);buttonBL2=Button(paintingWidth+110,370,0,0,0,30); function mousePressed() {//print("mousePressed:" + millis());if(mouseInPaintingRect()==1){brushStroke();}//畫筆顏色if(mouseX>=paintingWidth+20 && mouseX<=paintingWidth+50 && mouseY>=20 && mouseY<=50){R=255;G=255;B=255; } if(mouseX>=paintingWidth+20 && mouseX<=paintingWidth+50 && mouseY>=70 && mouseY<=100){R=255;G=0;B=0;} if(mouseX>=paintingWidth+20 && mouseX<=paintingWidth+50 && mouseY>=120 && mouseY<=150){R=0;G=255;B=0;}if(mouseX>=paintingWidth+20 && mouseX<=paintingWidth+50 && mouseY>=170 && mouseY<=200){R=0;G=0;B=255;} if(mouseX>=paintingWidth+20 && mouseX<=paintingWidth+50 && mouseY>=220 && mouseY<=250){R=255;G=0;B=255;} if(mouseX>=paintingWidth+20 && mouseX<=paintingWidth+50 && mouseY>=270 && mouseY<=300){R=255;G=0;B=255;} if(mouseX>=paintingWidth+20 && mouseX<=paintingWidth+50 && mouseY>=320 && mouseY<=350){R=255;G=255;B=0;} if(mouseX>=paintingWidth+20 && mouseX<=paintingWidth+50 && mouseY>=370 && mouseY<=400){R=0;G=0;B=0;}//背景顏色 if(mouseX>=paintingWidth+110 && mouseX<=paintingWidth+140 && mouseY>=20 && mouseY<=50){r=255;g=255;b=255;} if(mouseX>=paintingWidth+110 && mouseX<=paintingWidth+140 && mouseY>=70 && mouseY<=100){r=255;g=0;b=0;}if(mouseX>=paintingWidth+110 && mouseX<=paintingWidth+140 && mouseY>=120 && mouseY<=150){r=0;g=255;b=0;} if(mouseX>=paintingWidth+110 && mouseX<=paintingWidth+140 && mouseY>=170 && mouseY<=200){r=0;g=0;b=255;} if(mouseX>=paintingWidth+110 && mouseX<=paintingWidth+140 && mouseY>=220 && mouseY<=250){r=255;g=0;b=255;} if(mouseX>=paintingWidth+110 && mouseX<=paintingWidth+140 && mouseY>=270 && mouseY<=300){r=255;g=0;b=255;} if(mouseX>=paintingWidth+110 && mouseX<=paintingWidth+140 && mouseY>=320 && mouseY<=350){r=255;g=255;b=0;}if(mouseX>=paintingWidth+110 && mouseX<=paintingWidth+140 && mouseY>=370 && mouseY<=400){r=0;g=0;b=0;} }

2.筆刷的類型：
（1）默認筆刷：畫出來的效果和普通筆刷是一樣的，旁邊有各種的顏色可以選擇，畫出來的效果如下：

（2）嚴重路塞路線畫筆：用了紅色的顏色來體現路塞的狀態，并且是靜態的給人一種已經堵死了的感覺。，具體效果如下：

（3）輕微路塞路線畫筆：相比嚴重的路塞，我們繼續使用紅色表明此處路塞的狀態，但是讓他有較慢的流動效果表明還能移動。效果與暢通一同展示
（4）暢通道路路線畫筆：我們用綠色的線段和較快的移動速度表明這里的移動較快，以體現暢通的效果。
（5）水管道路路線畫筆：我們將每個小小的圓變成了圓環，并且改為藍色，如果有人想用這個軟件畫水果圖或者河流均可以用這個標識以上三種效果如下：

（5）五角星的標識：可以利用不同的顏色來表示不同的意義，用來作為終點或者標志在地圖上顯示，效果如下：

（6）錯誤標識：這個標識我最初的想法是用來標識此處禁止通行之類的位置，但是我發現也可以做一個地點標識，像不像一個藏寶地圖的重點。

（7）源點標識：我們需要一個很好的標識來表明自己的位置或者其他標志，所以一個源點的標志最好的能夠表現這個了，效果如下：

筆刷類型的源碼：

var brushes = [brush_0, // 0brush_1, // 1brush_2, // 2brush_3, // 3brush_4, // 4brush_5, // 5brush_6, // 6brush_7, // 7]; fnction brush_0() {var phase = millis()/30;append(circles, new route1(mouseX,mouseY,0,0,phase,R,G,B)); } function brush_1() {var phase = millis()/30;append(circles, new route2(mouseX,mouseY,6,0,phase,255,0,0)); } function brush_2() {var phase = millis()/30;append(circles, new route2(mouseX,mouseY,6,2,phase,255,0,0)); } function brush_3() {var phase = millis()/30;append(circles, new route3(mouseX,mouseY,6,10,phase,0,255,0)); }function brush_4() {var phase = millis()/30;append(circles, new route4(mouseX,mouseY,0,6,2,phase,0,0,255)); } function brush_5() {var phase = millis()/30;append(circles, new star(mouseX, mouseY, 10, 25, 5,R,G,B)); } function brush_6() {var phase = millis()/30;append(circles, new cha(mouseX, mouseY, 50,R,G,B)); } function brush_7() {var phase = 1*millis()/1000;append(circles, new sourse(mouseX,mouseY,0,15,5,phase,R,G,B)); } function route1(x,y, amp, freq, phase,R,G,B ) {this.x = x;this.y = y;this.R = R;this.G = G; this.B = B;this.draw = function(){push();noStroke();strokeWeight(5);stroke(R,G,B,50);fill(0,0);translate(this.x,this.y);ellipse(0,0,5,5);pop();}this.toJson = function(){var jsonObj = {};jsonObj.x = this.x;jsonObj.y = this.y;jsonObj.radius = this.radius;jsonObj.amplitude = this.amplitude;jsonObj.frequence = this.frequence;jsonObj.phase = this.phase;return jsonObj;}this.fromJson = function(jsonObj){this.x = jsonObj.x;this.y = jsonObj.y;this.radius = jsonObj.radius;this.amplitude = jsonObj.amplitude;this.frequence = jsonObj.frequence;this.phase = jsonObj.phase;} }function route2(x,y, amp, freq, phase,R,G,B ) {this.x = x;this.y = y;this.R = R;this.G = G; this.B = B;this.amplitude = amp;this.frequence= freq;this.phase = phase;this.draw = function(){var secs = millis()/1000.0;var Bias = this.amplitude * sin(this.frequence * secs + this.phase);push();noStroke();strokeWeight(5);stroke(R,G+Bias*255,B+Bias*255,50);fill(0,0);translate(this.x,this.y);ellipse(0,0,5,5);pop();}this.toJson = function(){var jsonObj = {};jsonObj.x = this.x;jsonObj.y = this.y;jsonObj.radius = this.radius;jsonObj.amplitude = this.amplitude;jsonObj.frequence = this.frequence;jsonObj.phase = this.phase;return jsonObj;} this.fromJson = function(jsonObj){this.x = jsonObj.x;this.y = jsonObj.y;this.radius = jsonObj.radius;this.amplitude = jsonObj.amplitude;this.frequence = jsonObj.frequence;this.phase = jsonObj.phase;} } function route3(x,y, amp, freq, phase,R,G,B ) {this.x = x;this.y = y;this.R = R;this.G = G; this.B = B;this.amplitude = amp;this.frequence= freq;this.phase = phase;this.draw = function(){var secs = millis()/1000.0;var Bias = this.amplitude * sin(this.frequence * secs + this.phase);push();noStroke();strokeWeight(5);stroke(R+Bias*255,G,B+Bias*255,50);fill(0,0);translate(this.x,this.y);ellipse(0,0,5,5);pop();}this.toJson = function(){var jsonObj = {};jsonObj.x = this.x;jsonObj.y = this.y;jsonObj.radius = this.radius;jsonObj.amplitude = this.amplitude;jsonObj.frequence = this.frequence;jsonObj.phase = this.phase;return jsonObj;}this.fromJson = function(jsonObj){this.x = jsonObj.x;this.y = jsonObj.y;this.radius = jsonObj.radius;this.amplitude = jsonObj.amplitude;this.frequence = jsonObj.frequence;this.phase = jsonObj.phase;} } function route4(x,y, radius,amp, freq, phase,R,G,B ) {this.x = x;this.y = y;this.R = R;this.G = G; this.B = B;this.radius = radius;this.amplitude = amp;this.frequence= freq;this.phase = phase;this.draw = function(){var secs = millis()/1000.0;var rBias = this.amplitude * sin(this.frequence * secs + this.phase);push();noStroke();strokeWeight(50);stroke(R+rBias*255,G+rBias*255,B,50);fill(0,0);translate(this.x,this.y);ellipse(0,0,5,5);pop();}this.toJson = function(){var jsonObj = {};jsonObj.x = this.x;jsonObj.y = this.y;jsonObj.radius = this.radius;jsonObj.amplitude = this.amplitude;jsonObj.frequence = this.frequence;jsonObj.phase = this.phase;return jsonObj;}this.fromJson = function(jsonObj){this.x = jsonObj.x;this.y = jsonObj.y;this.radius = jsonObj.radius;this.amplitude = jsonObj.amplitude;this.frequence = jsonObj.frequence;this.phase = jsonObj.phase;} } function star(x, y, radius1, radius2, npoints,R,G,B) {this.x=x;this.y=y;var angle = TWO_PI / npoints;var halfAngle = angle/2.0;this.draw = function(){push();stroke(R,G,B);beginShape();for (var a = 0; a < TWO_PI; a += angle) {var sx = x + cos(a) * radius2;var sy = y + sin(a) * radius2;vertex(sx, sy);sx = x + cos(a+halfAngle) * radius1;sy = y + sin(a+halfAngle) * radius1;vertex(sx, sy);}endShape(CLOSE);pop();}this.toJson = function(){var jsonObj = {};jsonObj.x = this.x;jsonObj.y = this.y;jsonObj.radius = this.radius;jsonObj.amplitude = this.amplitude;jsonObj.frequence = this.frequence;jsonObj.phase = this.phase;return jsonObj;}this.fromJson = function(jsonObj){this.x = jsonObj.x;this.y = jsonObj.y;this.radius = jsonObj.radius;this.amplitude = jsonObj.amplitude;this.frequence = jsonObj.frequence;this.phase = jsonObj.phase;} }function cha(x, y, size, R,G,B) {this.x=x;this.y=y;m=size/4;n=size/2;this.draw = function(){push();fill(R,G,B);noStroke();quad(x-n, y+n, x-m, y+n, x+n, y-n, x+m, y-n);quad(x+m, y+n, x+n, y+n, x-m, y-n, x-n, y-n);pop();}this.toJson = function(){var jsonObj = {};jsonObj.x = this.x;jsonObj.y = this.y;jsonObj.radius = this.radius;jsonObj.amplitude = this.amplitude;jsonObj.frequence = this.frequence;jsonObj.phase = this.phase;return jsonObj;}this.fromJson = function(jsonObj){this.x = jsonObj.x;this.y = jsonObj.y;this.radius = jsonObj.radius;this.amplitude = jsonObj.amplitude;this.frequence = jsonObj.frequence;this.phase = jsonObj.phase;} }function sourse(x,y,radius, amp, freq, phase,R,G,B ) {this.x = x;this.y = y;this.radius = radius;this.amplitude = amp;this.frequence= freq;this.phase = phase;this.draw = function(){var secs = millis()/1000.0;var rBias = this.amplitude * sin(this.frequence * secs + this.phase);var r = this.radius + rBias;push();noStroke();strokeWeight(0.2);stroke(R,G,B,50);fill(R,G,B,10);translate(this.x,this.y);scale(r,r);ellipse(0,0,1,1);pop();}this.toJson = function(){var jsonObj = {};jsonObj.x = this.x;jsonObj.y = this.y;jsonObj.radius = this.radius;jsonObj.amplitude = this.amplitude;jsonObj.frequence = this.frequence;jsonObj.phase = this.phase;return jsonObj;}this.fromJson = function(jsonObj){this.x = jsonObj.x;this.y = jsonObj.y;this.radius = jsonObj.radius;this.amplitude = jsonObj.amplitude;this.frequence = jsonObj.frequence;this.phase = jsonObj.phase;}

2.功能應用
可能到現在，也有人想不到在那里地方能用到，我就將我的一些想法展示出來。
（1）從宿舍到數媒樓的路線圖：每次上課的高峰期，人群都能“堵車”，我們來看一下當時的狀況大概是如何的（我用紫色的源點來表示我們的宿舍，五角星表明數媒樓，在剛出宿舍的這段路上是最為擁擠的，之后上了大道會比較的通暢，當然我們發現從南門走會更加的通暢，但是走的遠啊）。

（2）一個樓層的疏散路線圖：樓層的設計是我自己假想的，加上這些流動的效果和顏色的差別是不是讓這個圖表現的更加明顯了。（我們繼續用紫色源點標識自己的原來位置，綠色五角星表示我們要去的安全通道，還有錯誤標志表明地方不能走）

四、擴展繪畫概念的理念
繪畫在技術層面上，是一個以表面作為支撐面，再在其之上加上顏色的做法，那些表面可以是紙張或布，加顏色的工具可以通過畫筆、也可以通過刷子、海綿或是布條等。在藝術用語的層面上，繪畫的意義亦包含利用此藝術行為再加上圖形、構圖及其他美學方法去達到畫家希望表達的概念及意思。來比較一下我的這個繪畫板和常規的畫板之間的異同吧。
1.工具方面
在默認的畫筆和一些普通的圖形上，常規的繪畫系統也是有的，在常規的繪畫系統上，畫線工具也是有的，但是形式都過于單一了，只能畫出純色的線段，這也是我為什么沒有選擇設計直接的畫線工具，而是由密集的點組成線，這樣每一個點都是一個單獨的結構，我們可以更好地改變這一條線。例如在我的系統中，我想能用間隔的線段畫出流向的感覺，再加上點不斷地變化，一個線段工具就變得更加靈活多樣，其中的參數可以有更多的改變。
2.理念方面
我的繪畫系統畫出的作品很有方向性，相對于常規繪畫系統，很多的功能我可能都沒有；但是因為我想表達出流動的效果所以在疏散圖啊，導航圖啊一些方面是更加的好的，因為常規畫板的理念是想讓人們更大范圍的創作，沒有任何的方向引導，但是我的理念更傾向于表現一些流動的事物，用流動的先畫出有方向性的圖。
3.視覺的方面
因為制作出來的圖是動態的，所以立馬就變得比靜態圖更加的有視覺上的沖擊，而且，更加能讓我們的引導效果加強，因為流動的效果就更加的有引導效果，制作出來的圖上讓人看起來就很有方向性，主要兩個線段的顏色采用的紅，綠也很對應他們的擁堵和暢通效果。
4.呈現效果
我認為在呈現的效果方面是有所加成的，我們都看到過靜止的一些導航軟件的導航圖片，或者疏散圖，因為是靜態的所以基本的區別點在什么？形狀；顏色無疑是兩個最大的點，而在系統中加上了動態效果后又有了一個很大的區別點，綠色代表暢通，流速快也代表暢通當合在一起之后的線段就表現效果就更加的顯著了，這樣與流速慢的紅色線段強烈的對比。
5.應用
對于這個小畫板的應用我認為是非常的廣，比如說我們已經提到的路線圖，疏散圖。比如我們的晚會，會議等場合的引導圖；朋友之間詢問具體地點，可以將其繪畫出來告知；某一個地段的擁堵狀況我們也可以來描述；或者是畫一些工業的草圖，比如說水管的線路圖，鐵路的路線圖等等。其動態的效果要比常規繪畫效果更佳強。

五、總結
我的想法就來自生活中，在一個給人描述路線的情景之下，因為我認為在介紹的過程中，很難表達的清楚地點的具體位置，你該從哪里走，所以想到了這個主題。在這個繪畫系統中我最大的想突出的點是流動性，流動性在畫中第一有十分充足的引導作用，大家看到流動的圖基本都會順著這個流動的方向跟隨下去；第二表現力強，相對于靜態的圖片，動態的流動效果更加的凸顯出其表達的內容。因為在常規的繪畫中很難表達出這種效果，所以在這個繪畫系統中畫出來圖感覺方向性很強。

總結

以上是生活随笔為你收集整理的路线图绘画系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。