创作过程
对，一切创作都是要有其灵感及起因（比如要完成实验）的，最初是速写课画了线稿，信誓旦旦地以为可以用p5实现，结果还是被现实打脸，盲猜坐标式画图，还想上天是咋？？
俺的线稿，真是觉得自己是神仙呢想画这个样子，那最后的成品是什么样呢？？直接放图↓↓↓
嗯，变大头贴了，真的画不动了（寿终正寝.jpg），配色比较大胆，可能眼睛不太好，需要饱和度高的颜色进行视觉冲击，但真的努力还原了，就觉得还行?
关于绘制过程，我只想说，少用arc()!!! 虽说用arc()可以画出比较规律的弧，但是坐标点不好找啊，所以少尝试，也少尝试画曲线，一块块铺色，相互掩盖，最后就能达到自己想要的效果了，尝试勾线，就会误入歧途，甚至画出辣眼睛的杰作，比如！！
（尝试了一天的杰作，怎么看怎么像郭冬临，哭了）
所以不要尝试勾线，正确应该怎么画呢，我用画帽子的过程来举个例子
好，大概就是这个意思，再加一个三角形帽子的形状就确定了，这里我忘截图了，就没法接着举例了，但意思就是用基本图形拼凑想要的图案，分区域填色，而不是尝试用线勾勒出形状，这点跟手绘还是有很大不同的。
绘制代码
function drawHead(){
//hairBack
stroke(139,69,19);
strokeWeight(3);
fill(205,102,29);
ellipse(360,50,100,70);
ellipse(380,120,100,170);
ellipse(380,150,70,170);
noStroke();
triangle(365,230,430,280,385,180);
noFill();
stroke(139,69,19);
strokeWeight(8);
curve(650,245,430,275,380,80,200,180);
curve(450,280,370,230,430,275,480,250);
//head
stroke(139,69,19);
strokeWeight(3);
fill(205,102,29);
ellipse(310,150,150,175);
//hairLeft
stroke(139,69,19);
strokeWeight(3);
fill(205,102,29);
triangle(225,155,198,155,235,280);
//faceShadow
//stroke(238,149,114);
stroke(205,104,57);
strokeWeight(8);
noFill();
push();
translate(273,232);
rotate(PI/9);
ellipse(0,0,100,35);
pop();
strokeWeight(14);
line(210,160,232,225);
//face
fill(255,231,186);
noStroke();
push();
translate(210,150);
rotate(-PI/15);
rect(0,0,140,90,0,10,15,20);
pop();
push();
translate(330,216);
rotate(-PI/4);
ellipse(0,0,90,50);
pop();
push();
translate(273,232);
rotate(PI/9);
ellipse(0,0,100,35);
pop();
stroke(205,104,57);
strokeWeight(4);
//curve(300,10,315,256,360,220,350,10);
curve(360,190,360,220,315,256,315,226);
//ear
fill(255,231,186);
stroke(238,149,114);
strokeWeight(4);
push();
translate(365,145);
rotate(-PI/3);
ellipse(0,0,50,40);
pop();
noFill();
arc(360,135,20,40,0,HALF_PI);
arc(379,147,20,20,PI,PI+PI/2);
//hairRFront
fill(205,102,29);
//noStroke();
stroke(139,69,19);
strokeWeight(3);
quad(360,110,330,110,360,290,365,240);
noFill();
strokeWeight(3);
curve(250,180,330,110,360,300,250,180);
curve(300,180,330,110,360,300,300,180);
strokeWeight(6);
curve(270,120,350,110,360,295,260,120);
//hatShadow
strokeWeight(8);
stroke(238,180,180);
noFill();
push();
translate(245,110);
rotate(PI/3);
ellipse(0,0,55,155);
pop();
triangle(310,80,200,155,310,155);
strokeWeight(10);
push();
translate(325,116);
rotate(PI/4);
ellipse(0,0,55,95);
pop();
strokeWeight(5);
arc(290,100,150,140,PI,TWO_PI);
noStroke();
fill(238,180,180);
push();
translate(330,70);
rotate(PI/5);
ellipse(0,0,115,70);
pop();
//hat
fill(255,228,225);
noStroke();
arc(290,100,150,140,PI,TWO_PI);
push();
translate(245,110);
rotate(PI/3);
ellipse(0,0,50,150);
pop();
push();
translate(325,116);
rotate(PI/4);
ellipse(0,0,50,90);
pop();
triangle(310,80,200,150,320,150);
stroke(238,180,180);
strokeWeight(3);
noFill();
curve(280,10,365,100,210,100,250,10);
//eyeLeft
noStroke();
fill(255,255,255);
push();
translate(241,185);
rotate(PI/12);
ellipse(0,0,40,28);
pop();
noFill();
//stroke(79,79,79);
stroke(139,71,38);
strokeWeight(5);
curve(280,340,260,190,220,175,220,175);
strokeWeight(3);
curve(350,70,260,190,222,175,230,60);
fill(160,82,45);
circle(242,183,15);
noStroke();
fill(255);
circle(245,181,6);
//eyeRight
noStroke();
fill(255,255,255);
push();
translate(310,175);
rotate(-PI/8);
ellipse(0,0,40,28);
pop();
noFill();
stroke(139,71,38);
strokeWeight(5);
curve(240,380,288,185,328,165,325,165);
strokeWeight(3);
curve(210,80,290,185,326,165,260,90);
fill(160,82,45);
circle(310,172,15);
noStroke();
fill(255);
circle(313,170,6);
//nose
stroke(238,149,114);
noFill();
strokeWeight(5);
curve(300,280,267,215,287,205,300,250);
stroke(139,71,38);
strokeWeight(2);
curve(300,280,267,215,287,205,300,250);
//mouth
stroke(238,149,114);
noFill();
strokeWeight(5);
curve(180,100,270,235,310,230,200,280);
stroke(139,71,38);
strokeWeight(2);
curve(180,100,270,235,310,230,200,280);
}
动态背景绘制
用的和第一弹的拓展图形是一个原理，只是把点换成了自制的简易图案
图案代码：
function drawStar(x,y){
stroke(186,85,211);
fill(138,43,226);
push();
translate(x,y);
for(var i=0;i<6;i++){
push();
th = TWO_PI *i/ 5;
rotate(th);
rotate(millis()/1000);
triangle(20,20,20,-20,40,0);
pop();
}
for(var i=0;i<7;i++){
push();
th = TWO_PI *i/ 5;
rotate(th);
rotate(millis()/1000);
triangle(10,10,10,-10,20,0);
pop();
}
pop();
}
运动规律就是自身旋转同时沿y轴向下移动，脱离画布就将y置零。
下落代码：
function theFall1(){
push();
y1+=2;
drawStar(50,y1);
if(y1>height){
y1=0;
}
pop();
push();
y2+=2;
drawStar(150,y2);
if(y2>height){
y2=0;
}
pop();
push();
y3+=2;
drawStar(100,y3);
if(y3>height){
y3=0;
}
pop();
push();
y4+=2;
drawStar(50,y4);
if(y4>height){
y4=0;
}
pop();
}
function theFall2(){
push();
y5+=2;
drawStar(300,y5);
if(y5>height){
y5=0;
}
pop();
push();
y6+=2;
drawStar(300,y6);
if(y6>height){
y6=0;
}
pop();
push();
y7+=2;
drawStar(300,y7);
if(y7>height){
y7=0;
}
pop();
}
function theFall3(){
push();
y1+=2;
drawStar(550,y1);
if(y1>height){
y1=0;
}
pop();
push();
y2+=2;
drawStar(450,y2);
if(y2>height){
y2=0;
}
pop();
push();
y3+=2;
drawStar(500,y3);
if(y3>height){
y3=0;
}
pop();
push();
y4+=2;
drawStar(550,y4);
if(y4>height){
y4=0;
}
pop();
}
这里图逻辑简单，代码写的又臭又长（都忽略都忽略）。
临时更新
看大家都有交互，心慌慌，又给自己补了个交互
长按紫色按钮洒下花瓣，长按黄色按钮有光束旋转，就是把之前的背景放到了鼠标点击事件里
交互代码：
if(mouseIsPressed&&pmouseY<50){
theFall1();
theFall2();
theFall3();
fill(255,165,0);
circle(50,50,40);
}
if(mouseIsPressed&&pmouseY>100){
drawRotateBackground()
fill(255,165,0);
circle(50,100,40);
}
hhhhhh完了完了，彻底收官！！
完整代码链接：
自画像完整代码
至此整个绘制过程就完成了，Freedom!!!
总结
体会到了码绘与手绘间的不同之处，虽说过程艰辛，也犯过令人窒息的错误，但也是很有趣的！！至此又一个实验完成了，是自由的气息（？？？这位同学数字图像处理了吗？？哈夫曼编码了吗？？语音识别了吗？？天天想Freedom觉悟一看就不高）。害，滚去接着做实验了。
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
