一次失败尝试：-（码绘写实眼睛

一次失败尝试：-（码绘写实眼睛

这是互动媒体第一次作业，要求手绘一幅静态画，然后再用代码将静态画实现。将两幅用不同形式画出来的画进行对比，得出一定结论。
这里我手绘作品所用工具：数位板，码绘使用p5.js

绘画第一步：观察

手绘准备

每一个美术生，上课的第一件事不是让你练排线，而是让你去观察临摹本的线条为什么要这么排，这个物体的结构为什么要这么画，这幅画面的透视，这些画的明暗交界线在哪……就拿一幅结构素描举例——
（图源网络，非原创）
试想一下，假如我们要画的就是这样一幅画，我们应该从什么地方入手？
如果是我的话，我会先把这些物体的大概范围，位置确定好，比如：罐子中线以上，右中大苹果，后面藏着西红柿，左前高脚杯，最下大梨子……
接下来是透视，明显俯视角度，所以越在下面的物体，透视越大。在结构素描中具体表现为切面从下到上变形程度递增。
再接下来就是明暗交界线划分以及排线（这两部分跟本文没啥太多联系就不细说了）

以上是手绘的观察，那么代码跟它比起来，需要准备些什么呢？

码绘准备

首先你得有一张画布。
其次你需要确定你画的画中心点在哪里（这一点可以和手绘的位置确定对应起来）
然后是根据客观的物理存在抽象出一定的数学逻辑。比如说之前提到的透视，物理逻辑是——小俯视，越往上透视越大。那么在数学逻辑里，你可以抽象成一条线段和一个位移变量y，y越小（在p5中画布中y值从上到下递增）线段越短……当然你也可以抽象成圆的半径，旋转角度等等。总之，你需要根据现实的物理世界创建一个代码的逻辑世界。
最后才是动手写代码……

绘画进行中：基本元素

手绘

说到传统画画，其实就是点线面的组合。
还是回到上面的结构素描，你可以发现，这一幅画几乎就是用线条构成的！什么罐子结构线是弧，瞎扯，其实都是线段连接而成的！手绘到这里就没话说了，排线吧，顺着纹理来，排到最后画也就出来了。

码绘

码绘选择的基本元素其实挺多，点线基本几何体都可以成为你的基本元素，你需要做的就是根据规则把这些基本元素正确排放……

课程作业实践

当时p5还不是很熟练，只是大概清楚了一些基本的点线基本图形，所以根据实际情况，我选择了只有黑白灰变化的素描……话不多说，先放一张自己板绘的一张眼睛——
当时画完这只眼睛，我就想着码绘大概就稳了，毕竟它的组成元素大部分都是曲线，甚至眼球都可以用圆形加以概括，然后我代码画出来的眼睛是下面这样的：-（
丑的惨不忍睹……
是我高估了自己对贝塞尔曲线的掌握程度，每次画出来的曲线都要调整很久才能勉强达到自己对这幅画的需求。
下面附上没有技术含量的完整代码……

