码绘VS手绘（一）静态绘图
码绘VS手绘（一）静态绘图
- 一、前言
- 二、实验要求
- （一）主题
- （二）内容
- 三、实验内容
- （一）码绘
- 码绘效果
- 整幅图画主要用了一些基础的p5.js图形，下面是用到的p5函数：
- 程序结构：
- （二）手绘
- 四、总结——编程与手绘的对比
- 五、完整代码
- .html文件
- .js文件
- 参考链接汇总：
一、前言
这篇博文是互动媒体技术课程的作业之一，学习编程两年多，CSDN无数次拯救了在作业中挣扎的我，现在竟然也要在这里发博文了，有点惶恐。
直接用p5.js开发，由于之前接触过JavaScript，p5.js上手就十分简单了。下面是具体的实验要求和实现过程。
p5.js官方文档（内附详细函数示例）
二、实验要求
（一）主题
- 对比用代码和用手绘创作静态绘画。
（二）内容
- 尝试用绘图函数画一幅静态作品,尽可能用多种绘图函数和各种参数设置，画出较高复 杂性的作品。
- 用手绘方式来画相近的内容，将绘图的图形基元限定于自己程序中用到的类型。 例如,若程序中只用到了“ellipse", 那么 手绘时也只画圆圈。
- 从思路、技术、创作体验、创作偏好等方面来比较二者,讨论异同,写一份实验报告，实验报告题目为”编程与手绘的对比 从思路、技术、创作体验、创作偏好等方面来比较二者,讨论异同,写一份实验报告。
三、实验内容
（一）码绘
- 尝试用绘图函数画一幅静态作品,尽可能用多种绘图函数和各种参数设置，画出较高复杂性的作品。
想尝试码绘出一只米奇出来，再加上一点小配景，画出一个比较完整的场景。先看最终效果：
码绘效果
米奇还比较像吧，整个米奇主要用圆和四边形就能做到，只不过画的时候麻烦一些，其他的配景相对而言就很简单了。
整幅图画主要用了一些基础的p5.js图形，下面是用到的p5函数：
（1）创建画布createCanvas()
createCanvas(w, h, [renderer])
w ：画布宽度
h ：画布高度
renderer：常量，一般直接用默认值，不进行设置
（2）设置画布颜色background()
background()的用法自由度很高，不论是rgb表示还是16进制表示都支持，我的程序里主要是用直接rgb表示。
background(220,220,220);
（3）无边框noStroke()
（4）设置填充颜色fill()
与background()用法相似，在绘制图形之前设置填充颜色。
（5）绘制椭圆ellipse()
ellipse(x, y, w, [h])
x ：圆心的 x 坐标
y ：圆心的 y 坐标
w ：椭圆形的宽度
h ：椭圆形的高度
（6）绘制方形rect()
rect(x, y, w, h, [tl], [tr], [br], [bl])
x ：方形的 x 坐标
y ：方形的 y 坐标
w ：方形的宽度
h ：方形的高度
tl ：可选性左上角拐角半径值
tr ：可选性右上角拐角半径值
br ：可选性右下角拐角半径值
bl ：可选性左下角拐角半径值
（7）绘制任意四边形quad()
quad(x1, y1, x2, y2, x3, y3, x4, y4)
x1 ：第一个点的 x 坐标
y1：第一个点的 y 坐标
x2 ：第二个点的 x 坐标
y2 ：第二个点的 y 坐标
x3 ：第三个点的 x 坐标
y3 ：第三个点的 y 坐标
x4：第四个点的 x 坐标
y4 ：第四个点的 y 坐标
（8）绘制曲线bezierVertex()
bezierVertex(x2, y2, x3, y3, x4, y4)
x2 ：第一个控制点的 x 坐标
y2 ：第一个控制点的 y 坐标
x3 ：第二个控制点的 x 坐标
y3：第二个控制点的 y 坐标
x4 ：第一个锚点的 x 坐标
y4：第二个锚点的 x 坐标
（9）绘制三角形triangle()
triangle(x1, y1, x2, y2, x3, y3)
x1 ：第一个点的 x 坐标
y1：第一个点的 y 坐标
x2 ：第二个点的 x 坐标
y2：第二个点的 y 坐标
x3：第三个点的 x 坐标
y3：第三个点的 y 坐标
程序结构：
（完整程序见文末）
function setup() // 函数将在程式开始时被调用一次，定义初始的环境属性。
{
var c=createCanvas(1900, 920);
}
function draw() //持续重复调用
{
background(220,220,220);
//……调用其他绘图函数
}
function Miky(x,y){}//绘制米奇
function Tree(x,y){}//绘制树，树的位置由参数x、y确定
function Grass(x,y){}//绘制小草，小草的位置由参数x、y确定
function Cloud(x,y){}//绘制云，云的位置由参数x、y确定（二）手绘
四、总结——编程与手绘的对比
-
通过这次实验，还是能明显感觉到编码画图和手绘的区别的。
-
一般来说，手绘是一个从整体到细节的过程，先有整体的构图，再刻画局部细节；但编码不同，要从最细枝末节出发，然后将各种细小的图案进行整合、调节，前期准备的工作量极大，但是随着图库的不断丰富，后期调用的时候非常迅速。
-
从技术方面来讲，手绘的技术水平与人的关系比较大，不同的人技术差别会有天壤之别；编码绘图更限制于计算机本身的功能，在资源相同的情况下，不同的人之间的技术水平不会相差太多。
6 -
画图的主体挑选了一个感觉上比较简单的米奇来画，但是我显然低估了码绘的麻烦程度，各种小圆圈小方块组合起来，还要不断调整位置调整颜色调整层次关系，十分耗时耗力，好在最后还挺像的（最后画手指头实在是太麻烦了，就当米奇握着拳头呢吧），整个过程真的挺有趣的，玩得不亦乐乎，甚至想给他画个城堡（也就先想想，有时间再实现吧）。
五、完整代码
.html文件
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js exampletitle>
<style> body {padding: 0; margin: 0;} style>
<script src="../p5.min.js">script>
<script src="../addons/p5.dom.min.js">script>
<script src="../addons/p5.sound.min.js">script>
<script src="…….js">script>
head>
<body>
body>
html>.js文件
function setup()
{
var c=createCanvas(1900, 920);
}
function draw()
{
background(220,220,220);
Miky();
Cloud(200,150);
Cloud(400,80);
Cloud(1200,80);
Cloud(1600,150);
Tree(1500,750);
Tree(900,580);
Grass(200,580);
Grass(120,650);
Grass(600,620);
Grass(550,650);
Grass(795,590);
Grass(1400,755);
Grass(1300,700);
Grass(1000,557);
Grass(950,650);
Grass(1700,725);
}
function Miky(x,y)
{
noStroke();
fill(0,0,0);
ellipse(400,400,100,100);//头
ellipse(350,350,65,65);//耳朵
ellipse(450,350,65,65);
ellipse(400,480,60,90);//身体+四肢
rect(385, 500, 10, 60);
rect(405, 500, 10, 60);
quad(385, 440, 395, 440, 350, 500, 340, 500);
quad(415, 440, 405, 440, 450, 500, 460, 500);
fill(255,217,193);//脸
ellipse(400,425,68,50);
ellipse(385,395,35,65);
ellipse(415,395,35,65);
fill(255,255,255);//眼睛+鼻子+嘴
ellipse(390,400,15,35);
ellipse(410,400,15,35);
fill(0,0,0);
ellipse(400,420,25,15);
ellipse(390,408,8,20);
ellipse(410,408,8,20);
fill(255,255,255);
ellipse(392,410,3,6);
ellipse(412,410,3,6);
ellipse(405,420,6,4);
stroke(0);
strokeWeight(1);
fill(255,0,0);
beginShape();
vertex(380, 425);
bezierVertex(380, 435,420, 435,420, 425);
bezierVertex(420, 450, 380, 450, 380,425);
endShape();
noStroke();
fill(230,0,0);//衣服+鞋子+手
ellipse(400,500,70,60);
rect(370, 500, 29, 40);
rect(400, 500, 29, 40);
fill(255,255,255);
ellipse(385,500,20,25);
ellipse(415,500,20,25);
fill(240,240,0);
ellipse(410,560,20,10);
ellipse(417,570,35,20);
ellipse(435,567,30,30);
ellipse(390,560,20,10);
ellipse(383,570,35,20);
ellipse(365,567,30,30);
fill(255,255,255);
ellipse(349,495,15,15);
ellipse(342,505,27,27);
ellipse(451,495,15,15);
ellipse(458,505,27,27);
}
function Tree(x,y)
{
noStroke();
fill(128,64,64);
rect(x-100, y-400, 100, 400);
fill(0,104,52);
ellipse(x-50,y-400,300,300);
ellipse(x-200,y-400,200,200);
ellipse(x+100,y-400,200,200);
ellipse(x-50,y-550,200,200);
ellipse(x-150,y-500,150,150);
ellipse(x+50,y-500,150,150);
}
function Grass(x,y)
{
noStroke();
fill(0,175,0);
triangle(x, y-40, x-10, y, x+10, y);
triangle(x-12, y-30, x-10, y, x+5, y);
triangle(x+12, y-30, x-5, y, x+10, y);
}
function Cloud(x,y)
{
noStroke();
fill(255,255,255);
ellipse(x,y,100,80);
ellipse(x-40,y+10,80,70);
ellipse(x+50,y+20,80,60);
ellipse(x+100,y+10,60,30);
}参考链接汇总：
p5.js官方文档（内附详细函数示例）
创建画布createCanvas()
设置画布颜色background()
无边框noStroke()
设置填充颜色fill()
绘制椭圆ellipse()
绘制方形rect()
绘制任意四边形quad()
绘制曲线bezierVertex()
绘制三角形triangle()