人性化的绘画界面设计－屁民科普
人性化的繪畫界面設計－屁民科普
寫在前面：感覺對于這次的繪畫系統，我和其他同學不同，他們比較專注于不同筆的效果的比較，我在這里是更專注于用戶進行繪畫時的交互體驗，繪畫的娛樂性和創新性體驗較少。這里面的面板控件都是自己畫的233.
設計思路
（1）由動態和交互，我想把第二次的作業結合進去，作為我這次大作業的UI開始界面。相當于將繪畫系統，當作適合人們玩的小游戲的樣式。
（2）根據老師上課講的內容，忽然想到可以做成一個像素風的繪畫形式?？梢宰约哼x擇顏色，有顏色面板。
（3）在完成第(2)步以后，我在想要做點更有意思的東西，能夠將自己的繪制完成的圖畫讓他有某種效果。因為前幾天下雪，所以想做一圣誕特別版。
（4）之前看同學做了有點萌的開關還有音樂可視化的下雪的季節，自己也想讓界面變的更可愛一點，所以自己也嘗試了一下這兩種我比較喜歡的作品，放入我的繪畫界面中。
創作步驟
繪制畫布
首先，我要有一個網格作為畫紙，相當于畫布的界面。
部分代碼：
聲明部分：
在setup()當中初始化：
for (int i=0;i<=1000-1;i++){p[i]=new PVector(box_length*i+box_length/2,box_length);}for (int i=0;i<=1000-1;i++){p_y[i]=p[i].y*i;}繪制畫布部分：
//set a canva void drawcanva() {for (int j=0;j<=1000-1;j++){ for (int i=0;i<=1000-1;i++){fill(255,255,255);stroke(157,170,173,30);rect(p[i].x,p_y[j],box_length,box_length);}} }效果：
繪制調色板
第二步就是要有調色板了，為了好看，我在調色板下畫了一個半透明的矩形，生成調色板也非常簡單，定好了畫板板面的位置也就是選好了第一個格子的位置，定好了畫板的大小，花瓣中的格子的寬度就和畫布的格子大小一樣。寫一個循環，將所有的格子位置在setup中存儲起來，將格子要填充的顏色也存儲起來。格子的位置和填充的顏色都在數組中。
于是就形成了下面這種效果，值得一說的就是文字，我這里找了幾種好看的文字，選定與主題最相符的格式就?了。
setup()函數中選擇了一種字體
// Herculanum HiraginoSans-W0 MarkerFelt-Thinmyfont=createFont("NanumBrush",20);//set fonttextFont(myfont); fill(0,0,0);//text colortextSize(20);text("Palette",35,22);//add context and pos那我是怎么選擇這種字體的呢，那字體有什么屬性可以通過代碼調節呢
可以參考：processing字體
核心部分：增加調色板交互效果
獲取調色板的顏色
第三步：也是這里最核心的，就是點擊調色板，獲取調色板的顏色，再點擊畫布，在畫布上顯示我選擇的顏色，并且繪制。
首先先說說怎么獲取顏色，processing自帶了獲取顏色的函數，非常簡單也非常方便。
當然這些要建立在點擊事件當中，我在編寫的時候，想過用什么樣的交互方式會更加便于用戶去選取顏色并且繪制，而且代碼還比較容易編寫。
那就選擇不同的按鍵來代表不同的操作！
這里鼠標左鍵選取顏色，右鍵繪制，有點類似于blender的操作。
以下代碼在mousePressed()中
特別的意外創新點
這里的rgb獲取到了左鍵取到的顏色，而且這也帶來一個特別方便的地方，也是在我編寫之后發現的。因為畫布是白色的，所以我如果畫到了錯誤的地方，左鍵空白處，再右鍵錯誤的地方，就可以實現橡皮擦的功能，我覺得我這里是創新點！哈哈
將獲取到的顏色繪制到調色板上鼠標點擊的指定位置
我這里判斷了mouseX mouseY所處的位置，以一個方格為范圍，如果鼠標位于該方格內，則將這個方格用剛獲取的顏色填充。
而這里面的難點在于哪里呢？
我如何保存方格所在的位置，來繪制方格。因為鼠標可能點擊方格內部的任何區域，而我要保存的僅僅是方格的左上角點的坐標，至于方格的大小我們已經在setup的時候確定好了。
解決的方法是，首先做一步判斷，鼠標點擊的位置位于哪個方格內，那我返回該方格的坐標就好了。因為之前在繪制畫布的時候，我們已經存儲了所有格子的坐標，放在了p[]數組里。
那就直接暴力遍歷，我們就能找到目標格子索引及坐標。
在右鍵操作中添加如下代碼：其中fill（）填充的顏色就是我們剛才獲取到的顏色。
嘗試有點萌的開關挑戰
我這里看了其他同學的博文，根據上面的提示自己編寫了一下，但是對于刷新變成橢圓的那個地方并沒有去實現。
我這里也為了配合整體效果，選擇了半透明的樣式，比較淡一點的顏色。
開關的繪制這里就不放了。
因為要每一幀都繪制，所以開關的動畫要寫在draw當中，開關的移動我沒有用到鼠標的點擊，這里是如果鼠標放置在這個圓形區域以內，則判定為要進行開關操作。
在on時的眨眼，在off時的眨眼
//OFF void animation() {for (int i=1;i<=80;i++){pushMatrix();translate(i,0);fill(255,255,255);//draw buttomellipse(25,width/5+10,25,25);fill(173,158,157,90);ellipse(25-5,width/5+10,8,3+7*abs(sin(second()*8)));ellipse(25+5,width/5+10,8,3+7*abs(sin(second()*8)));popMatrix();} } //ON void animation1() {for (int i=1;i<=80;i++){pushMatrix();translate(-i,0);fill(255,255,255);//draw buttomellipse(105,width/5+10,25,25);fill(173,158,157,90);ellipse(105-5,width/5+10,8,3+7*abs(sin(second()*8)));ellipse(105+5,width/5+10,8,3+7*abs(sin(second()*8)));popMatrix();} }因為是截圖所以大小會有點問題，看上去怪怪得，實際上我這個開關有兩種眨眼睛的方式，一種是完全閉上，然后睜開，另一種是半閉然后睜開。不論開關在左邊還是在右邊都有眨眼睛的效果，有點呼吸的活的感覺。
//switch animation OFF wink eyesif ((mouseX-25)*(mouseX-25)+(mouseY-width/5-10)*(mouseY-width/5-10)<=25*25&&tag==0){animation();tag=1;// changeclr();}// move();//switch animation ON wink eyesif ((mouseX-105)*(mouseX-105)+(mouseY-width/5-10)*(mouseY-width/5-10)<=25*25&&tag==1){animation1();clearcanva();tag=0;// move();}添加開關操作
這里我剛開始編寫的時候，一直都沒太想好讓我的圖像有什么樣子的動態的效果，后來想到了要加入音樂，于是我就增加了透明度和下雪的效果。
因此在此之前先說說音樂可視化
音樂可視化
做一個類似于cd的播放器，網上有很多音樂可視化的例子，我想做成的效果圖，和我實際做出來的還是有差距的。
想做個這個，結果做成了另外一種樣子233
在文件夾下建立一個data文件，將音頻放入。
在網易云上2塊錢買的音樂有8分鐘，是mp4格式，有幾百兆，因為文件太大了，所以無法導入，一直報錯，一開始不知道是因為音頻文件過大的原因，后來我用蘋果的iTunes按照網上的步驟截取了一部分，就能讀取了，并且查閱了processing官方文檔，發現wav格式的音頻格式加載會更快，于是轉換了格式。這里為road.wav
蘋果剪輯音樂并保存為其他格式方法：
https://jingyan.baidu.com/album/ce4366494223ff3773afd391.html?picindex=5
初始化：
我將cd周圍畫出細小的豎線，他可以根據聲卡中音量來調節自身的透明度值。
繪制豎線：
另外值得一提的是，在processing幫助文檔當中，有介紹音樂的播放，如果鼠標點擊按鈕，則音樂暫停，重新點擊，則音樂會接著剛才暫停的地方繼續播放。
開關開啟之后增加效果
（1）添加雪花效果：
代碼如下，雪花效果就非常簡單了，其實我覺得這里面最麻煩的就是要進行判斷，還有把代碼放在哪個地方是符合我的想法的。
https://blog.csdn.net/qq_39097425/article/details/85016837
雪花效果： 什么都不添加，畫布會呈現白色，并且有粉色的雪球效果
（2）改變填充色塊的顏色
細心的朋友可能會注意到，我并不是把整張屏幕size全部作為我的畫布，而是自己又框選了邊界，重新設置了一下畫布：
那我這樣做的道理是什么呢？
因為我要獲取用戶繪制的點的位置，以及他們的顏色，所以我要找畫布中顏色不為255的點。但這樣有個問題，如果我的畫布是全部界面，我在開始繪制的面板，cd，開關，他們都是有顏色的。這樣會影響我的判斷，所以我在這里選取了一塊空白的區域。
接著對這個區域進行遍歷：
尋找畫布中顏色不是255的點，我這里尋找的點是位于格子中心位置，因為考慮到邊界處會有畫布的邊界線，會影響顏色的判斷。所以我這里選取的格子中心。
下面這個代碼是遍歷畫布：
最后結合我之前做的ui界面
我在這之后還做了改動，讓他有景深的效果：
前面深顏色的樹移動的速度快，后面淺顏色的因為距離遠，所以要稍微小一些，移動的速度我也調節到了最慢。
下面其實是路但是很多人都說這個看起來像云，這些是由四個橢圓組成的。想要做出來的效果就是一直往前奔跑的感覺。
在做界面跳轉的時候，有點懵，因為我一開始把畫布，paintUI中要用東西都寫到了setup中，setup只能顯示一次，所以不知道要怎么實現跳轉。后來把繪制的部分單獨拿出來，寫個函數。
這是看了這個例子后才后知后覺。
開始界面的UI繪制：
draw（）界面跳轉的標簽設置，以及更新動畫眨眼睛，更新cd中的string等主要操作。
void draw() {//the start UIif (mo==0){startUI(); //switch buttom// tag=0 OFF }if(mo==1){ paintUI();mo=2;}if (mo==2){ if(tag==0){ fill(255,255,255);//draw buttomellipse(25,width/5+10,25,25);fill(173,158,157,90);ellipse(25-5,width/5+10,8,3+7*abs(sin(second()*8)));ellipse(25+5,width/5+10,8,3+7*abs(sin(second()*8)));searchfill();}//tag=1 ONif(tag==1){ fill(255,255,255);//draw buttomellipse(105,width/5+10,25,25);fill(173,158,157,90);ellipse(105-5,width/5+10,8,3+7*abs(sin(second()*8)));ellipse(105+5,width/5+10,8,3+7*abs(sin(second()*8)));changeclr();snowdown();}//switch animation OFF wink eyesif ((mouseX-25)*(mouseX-25)+(mouseY-width/5-10)*(mouseY-width/5-10)<=25*25&&tag==0){animation();tag=1;// changeclr();}// move();//switch animation ON wink eyesif ((mouseX-105)*(mouseX-105)+(mouseY-width/5-10)*(mouseY-width/5-10)<=25*25&&tag==1){animation1();clearcanva();tag=0;// move();} drawcdall();/* for (int i=0;i<=3;i++){println(fillimg[i].x,fillimg[i].y);}*/ } }繪圖部分的效果展示
我畫了幾張丑圖，給你們看看～
看一下效果動圖：
沒有音樂就非?？上Я?#xff0c;配合著音樂在這樣的氛圍中，繪制屬于你自己的圖畫，豈不是一件美事233
- 上一篇： 对比Ubuntu与Win10的资源占用
- 下一篇： 正则匹配回车符