作业的主题是“运动”
码绘
吃豆人静态图
这是第一幅p5作业，当时就看到了吃豆人的图片立马就想做一个吃豆人的静态图。
吃豆人动图
既然吃豆人的图片已经制作出来了，就紧接着让他能动起来吃豆子。
代码
var x=0;
var y=0;
var t=0;
var pai=3.14
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
strokeCap(ROUND);
strokeWeight(7);
fill(255,255,0);
//笑脸
if(x<250)
{
arc(50+x,150,90,90, pai/8-t,-pai/8+t);
fill(0,0,0);
strokeWeight(5);
ellipse(45+x,130,5,5);
}
if(x>=250&&x<490)
{
arc(300,150+y,90,90,-11*pai/8+t,3*pai/8-t);
fill(0,0,0);
strokeWeight(5);
ellipse(320,145+y,5,5);
y=y+1
}
if(x>=490)
{
arc(-190+x,390,90,90,pai/8-t,-pai/8+t);
fill(0,0,0);
strokeWeight(5);
ellipse(-195+x,370,5,5);
}
//豆豆
strokeWeight(0);
fill(255,255,0);
if(x<90)
{
ellipse(140,150,15,15);
}
if(x<170)
{
ellipse(220,150,15,15);
}
if(x<250)
{
ellipse(300,150,15,15);
}
ellipse(380,150,15,15);
if(y<80)
{
ellipse(300,230,15,15);
}
if(y<160)
{
ellipse(300,310,15,15);
}
if(y<240)
{
ellipse(300,390,15,15);
}
ellipse(380,310,15,15);
if(x<570)
{
ellipse(380,390,15,15);
}
ellipse(50,310,15,15);
ellipse(50,390,15,15);
strokeCap(BEVEL);
strokeWeight(0);
fill(0,10,255);
rect(0,40,400,5);
rect(0,90,400,5);
rect(0,200,250,5);
rect(250,200,5,200);
rect(0,250,110,5);
rect(110,250,5,150);
rect(350,200,50,5);
rect(350,250,50,5);
rect(345,200,5,55);
x=x+1;
t=pai/8*sin(10*(t+x)*3.14/180)
}
手绘
手绘想表达动态是很困难的，所以我就用第一组图表示起始与终止的图片状态来表达运动；第二组图片表达的是主人公的嘴动起来的原理来代表运动；第三组图是用的一个吃豆人吃一个豆子的过程表达运动；第四组则使用吃豆人的延迟，表示在每一个位置时的吃豆人来表达运动。
码绘改进
在上面的作业做完之后，我认为无限循环的运动可能更加的表现运动的主题，所以对代码进行了修改。
var x=0;
var y=0;
var t=0;
var i=60;
var pai=3.14
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
strokeCap(ROUND);
//地图外框
strokeWeight(5);
stroke(0,10,255);
fill(0,10,255);
rect(60,10,280,5);
rect(10,50,5,295);
rect(60,388,280,5);
rect(385,50,5,295);
strokeWeight(11);
fill(0,15,0);
arc(58, 58, 90, 90, -PI, -HALF_PI);
arc(343, 58, 90, 90, -HALF_PI,0);
arc(58, 346, 90, 90, HALF_PI,-PI);
arc(343, 346, 90, 90, 0,HALF_PI);
//中心
strokeWeight(5);
stroke(0,10,255);
fill(0,10,255);
rect(150,150,100,5);
rect(150,150,5,100);
rect(250,150,5,100);
rect(150,250,105,5);
//豆豆
strokeWeight(0);
fill(255,255,255);
if(x<0||240<x)
{
ellipse(90,80,15,15);
}
if(x<60||300<x){
ellipse(90+i,80,15,15);
}
if(x<120||360<x){
ellipse(90+2*i,80,15,15);
}
if(x<180||420<x){
ellipse(90+3*i,80,15,15);
}
if(x<240||480<x){
ellipse(90+4*i,80,15,15);
}
if(x<300||540<x){
ellipse(90+4*i,80+i,15,15);
}
if(x<360||600<x){
ellipse(90+4*i,80+2*i,15,15);
}
if(x<420||660<x){
ellipse(90+4*i,80+3*i,15,15);
}
if(x<480||720<x){
ellipse(90+4*i,80+4*i,15,15);
}
if(x<540||780<x){
ellipse(90+3*i,80+4*i,15,15);
}
if(x<600||840<x){
ellipse(90+2*i,80+4*i,15,15);
}
if(x<660||900<x){
ellipse(90+1*i,80+4*i,15,15);}
if(x<720||960<x){
ellipse(90,80+4*i,15,15);
}
if(x<780&&x>60){
ellipse(90,80+3*i,15,15);
}
if(x<840&&120<x){
ellipse(90,80+2*i,15,15);
}
if(x<900&&180<x){
ellipse(90,80+1*i,15,15);
}
//笑脸
if(0<x&&x<240){
strokeWeight(0);
fill(255,255,0);
stroke(255,255,0);
arc(80+x,80,80,80, pai/8-t,-pai/8+t);
fill(0,0,0);
strokeWeight(5);
stroke(0,0,0);
ellipse(75+x,60,5,5);
}
if(240<x&&x<=480){
strokeWeight(0);
fill(255,255,0);
stroke(255,255,0);
arc(330,80+y-240,80,80, -11*pai/8-t,-13*pai/8+t);
fill(0,0,0);
strokeWeight(5);
stroke(0,0,0);
ellipse(350,80+y-240,5,5);
}
if(480<x&&x<=720){
strokeWeight(0);
fill(255,255,0);
stroke(255,255,0);
arc(330-x+480,320,80,80, 9*pai/8-t,7*pai/8+t);
fill(0,0,0);
strokeWeight(5);
stroke(0,0,0);
ellipse(330-x+480,300,5,5);
}
if(720<x&&x<960){
strokeWeight(0);
fill(255,255,0);
stroke(255,255,0);
arc(90,320-y+720,80,80, -3*pai/8-t,-5*pai/8+t);
fill(0,0,0);
strokeWeight(5);
stroke(0,0,0);
ellipse(110,320-y+720,5,5);
}
if(x==960){
x=0;
y=0;
}
x=x+2;
y=y+2;
t=pai/8*sin(10*(t+x)*3.14/180)
}
手绘码绘对比
1.码绘的创作要比手绘复杂，因为要计算每一个的位置长度，手绘就可以按照自己的感觉想在那里作画就直接的作画，相比较而言手绘比较随心所欲。
2.码绘的创作要比手绘精美，一方面是手绘并没有过于认真，但是码绘出来的会十分的精细，圆，色彩，循环的时间都十分的精确，如果代码高端，表达出来运动会更加的流畅，好看。
3.码绘会有更多的尝试和不确定性，代码总是在不断地尝试，修改；手绘如果需要上色基本就是一锤定音，而码绘出错可以随时的修改，在而言，码绘经常循环中会出来意想不到的情况，可能大多的情况都是不好的，但也会有时候出来更加精彩的动图，或者带来突发的灵感。
总结
以上就是所有的内容，制作的吃豆人虽然大部分就是循环语句和固定的点，主要在于体验了码绘和手绘的区别，也感受到了码绘在运动上的表达相比手绘会简单很多。怀念吃豆人！！！