对比码绘与手绘——静态篇

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

Azure.

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

阅读量341

点赞数 1

分类专栏： p5.js 文章标签： p5.js

本文链接：https://blog.csdn.net/qq_37900439/article/details/84375571

版权

p5.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了手绘和使用p5.js进行码绘的异同。相同点在于两者都逐层构建图像，颜色丰富。不同点则体现在工具、过程和体验上，码绘依赖代码，规则化但繁琐，而手绘工具直观，过程自由。

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

按照实验要求画了一幅码绘，使用p5.js完成。

手绘图

手绘图是用数位板涂的，比较简陋，大概花了半小时左右，为什么要特地提一下时间呢，因为比起手绘，下面那张码绘真的是花了很长时间，并且效果也很简陋。

码绘图

为了更方便的进行码绘，我把手绘部分的图像都转换成了较为规则的物体和描点就可以画出的图像。但是即使是这样，图像也搞得我要头秃了，代表山体的折线上的点有很多，也要填充不同的颜色，整个代码就是不断的用

fill(颜色);
beginShape();
根据坐标来画图像
endShape(CLOSE);

没什么技术含量，最大的工作量就是取点，填色。

当画完了两座山以后，我已经开始烦躁并且后悔自己当时为什么没有画个简单点的图案了，用规则的几何体组合也可以画出很多比较漂亮的图案。

这里放一下巨长的代码

function setup() {
	createCanvas(208*4,154*4);//坐标乘5
	angleMode(DEGREES);	
}

function draw()
{
  background(24, 64, 86);	
  paint();
}

function paint() {
	strokeWeight(0);
	
	//月亮
	fill(252, 255, 251);
        beginShape();
        ellipse(0, 14*4, 12*4, 12*4);
        endShape(CLOSE);
	//云
	fill(249,215,90);
	beginShape();
	ellipse(35*4, 84*4, 80*4, 80*4);	
	ellipse(98*4, 90*4, 60*4, 60*4);
	ellipse(160*4, 70*4, 80*4, 80*4);
	ellipse(190*4, 84*4, 50*4, 50*4);
	endShape(CLOSE);
	
	fill(253,251,238);
	beginShape();
	ellipse(30*4, 85*4, 78*4, 78*4);	
	ellipse(101*4, 92*4, 60*4, 60*4);
	ellipse(157*4, 75*4, 75*4, 75*4);
	ellipse(200*4, 90*4, 50*4, 50*4);
	endShape(CLOSE);

        fill(245,241,213);
	beginShape();
	ellipse(30*4, 90*4,60*4, 60*4);	
	ellipse(101*4, 95*4, 45*4, 45*4);
	ellipse(157*4, 85*4, 70*4, 70*4);
	ellipse(200*4, 90*4, 45*4, 45*4);
	endShape(CLOSE);
	//山第一层左边
	fill(24, 46, 54);
        beginShape();
        vertex(0, 98*4);
	vertex(8*4, 91*4);
	vertex(16*4, 98*4);
	vertex(22*4, 95*4);
	vertex(16*4, 98*4);
	vertex(24*4, 98*4);
	vertex(29*4, 95*4);
	vertex(34*4, 94*4);
	vertex(40*4, 90*4);
	vertex(50*4, 98*4);
	vertex(52*4, 95*4);
	vertex(71*4, 106*4);
	vertex(79*4, 103*4);
	vertex(82*4, 106*4);
	vertex(68*4, 124*4);
	vertex(0*4, 124*4);
        endShape(CLOSE);
	//山第一层右边
	fill(24, 46, 54);
        beginShape();
        vertex(138*4, 106*4);
	vertex(140*4, 103*4);
	vertex(144*4, 104*4);
	vertex(156*4, 95*4);
	vertex(163*4, 102*4);
	vertex(165*4, 99*4);
	vertex(172*4, 92*4);
	vertex(178*4, 88*4);
	vertex(186*4, 95*4);
	vertex(192*4, 92*4);
	vertex(196*4, 94*4);
	vertex(199*4, 92*4);
	vertex(203*4, 91*4);
	vertex(206*4, 88*4);
	vertex(209*4, 86*4);
	vertex(208*4, 113*4);
	vertex(146*4, 116*4);
	vertex(143*4, 106*4);
	vertex(138*4, 106*4);
        endShape(CLOSE);
	//山第二层
	fill(34, 82, 102);
        beginShape();
        vertex(0, 78*4);
	vertex(8*4, 73*4);
	vertex(20*4, 83*4);
	vertex(27*4, 83*4);
	vertex(36*4, 89*4);
	vertex(44*4, 84*4);
	vertex(52*4, 87*4);
	vertex(67*4, 76*4);
	vertex(76*4, 84*4);
	vertex(78*4, 84*4);
	vertex(85*4, 97*4);
	vertex(93*4, 100*4);
	vertex(98*4, 96*4);
	vertex(103*4, 94*4);
	vertex(107*4, 89*4);
	vertex(116*4, 95*4);
	vertex(130*4, 86*4);
	vertex(138*4, 88*4);
	vertex(155*4, 73*4);
	vertex(167*4, 82*4);
	vertex(174*4, 83*4);
	vertex(182*4, 88*4);
	vertex(190*4, 83*4);
	vertex(198*4, 88*4);
	vertex(201*4, 86*4);
	vertex(204*4, 81*4);
	
	vertex(209*4, 86*4);
	vertex(206*4, 88*4);
	vertex(203*4, 91*4);
	vertex(199*4, 92*4);
	vertex(196*4, 94*4);
	vertex(192*4, 92*4);
	vertex(186*4, 95*4);
	vertex(178*4, 88*4);
	vertex(172*4, 92*4);
	vertex(165*4, 99*4);
	vertex(163*4, 102*4);
	vertex(156*4, 95*4);
	vertex(144*4, 104*4);
	vertex(140*4, 103*4);
	vertex(138*4, 106*4);
	
	vertex(82*4, 106*4);
	vertex(79*4, 103*4);
	vertex(71*4, 106*4);
	vertex(52*4, 95*4);
	vertex(50*4, 98*4);
	vertex(40*4, 90*4);
	vertex(34*4, 94*4);
	vertex(29*4, 95*4);
	vertex(24*4, 98*4);
	vertex(16*4, 98*4);
	vertex(22*4, 95*4);
	vertex(16*4, 98*4);
	vertex(8*4, 91*4);
        vertex(0, 98*4);
	
        endShape(CLOSE);
	//车
	fill(4, 36, 53);
	beginShape();
        vertex(70*4, 105*4);
 	vertex(70*4, 120*4);
	vertex(142*4, 120*4);
	//vertex(145*4, 116*4);
	vertex(142*4, 105*4);
	endShape(CLOSE);
	//车底黄线
	fill(211, 204, 173);
	beginShape();
        vertex(70*4, 120*4);
	vertex(70*4, 122*4);
	vertex(142*4, 122*4);
	vertex(142*4, 120*4);
	endShape(CLOSE);
	//车轮
	fill(46, 32, 48);
        beginShape();
        ellipse(78*4, 122*4, 5*4);
	ellipse(86*4, 122*4, 5*4);
	ellipse(134*4, 122*4, 5*4);
        endShape(CLOSE);
	
	fill(73, 66, 51);
        beginShape();
        ellipse(78*4, 122*4, 3*4);
	ellipse(86*4, 122*4, 3*4);
	ellipse(134*4, 122*4, 3*4);
        endShape(CLOSE);
	
	//车
	fill(0, 0, 0);
	beginShape();
        rect(70*4, 105*4, 30, 30);
	rect(78*4, 105*4, 30, 30);
	rect(86*4, 105*4, 30, 30);
	rect(94*4, 105*4, 30, 30);
	rect(102*4, 105*4, 30, 30);
	rect(110*4, 105*4, 30, 30);
	rect(118*4, 105*4, 30, 30);
	rect(126*4, 105*4, 30, 30);
	quad(134*4, 105*4, 142*4, 105*4, 142*4, 118*4, 138*4, 118*4);
	endShape(CLOSE);
	//灯
	fill(247, 207, 71);
        beginShape();
        vertex(142*4, 117*4);
	vertex(208*4, 112*4);
	vertex(208*4, 122*4);
	vertex(142*4, 120*4);
        endShape(CLOSE);
}

