手繪VS碼繪1.0

一、用代碼畫畫?

一談到用代碼畫畫,就想到上個(gè)學(xué)期計(jì)算機(jī)圖形學(xué)被OpenGL支配的恐懼。雖然OpenGL的功能非常強(qiáng)大,但是不建議在碼繪時(shí)使用,碼繪當(dāng)然還是要用我們的小天使——processing啦。

processing

Processing是一種特別簡(jiǎn)單并容易學(xué)習(xí)的編程語(yǔ)言,它被研發(fā)的初衷是為了服務(wù)于藝術(shù)家和設(shè)計(jì)師們,它是一個(gè)用來(lái)做數(shù)據(jù)動(dòng)畫( motion graphics)、數(shù)據(jù)可視化( data visualization)、large-scale installation work的工具。 Processing是一種具有革命前瞻性的新興計(jì)算機(jī)語(yǔ)言,它的概念是在電子藝術(shù)的環(huán)境下介紹程序語(yǔ)言。它是 Java 語(yǔ)言的延伸,并支持許多現(xiàn)有的 Java 語(yǔ)言架構(gòu),不過(guò)在語(yǔ)法 (syntax) 上簡(jiǎn)易許多,并具有許多貼心及人性化的設(shè)計(jì)。Processing 可以在 Windows、MAC OS X、MAC OS 9 、Linux 等操作系統(tǒng)上使用。以 Processing 完成的作品可在個(gè)人本機(jī)端作用,或以Java Applets 的模式外輸至網(wǎng)絡(luò)上發(fā)布。

目前Processing免費(fèi)開(kāi)放中,任何人都可以下載并使用。下載鏈接:http://processing.org/download/

二、第一幅碼繪作品

碼繪孟菲斯女孩

初識(shí)processing,只了解基本圖形的繪制,所以選取了構(gòu)圖上使用幾何圖形,顏色上多用明亮鮮艷的撞色,并配上點(diǎn)線面的裝飾設(shè)計(jì)的孟菲斯風(fēng)格。由于自己對(duì)孟菲斯風(fēng)格了解不多,便從網(wǎng)上搜索了一些孟菲斯風(fēng)格的圖片進(jìn)行臨摹繪制。以下為繪制圖形中用到的一些函數(shù)和部分代碼:

1.矩形:

noStroke();

fill(97,155,211);

rect(0,88,600,299);//藍(lán)矩形

2.圓形:

stroke(0,0,0);
fill(255,255,20);
ellipse(390,742,40,37);//右腳

3.多邊形:

stroke(0);
fill(255,0,96);
beginShape();
vertex(435,146);
vertex(426,156);
vertex(417,148);
vertex(425,138);
vertex(415,130);
vertex(423,120);
vertex(433,128);
vertex(441,118);
vertex(451,126);
vertex(443,136);
vertex(453,145);
vertex(445,154);
endShape(CLOSE);//shizijia
  }

4.扇形:

stroke(0,0,0);
fill(0);
arc(358,337,209,209,-PI,0);//toufa

5.不規(guī)則多邊形:

stroke(0,0,0);
strokeWeight(3);
fill(244,42,100);
quad(100,525,147,591,183,535,140,467);
quad(100,525,147,591,89,593,43,528);

6.貝塞爾曲線:

stroke(0);
noFill();
bezier(339,405,340,411,376,411,376,405);//zuiba

三、手繪VS碼繪

手繪草圖

板繪孟菲斯女孩

