对比码绘与手绘——静态

最新推荐文章于 2018-11-24 19:42:02 发布

sentient_

最新推荐文章于 2018-11-24 19:42:02 发布

阅读量401

点赞数 1

分类专栏： p5.js 文章标签：码绘与手绘 p5.js

本文链接：https://blog.csdn.net/sentient_/article/details/84330391

版权

p5.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

博主对比了使用p5.js进行码绘和传统手绘创作静态图像的过程，分析了两者在绘画思路、技术运用、创作体验和偏好上的异同。码绘依赖编程取点填色，手绘则注重线条与色彩的直观表达。虽然码绘繁琐，但手绘受工具限制，各有优缺点。

摘要由CSDN通过智能技术生成

博主的老师这学期布置了一些作业，其中之一就是分别用代码和双手作一幅静态图，从思路、技术、创作体验、创作偏好等方面来比较二者，讨论异同。于是这篇博客就应运而生了。
首先，展示一下作品：

参考图

参考的图片是西班牙艺术家Guim Tio的作品《热烈与孤独》中的一幅
西班牙艺术家Guim Tio——热烈与孤独

码绘

利用p5.js绘制作品

手绘

利用彩铅和双手绘制作品（好了好了，我知道很丑）

代码实现过程

function setup() {
  createCanvas(500, 393);
}

function draw() {
  background(20,39,71); //sea 
    beginShape();
     strokeWeight(0);
    fill(184, 134, 13);//yellow down
    vertex(372,342);
    vertex(390,346);
    vertex(418,348);
    vertex(445,350);
    vertex(479,345);
    vertex(500,346);
    vertex(500,500);
    vertex(372,393);
 endShape(CLOSE);
 //blue above yellow
 strokeCap(ROUND); 
 stroke(138,166,178);
 strokeWeight(5);
 line(367,338,391,344);
 line(391,344,443,348)；
 line(443,348,498,343);
     beginShape();
    strokeWeight(0);
  fill(93,33,33);//red mountain
  vertex(0,191);
  vertex(11,186);
    vertex(25,186);
  vertex(71,174);
    vertex(94,173);
    vertex(137,173);
    vertex(16,170);
    vertex(181,174);
    vertex(245,210);
    vertex(282,220);
    vertex(301,236);
    vertex(353,321);
    vertex(370,341);
    vertex(395,365);
    vertex(424,383);
    vertex(444,393);
    vertex(0,393);
  endShape(CLOSE); 
    fill(174,195,190);//sky blue l
    rect(0, 0, 500, 159); 
    beginShape();
    strokeWeight(0);
  fill(175,168,87);//yellow l
  vertex(0,164);
  vertex(6,162);
    vertex(46,162);
  vertex(110,160);
    vertex(88,156);
    vertex(81,154);
    vertex(66,154);
    vertex(40,145);
    vertex(19,143);
    vertex(0,144);
  endShape(CLOSE);  
     beginShape();
    strokeWeight(0);
  fill(46,67,50);//green
  vertex(283,159);
  vertex(306,152);
    vertex(343,134);
    vertex(374,127);
    vertex(407,109);
    vertex(419,99);
    vertex(468,81);
    vertex(488,79);
    vertex(500,78);
    vertex(500,160);
    vertex(341,161);
    vertex(304,159);
  endShape(CLOSE);
    beginShape();
    strokeWeight(0);
  fill(86,40,43);//redd
  vertex(500,114);
  vertex(484,111);
  vertex(459,117);
  vertex(413,141);
  vertex(402,143);
  vertex(390,152);
  vertex(381,153);
  vertex(366,160);
  vertex(500,160);
  endShape(CLOSE);
    beginShape();
    strokeWeight(0);
  fill(25,26,31);//black
    vertex(380,164);
  vertex(403,153);
  vertex(431,145);
  vertex(449,141);
  vertex(475,137);
  vertex(490,130);
  vertex(500,130);
  vertex(500,174);
  vertex(485,168);
    vertex(473,166);
    vertex(463,165);
    vertex(450,166);
    vertex(420,163);
    vertex(414,164);
  endShape(CLOSE);
//lighthouse
  fill(194,207,189);//gray1
  quad(138,169,142,117,146,117,146,172);
    fill(120,134,111);//gray2
  quad(146,117,146,172,156,172,156,117);
    fill(63,74,78);//gray3
  quad(156,117,156,172,165,170,160,117); 
    strokeWeight(3);
    stroke(129,146,140);//black
    line(138,116,163,116); 
    strokeWeight(0);
    triangle(138,115,163,115,151,104)
    fill(62,107,64);
}

看代码大家应该能发现吧，嗯，本次作图毫无技术性，完全靠的是取点位置，通过勾图填色实现。一开始我们先把背景色设成海的深蓝色，重复 “beginShape();fill( , , );vertex( , );…endShape(CLOSE);”。vertex( , )里面是你取的像素点位置，该段代码实现区域填色，用这段代码我们绘制出沙滩以及各种颜色的山。黄色沙滩上方的浅蓝色区域较小且为线形，我们用线段绘制。stroke( , ,);//线段填色strokeWeight(5);//线段粗细 line( , , , );//线段端点坐标。灯塔用三个四边形和一个三角形加一条线段绘制。嗯，就是如此简单没有技术含量，不过够繁琐就是了。