手绘与码绘异同的比较

相同点：

1. 手绘和码绘都是一层一层的画上去的，后来者居上。对码绘来说，后来画上的图像是会覆盖到前一个图像上面的，仔细想一想我们平时画画的过程，打草稿的时候，你后来的那一笔肯定是要覆盖住前面那些内容的，填色的时候也是，按照步骤最新填的色是覆盖在整幅画的最上面的，用sai或者ps等软件进行板绘时也是这样的，不过它们可以通过调整图层来达到不同效果。

2. 颜色都很丰富，只要你想，你可以随意为你的画作上不同的颜色。

不同点：

1. 工具不同。这点想必不用多说，一个是用代码进行绘画，一个是用画笔纸张等工具进行绘画。用码绘的画会节省绘画资源，不需要很多工具，你只需要一台电脑，也不需要什么美术基础，只要写出代码，你就可以创作出一幅画，美感什么的不能强求，当然画画又好看写代码能力又强的大佬也不是没有的。而用手绘的方式想要创造有美感的画你要有美术基础，要有工具。

2. 过程繁简问题。码绘的线条和图案都是规则的，直线、图形和曲线也是用数学函数绘制的，码绘像是一种规则化的创作，让人有种戴着镣铐起舞的感觉，在这个规则的前提下，你可以创作出很多规律的，整洁的，充满数学之美的图像，

3. 就使用感受来说，我还是更倾向于手绘这种可以想到什么随手就画下来的方式，更方便随意，而码绘却需要把想到的东西转换成代码的形式表达出来，更为繁琐，需要反复的计算、试错、调整，同时表现形式也不像手绘那样自由。

参考资料：

p5.js官网提供了Reference：https://p5js.org/reference/

p5.js入门教程：https://blog.csdn.net/qq_27534999/article/details/75151515

p5.js艺术创作：http://wow.techbrood.com/fiddle/7715

https://pan.baidu.com/s/1twnk-rcbedbxqBFQRX12ng

https://www.redblobgames.com/articles/probability/damage-rolls.html

Azure.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
对比码绘与手绘——静态篇

按照实验要求画了一幅码绘，使用p5.js完成。手绘图星空下的大巴——手绘手绘图是用数位板涂的，比较简陋，大概花了半小时左右，为什么要特地提一下时间呢，因为比起手绘，下面那张码绘真的是花了很长时间，并且效果也很简陋。码绘图星空下的大巴——码绘 ...
复制链接

扫一扫