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