在進(jìn)行手繪的時(shí)候,由于受身邊畫材的限制(沒(méi)有上色工具),為了圖畫美觀一致,就先在紙上畫了草稿,然后在AI中用數(shù)位板繪制上色。碼繪過(guò)程中所需要的一些坐標(biāo),也是通過(guò)AI中的板繪圖案獲取,大大降低了碼繪的難度,減少了繪畫時(shí)間。但是,不得不提的是,如此簡(jiǎn)單的圖案,碼繪所需的時(shí)間比手繪和板繪長(zhǎng)得多。下面,就談?wù)勗诶L畫過(guò)程中,我體會(huì)到的兩種不同繪畫方式(手繪和碼繪)的異同。
1.相同點(diǎn)
(1)設(shè)計(jì)構(gòu)圖
在進(jìn)行正式繪畫之前,無(wú)論是碼繪還是手繪,都需要考慮設(shè)計(jì)構(gòu)圖。It is important.構(gòu)圖在任何設(shè)計(jì)藝術(shù)中都是作品創(chuàng)作的第一步,它能將創(chuàng)作者的情感進(jìn)行表達(dá)。構(gòu)圖是指藝運(yùn)用構(gòu)圖把我們所想要表現(xiàn)的客觀事物,通過(guò)主觀思維進(jìn)行提取,并通過(guò)創(chuàng)作者的巧思和設(shè)計(jì)技藝,合理地布局在畫面上,并表達(dá)出創(chuàng)作者的情感。凡是讓人印象深刻的設(shè)計(jì)作品都離不開(kāi)好的構(gòu)圖。
(2)配色
無(wú)論用什么樣的方式創(chuàng)作藝術(shù)作品,色彩搭配都至關(guān)重要。色彩的搭配是繪畫的創(chuàng)作過(guò)程中重要內(nèi)容之一。優(yōu)秀的色彩搭配不僅能夠增添作品的沖擊力與感染力,提升作品的吸引力,讓觀賞者更好的欣賞與理解作品。因此,作為一個(gè)優(yōu)秀的畫者必須要具備較強(qiáng)的色彩搭配能力。色彩在繪畫中不僅可以突出作品的特色和主題,同時(shí)也能夠美化設(shè)計(jì)的版面,增強(qiáng)整個(gè)設(shè)計(jì)作品的美感,并且給觀看者留下更深的印象。
2.不同點(diǎn)
(1)繪畫順序
手繪時(shí),一般先繪制的是主體部分的丸子頭女孩,然后再繪制其身后的背景,待所有的線框圖完成的時(shí)候,再對(duì)各部分進(jìn)行上色。而碼繪則是先繪制圖案的背景,再畫人物。因?yàn)榇a繪是將圖案分割成三角形、正方形、圓形等,然后將各個(gè)圖案疊加組合,疊加的時(shí)候后畫的圖形會(huì)遮蓋掉之前畫的圖形,所以特別注重圖案繪制的先后順序,色彩也是一邊畫一邊填充的。
(2)難點(diǎn)
手繪的繪制比較簡(jiǎn)單容易上手,照葫蘆畫瓢即可,難點(diǎn)在于繪制幾何圖案時(shí),在不通過(guò)其他工具(直尺、圓規(guī)等)的幫助下,很難畫出規(guī)范平滑的幾何圖形,上色的時(shí)候,色彩種類選擇范圍沒(méi)有碼繪大,如果不夠熟練,很難將顏色涂抹均勻。在上色過(guò)程中,一旦出錯(cuò),很難補(bǔ)救。碼繪的難點(diǎn)在于對(duì)不同函數(shù)的理解與調(diào)用,坐標(biāo)計(jì)算分布,曲線的繪制。但是碼繪繪制錯(cuò)誤時(shí),修改極為簡(jiǎn)單。
四、源碼

