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

二、繪圖軟件簡介
根據(jù)我們這次作業(yè)的要求：編寫一個(gè)“繪畫系統(tǒng)”，提供一系列的繪畫材料給用戶操作，以創(chuàng)作動(dòng)態(tài)交互作品，也就是創(chuàng)作一個(gè)app，看起來比較像“畫畫工具”，再加上之前的問題，我的主題便定了下來，一個(gè)可以導(dǎo)航的繪圖軟件。
其主界面如下：

看起來十分的簡潔，接下來我來介紹他所具有的功能：左邊的白色區(qū)域是繪畫的區(qū)域，右面是工具欄，工具欄的最下面首先是brush：筆刷的類型，具體的每種筆刷會(huì)在之后介紹，按鍵C可以清屏，?按鍵可以換筆刷的類型，L/S按鍵用來保存和讀取你的畫（還未完善），在上面是一個(gè)表設(shè)置他的原因我會(huì)在之后解釋，再上面是顏色盤，對應(yīng)的是畫筆和背景的顏色。

三、功能設(shè)計(jì)
1.鐘表的設(shè)計(jì)：其實(shí)加入這個(gè)鐘表的原因有很多，起因是我自己在設(shè)計(jì)繪畫板的時(shí)候忘記了吃飯，就發(fā)現(xiàn)注意時(shí)間的重要性，就有了加入表的想法，主要是我考慮到用我的這個(gè)系統(tǒng)畫這些設(shè)計(jì)圖的時(shí)候可能都會(huì)很趕時(shí)間比如說想畫一個(gè)找路的圖，疏散圖，找地點(diǎn)的圖，有一個(gè)表在時(shí)刻的提醒著是非常不錯(cuò)的。
鐘表源代碼：

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);// 時(shí)間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);// 每分鐘的點(diǎn)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.顏色塊的設(shè)計(jì)：我按照了我們經(jīng)常用到的畫圖軟件的調(diào)色板設(shè)計(jì)了這個(gè)，只是加入了三原色（紅綠藍(lán)）和二次色（青黃品紅）和黑白。
顏色塊的代碼：

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）默認(rèn)筆刷：畫出來的效果和普通筆刷是一樣的，旁邊有各種的顏色可以選擇，畫出來的效果如下：

（2）嚴(yán)重路塞路線畫筆：用了紅色的顏色來體現(xiàn)路塞的狀態(tài)，并且是靜態(tài)的給人一種已經(jīng)堵死了的感覺。，具體效果如下：

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

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

（6）錯(cuò)誤標(biāo)識：這個(gè)標(biāo)識我最初的想法是用來標(biāo)識此處禁止通行之類的位置，但是我發(fā)現(xiàn)也可以做一個(gè)地點(diǎn)標(biāo)識，像不像一個(gè)藏寶地圖的重點(diǎn)。

（7）源點(diǎn)標(biāo)識：我們需要一個(gè)很好的標(biāo)識來表明自己的位置或者其他標(biāo)志，所以一個(gè)源點(diǎn)的標(biāo)志最好的能夠表現(xiàn)這個(gè)了，效果如下：

筆刷類型的源碼：

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.功能應(yīng)用
可能到現(xiàn)在，也有人想不到在那里地方能用到，我就將我的一些想法展示出來。
（1）從宿舍到數(shù)媒樓的路線圖：每次上課的高峰期，人群都能“堵車”，我們來看一下當(dāng)時(shí)的狀況大概是如何的（我用紫色的源點(diǎn)來表示我們的宿舍，五角星表明數(shù)媒樓，在剛出宿舍的這段路上是最為擁擠的，之后上了大道會(huì)比較的通暢，當(dāng)然我們發(fā)現(xiàn)從南門走會(huì)更加的通暢，但是走的遠(yuǎn)啊）。

（2）一個(gè)樓層的疏散路線圖：樓層的設(shè)計(jì)是我自己假想的，加上這些流動(dòng)的效果和顏色的差別是不是讓這個(gè)圖表現(xiàn)的更加明顯了。（我們繼續(xù)用紫色源點(diǎn)標(biāo)識自己的原來位置，綠色五角星表示我們要去的安全通道，還有錯(cuò)誤標(biāo)志表明地方不能走）

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

五、總結(jié)
我的想法就來自生活中，在一個(gè)給人描述路線的情景之下，因?yàn)槲艺J(rèn)為在介紹的過程中，很難表達(dá)的清楚地點(diǎn)的具體位置，你該從哪里走，所以想到了這個(gè)主題。在這個(gè)繪畫系統(tǒng)中我最大的想突出的點(diǎn)是流動(dòng)性，流動(dòng)性在畫中第一有十分充足的引導(dǎo)作用，大家看到流動(dòng)的圖基本都會(huì)順著這個(gè)流動(dòng)的方向跟隨下去；第二表現(xiàn)力強(qiáng)，相對于靜態(tài)的圖片，動(dòng)態(tài)的流動(dòng)效果更加的凸顯出其表達(dá)的內(nèi)容。因?yàn)樵诔Ｒ?guī)的繪畫中很難表達(dá)出這種效果，所以在這個(gè)繪畫系統(tǒng)中畫出來圖感覺方向性很強(qiáng)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。