function setup() {createCanvas(600,400);
}function draw() { background(150);stroke(10);fill(120,90,20);strokeWeight(8);ellipse(300, 250, 80, 80);fill(50,20,20);ellipse(300, 250, 50, 50);strokeWeight(1);fill(200,200,200);ellipse(280, 240, 20, 15);createeye();createmeis(8,-20);}function createmeis(x,y)
{createmei1(-20+x,12+y);createmei1(-12+x,9+y);createmei1(-3+x,6+y);createmei1(-3+x,5+y);createmei1(10+x,0+y);createmei1(20+x,-5+y);createmei1(30+x,-5+y);createmei1(40+x,-5+y);createmei1(50+x,-6+y);createmei1(60+x,-10+y);createmei1(65+x,-10+y);createmei1(70+x,-12+y);createmei1(80+x,-15+y);createmei2(85+x,-15+y);createmei2(95+x,-15+y);createmei2(90+x,-15+y);createmei2(105+x,-15+y);createmei2(110+x,-17+y);createmei2(120+x,-20+y);createmei3(140+x,-17+y);createmei3(150+x,-1+y);createmei3(130+x,-7+y);createmei3(140+x,-5+y);createmei4(162+x,-10+y);createmei4(175+x,-8+y);createmei4(180+x,-3+y);createmei4(190+x,0+y);
}function createmei1(x,y)
{beginShape();strokeWeight(4);curveVertex(180+x,190+y);curveVertex(180+x,200+y);curveVertex(190+x,180+y);curveVertex(200+x,165+y);curveVertex(220+x,150+y);curveVertex(220+x,150-y);endShape();}
function createmei2(x,y)
{beginShape();strokeWeight(4);curveVertex(180+x,210+y);curveVertex(180+x,200+y);curveVertex(190+x,180+y);curveVertex(210+x,160+y);curveVertex(230+x,150+y);curveVertex(230+x,150+y);endShape();
}
function createmei3(x,y)
{beginShape();strokeWeight(4);curveVertex(180+x,210+y);curveVertex(180+x,180+y);curveVertex(200+x,165+y);curveVertex(220+x,160+y);curveVertex(250+x,160+y);curveVertex(270+x,160+y);endShape();
}
function createmei4(x,y)
{beginShape();strokeWeight(3);curveVertex(160+x,200+y);curveVertex(170+x,180+y);curveVertex(200+x,175+y);curveVertex(220+x,175+y);curveVertex(250+x,185+y);curveVertex(270+x,205+y);endShape();
}function createeye()
{noFill();strokeWeight(4);//下眼皮beginShape();curveVertex(320,250);curveVertex(210,271);curveVertex(320,300);curveVertex(300,300);endShape();beginShape();curveVertex(3,250);curveVertex(210,268);curveVertex(320,300);curveVertex(500,300);endShape();beginShape();curveVertex(300,290);curveVertex(300,290);curveVertex(310,295);curveVertex(350,285);curveVertex(390,250);curveVertex(400,170);endShape();beginShape();curveVertex(300,290);curveVertex(300,290);curveVertex(310,295);curveVertex(350,295);curveVertex(400,260);curveVertex(400,190);endShape();beginShape();strokeWeight(2);curveVertex(210,290);curveVertex(210,280);curveVertex(290,320);curveVertex(350,320);curveVertex(380,300);endShape();//上眼皮beginShape();strokeWeight(10);curveVertex(320,230);curveVertex(200,275);curveVertex(310,205);curveVertex(500,300);endShape();beginShape();curveVertex(320,235);curveVertex(200,275);curveVertex(310,210);curveVertex(500,305);endShape();beginShape();curveVertex(320,233);curveVertex(200,273);curveVertex(310,207);curveVertex(500,303);endShape();beginShape();strokeWeight(5);curveVertex(200,260);curveVertex(200,260);curveVertex(240,220);curveVertex(290,190);curveVertex(340,195);curveVertex(380,210);curveVertex(400,220);curveVertex(410,220);endShape();beginShape();strokeWeight(9);curveVertex(300,200);curveVertex(315,206);curveVertex(400,250);curveVertex(440,340);endShape();beginShape();strokeWeight(9);curveVertex(0,170);curveVertex(315,206);curveVertex(415,260);curveVertex(490,340);endShape();}

代码没有啥技术含量，值得一提的是画眉毛的时候用了一个自己写的函数：

function createmei1(x,y)
{beginShape();strokeWeight(4);curveVertex(180+x,190+y);curveVertex(180+x,200+y);curveVertex(190+x,180+y);curveVertex(200+x,165+y);curveVertex(220+x,150+y);curveVertex(220+x,150-y);endShape();
}

现在看看当时自己写代码的方式真的很愚钝，可以说是为了画而去凑代码，凑坐标。其实可以根据实际情况确定一个中心点，再由这个中心点进行扩展，这样会比较方便灵活。