void setup(){
size(600,800);
strokeWeight(8);
background(255);
}
void draw(){
stroke(255,255,20);
fill(255,255,20);
rect(0,0,600,88);//黃矩形
stroke(0);
fill(255,255,20);
ellipse(431,52,40,40);
ellipse(431,52,40,40);
ellipse(493,52,40,40);
ellipse(554,52,40,40);
fill(0);
line(571,38,538,67);
stroke(241,8,89);
noFill();
beginShape();
vertex(229,67);
vertex(261,46);
vertex(284,67);
vertex(310,46);
vertex(335,67);
vertex(359,46);
vertex(382,67);
endShape();
noStroke();
fill(97,155,211);
rect(0,88,600,299);//藍(lán)矩形
stroke(0,100,183);
fill(0,100,183);
line(200,177,600,177);
line(377,223,600,223);

stroke(255);
fill(255);
int i;
i=0;
while(i<=30)
{
line(-20+20*i,319,25+20*i,395);
i++;
}
stroke(0,0,0);
strokeWeight(4);
fill(60,105,157);
triangle(422,502,560,506,585,639);
fill(97,155,211);
triangle(413,464,508,466,579,601);
fill(255);
triangle(508,466,539,379,579,601);
fill(255);
quad(413,465,508,466,539,379,448,379);
strokeWeight(8);
stroke(0,0,0);
fill(0);
line(0,319,600,319);
line(104,0,104,800);
line(0,88,600,88);
line(111,388,600,800);
stroke(0,0,0);
fill(255,0,96);
triangle(598,674,600,800,364,800);//粉三角
fill(255,255,20);
ellipse(362,800,465,465);//huangyuan
stroke(0,0,0);
fill(28,253,252);
ellipse(362,800,231,231);//lanyuan
stroke(0,0,0);
fill(97,155,211);
rect(323,645,25,70,40);//zuotui
stroke(0,0,0);
fill(97,155,211);
rect(373,645,25,70,40);//youtui
stroke(0,0,0);
fill(255,128,3);
rect(248,440,223,211,111);//shenzi
stroke(0);
noFill();
bezier(285,500,250,560,350,630,270,614);//zuogebo 
stroke(0);
noFill();
bezier(437,490,460,550,390,620,453,605);//yougebo
stroke(0,0,0);
fill(248,158,17);
rect(310,713.5,48,15,24);
stroke(0,0,0);
fill(248,158,17);
rect(366,713.5,48,15,24);
stroke(0);
fill(241,8,89);
arc(46,88,80,80,-PI,0);//fenbanyuan1
 noStroke();
fill(60,105,157);
beginShape();
vertex(56,164);
vertex(131,76);
vertex(230,66);
vertex(308,185);
vertex(232,280);
vertex(130,280);
endShape(CLOSE);//yinying
stroke(0,0,0);
strokeWeight(3);
fill(140,210,226);
quad(158,125,235,28,310,149,232,246);
quad(52,127,127,246,232,246,158,125);
stroke(0,0,0);
fill(255);
quad(158,125,235,28,127,40,52,127);//lanlifangti
strokeWeight(8);
stroke(0,0,0);
fill(255,255,20);
ellipse(334,742,40,37);//zuojiao
stroke(0,0,0);
fill(255,255,20);
ellipse(390,742,40,37);//右腳
stroke(0,0,0);
fill(255,240,202);
ellipse(357,440,80,40);//bozi
stroke(0,0,0);
fill(255,240,202);
ellipse(358,337,209,209);//lian
stroke(0,0,0);
fill(0);
arc(358,337,209,209,-PI,0);//toufa
stroke(255,240,202);
fill(255,240,202);
triangle(338,337,358,307,378,337);//liuhai
stroke(0,0,0);
fill(0);
ellipse(446,260,56,56);//youwanzi
stroke(0,0,0);
fill(0);
ellipse(271,260,56,56);//zuowanzi
stroke(0,0,0);
fill(0,255,91);
arc(360,558,67,67,0,PI);
fill(0);
line(326,558,393,558);//koudai
stroke(0,0,0);
fill(0);
ellipse(394,369,23,23);//youyan
stroke(0,0,0);
fill(0);
ellipse(316,369,23,23);//zuoyan
stroke(0);
noFill();
bezier(339,405,340,411,376,411,376,405);//zuiba
stroke(0,0,0);
fill(255,0,96);
ellipse(590,233,234,234);//fenyuan
stroke(0,0,0);
fill(255,0,96);
rect(0,387,104,301);
fill(0);
line(21,387,21,688);
line(41,387,41,688);
line(61,387,61,688);
line(81,387,81,688);//fenjuxing1
stroke(0,0,0);
fill(255,0,96);
rect(31,727,40,40);//fenjuxing2
//stroke(0);
//noFill();
//beginShape();
  //curveVertex(33, 301);
  //curveVertex(33, 301);
  //curveVertex(63, 230);
  //curveVertex(76, 246);
  //curveVertex(93, 230);
 // curveVertex(93, 230);
 // endShape();
noStroke();
fill(28,253,252);
beginShape();
vertex(42,546);
vertex(87,610);
vertex(144,608);
vertex(182,553);
vertex(136,487);
vertex(80,495);
endShape(CLOSE);//yinying1
stroke(0,0,0);
strokeWeight(3);
fill(244,42,100);
quad(100,525,147,591,183,535,140,467);
quad(100,525,147,591,89,593,43,528);
noFill();
quad(43,528,100,525,140,467,83,475);//lifangti2
strokeWeight(8);
noStroke();
fill(28,253,252);
ellipse(27,580,15,15);
stroke(0);
fill(255,128,3);
ellipse(222,430,24,24);
stroke(0);
fill(255);
ellipse(206,572,28,28);
noStroke();
fill(97,155,211);
ellipse(499,580,13,13);
stroke(0);
fill(255,0,96);
beginShape();
vertex(365,146);
vertex(356,156);
vertex(347,148);
vertex(355,138);
vertex(345,130);
vertex(353,120);
vertex(363,128);
vertex(371,118);
vertex(381,126);
vertex(373,136);
vertex(383,145);
vertex(375,154);
endShape(CLOSE);
stroke(0);
fill(255,0,96);
beginShape();
vertex(435,146);
vertex(426,156);
vertex(417,148);
vertex(425,138);
vertex(415,130);
vertex(423,120);
vertex(433,128);
vertex(441,118);
vertex(451,126);
vertex(443,136);
vertex(453,145);
vertex(445,154);
endShape(CLOSE);//shizijia
  }

五、參考資料
1.設(shè)計(jì)藝術(shù)中構(gòu)圖視覺(jué)要素的重要性:http://www.68tuku.com/article/design/201809041751.html
2.色彩搭配對(duì)一個(gè)設(shè)計(jì)師的重要性:http://www.wzsky.net/website/color/139542.html
3.原創(chuàng)插畫孟菲斯藝術(shù)風(fēng)格丸子女孩:http://huaban.com/pins/1890402093/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評(píng)論 25 709
  • 用兩張圖告訴你,為什么你的 App 會(huì)卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 14,024評(píng)論 2 59
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒(méi)有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對(duì)...
    cosWriter閱讀 11,666評(píng)論 1 32
  • 截止7月底,我來(lái)做民政社工專干崗位兩年了。還記得我是怎么來(lái)到社協(xié)崗位的,2015年社工專干崗位重新調(diào)整,因?qū)8蓫徫?..
    單眼皮婷閱讀 1,501評(píng)論 0 2
  • 第一章 明月夜,白永羲行于淮南,夜風(fēng)習(xí)習(xí),飄飄而吹衣,腰系瓊玉,將將而響,手執(zhí)長(zhǎng)劍,星目劍眉,清雅出塵。行至...
    咸魚文學(xué)博主閱讀 450評(píng)論 0 2

友情鏈接更多精彩內(nèi)容