p5.js如何实现故宫橘猫赏秋图动画-创新互联

这篇文章给大家分享的是有关p5.js如何实现故宫橘猫赏秋图动画的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网页空间、营销软件、网站建设、平江网站维护、网站推广。

用p5.js实现一个小动画——故宫橘猫赏秋图

互动媒体第二次作业要求我们手绘一幅动画,再用代码实现出动画。由于时间原因,手绘并没有画动画,而是以插画的形式画了一张,然后p5实现了动画。

这里先放效果图:

板绘插图

p5.js如何实现故宫橘猫赏秋图动画

码绘效果图

p5.js如何实现故宫橘猫赏秋图动画

这里强烈建议直接运行代码!!!gif丢帧!!!可怜我的渐变啊啊啊啊!!!

下面附上完整代码:

var Width=600;
var Height=700;
var pixel=1;

var Y_AXIS = 1;
var X_AXIS = 2;

var skyHeight=190;
var wall_Width=600;
var wall_Height=300;
var wuyan_width=120;
var wuyan_height=20;
var quad_width=70;
var quad_height=30;
var center_x=500;
var center_y=115;
var cat_scale=111;

var easing=1; 

var Time;

//face_color=color(180,180,150,0.5*255);
function setup() {
 createCanvas(Width,Height); 
 }

 function draw() { 
 
 frameRate(5);
 drawwall(); 
 drawsky();
 push();
 translate(10,-5);
 YinxingTree();
 pop();

 draw_wallshadow();

 if(center_x<-10)
  center_x=650;
 center_x-=15*easing;
 drawcat(cat_scale,center_x,center_y);

 translate(10,-25);
 noStroke();
 fill(30);
 rect(Width-10,0,200,Height);

 push();
 YinxingTree();
 pop();

 }

 function drawcat(cat_scale,center_x,center_y)
 {
 stroke(200,200,240);
 noStroke();
 //肚子
 pos1_x=center_x-(cat_scale)/3;
 pos1_y=center_y+(cat_scale)*2/5-5;

 pos2_x=center_x+(cat_scale*1/3);
 pos2_y=center_y+(cat_scale)*2/5;
 
 //前体
 pos3_x=pos1_x-(cat_scale/5);
 pos3_y=center_y+(cat_scale)*2/5;

 pos4_x=pos1_x-(cat_scale/8);
 pos4_y=center_y+(cat_scale)/15;

 pos5_x=pos4_x-(cat_scale/8);
 pos5_y=pos4_y-(cat_scale)/20;

 //头
 pos6_x=pos5_x-(cat_scale/4);
 pos6_y=pos5_y-(cat_scale)/6;

 pos7_x=pos5_x-(cat_scale/6);
 pos7_y=pos5_y-(cat_scale)/30;

 pos8_x=pos5_x-(cat_scale)*3/8;
 pos8_y=pos5_y+(cat_scale)/8;

 pos9_x=pos8_x+(cat_scale)/5;
 pos9_y=pos8_y+(cat_scale)/5;
 
 //屁股
 pos10_x=pos2_x-(cat_scale/4)*0;
 pos10_y=pos2_y-(cat_scale)*1/3;

 pos11_x=pos10_x+(cat_scale*1/8);
 pos11_y=pos10_y+(cat_scale)/10;


 fill(220,200,180);

 triangle(center_x,center_y,pos1_x,pos1_y,pos2_x,pos2_y);
 triangle(center_x,center_y,pos1_x,pos1_y,pos3_x,pos3_y);
 fill(150,70,10);
 triangle(center_x,center_y,pos3_x,pos3_y,pos4_x,pos4_y);
 triangle(pos3_x,pos3_y,pos4_x,pos4_y,pos5_x,pos5_y);
 triangle(pos3_x,pos3_y,pos5_x,pos5_y,pos6_x,pos6_y);
 
 fill(150,70,10);
 triangle(pos3_x,pos3_y,pos7_x,pos7_y,pos8_x,pos8_y);
 fill(180,100,10);
 triangle(pos8_x,pos8_y,pos9_x,pos9_y,pos5_x,pos5_y);

 fill(150,70,10);
 triangle(center_x,center_y,pos2_x,pos2_y,pos10_x,pos10_y);
 triangle(pos2_x,pos2_y,pos10_x,pos10_y,pos11_x,pos11_y);

 fill(180);
 feetControl(pos1_x-6,pos1_y);
 feetControl(pos2_x-4,pos2_y);

 noFill();
 weiba(pos11_x,pos11_y);
 }

 function weiba(x,y)
 {
 push();
 strokeWeight(10);
 stroke(150,70,10);
 x1=x-20;
 y1=y;

 x2=x+20;
 y2=y-20;

 x3=x+25;
 y3=y+5;

 x4=x+55;
 y4=y-20;

 bezier(x1,y1,x2,y2,x3,y3,x4,y4);
 noStroke();
 pop();
 }

 function feetControl(x,y)
 {

 if(x%2==0)
 {
  rect(x-(cat_scale)/10,y-8,(cat_scale)/10,(cat_scale)*1/3+8); 
 }
 else
 {
  quad(x,y-10,
  x-(cat_scale)/10,y-10,
  x-(cat_scale)/10+(cat_scale/10),y+(cat_scale)*1/3,
  x+(cat_scale/10),y+(cat_scale)*1/3);

  quad(x,y-15,
  x-(cat_scale)/10,y-15,
  x-(cat_scale)/10-(cat_scale/5),y+(cat_scale)*1/3,
  x-(cat_scale/5),y+(cat_scale)*1/3);
 }
 }

 function segment(trans_x, trans_y, a,segLength) {
 push();
 translate(trans_x, trans_y);
 rotate(a);
 rect();
 pop();
 }

 function draw_wallshadow()
 {
 noStroke();
 var c1=color(160,10,0);
 var c2=color(80,10,80);
 setGradient(0,600,Width,150,c1,c2,1);

 noStroke();
 fill(160,10,0);
 for(var i=0;i

代码结构解析

1.背景:

其实画背景还挺简单的,基本物体就是红墙,屋檐,银杏树,天空。
天空是渐变的,用了一个函数,p5官网里面也有:

function drawsky()
 {
 var c1 = color(90,150,205);
 var c2 = color(190,200,220);
 noStroke();
 setGradient(0, 0, Width, skyHeight,c1,c2,1);
 }

 function setGradient(x, y, w, h, c1, c2,axis) 
 {
 noFill();
 if (axis == Y_AXIS) { // Top to bottom gradient
  for (var i = y; i <= y+h; i++) {
  var inter = map(i, y, y+h, 0, 1);
  var c = lerpColor(c1, c2, inter);
  stroke(c);
  line(x, i, x+w, i);
  }
 } 
 else if (axis == X_AXIS) { // Left to right gradient
  for (var k = x; k <= x+w; k++) {
  var interk = map(k, x, x+w, 0, 1);
  var ck = lerpColor(c1, c2, interk);
  stroke(ck);
  line(k, y, k, y+h);
  }
 }
 }

红墙就不细说了,直接看屋檐,屋檐还稍微有点东西。观察故宫屋檐结构之后发现,故宫这样的建筑简直太有规律可循了!你只要生成一个基本元,接下来的就只用循环生成就可以。我们主要来看看圆木那一块怎么实现。
圆木那里其实还挺麻烦,主要是有光的影响,圆木被分为三个面:受光面,反光面,阴影面,直接用一个圆肯定解决不了,我想了一个办法,用三个扇形就可以区分三个面。

具体代码:

function drawCicle(x_trans,angle,c1,c2,c3,i)
{
 push();
 noStroke();
 fill(c1,c2,c3);
 translate(x_trans-i+7,skyHeight+70+i*3);
 rotate(angle);
 arc(0,0,50,50, 0, PI/2);
 pop();
}

function drawCicle_all(x_trans)
{
 for(var i=0;i<8;i++)
 {
 drawCicle(x_trans+quad_width-8,24.5,100,10,10,i);
 drawCicle(x_trans+quad_width-8,-2.2,130,110,90,i);
 drawCicle(x_trans+quad_width-8,1,70,20,10,i);
 drawCicle(x_trans+quad_width-8,-3.5,200,160,80,i);
 }
 stroke(50,10,10);
 fill(140,100,50);
 ellipse(x_trans+60,skyHeight+95,50,50);
 fill(80,60,20);
 ellipse(x_trans+60,skyHeight+95,35,35);
}

还有瓦片上的阴影,也用了渐变过渡,这里就不贴代码了。

银杏树

一开始对银杏树没什么头绪,观察了好几棵学校里的银杏,在大风刮过之时,金黄树叶在风中颤抖摇晃,我突然有了灵感——色块堆积。我可以不用准准确确的画出这棵树长啥样,我只需要保证它在运动中是符合这棵树的逻辑的,那么这棵树就是成功的。

下面贴上代码:

function YinxingTree()
{
 push();
 drawtree(220,180,0,-20,20,random(0.6));
 drawtree(120,60,0,-100,100,random(0.01));
 drawtree(120,60,0,-50,160,random(0.01));
 drawtree(180,160,0,40,160,random(0.05));
 drawtree(200,100,0,-20,100,random(1));
 drawtree(200,160,0,0,120,random(0.5));
 drawtree(220,160,0,55,160,random(0.1));
 drawtree(240,200,0,50,100,random(0.3));
 drawtree(240,200,0,50,180,random(0.3));
 drawtree(240,200,0,80,190,random(1));
 drawtree(220,180,0,-50,80,random(0.1));
 translate(150,90);
 drawtree(220,180,0,-50,150,random(0.5));
 translate(-100,-150);
 drawtree(240,200,120,-100,100,random(0.01));
 pop();
}

function drawtree(c1,c2,c3,pos_x,pos_y,pos_angle)
{
 push();
 rotate(pos_angle);
 var trans_x;
 var trans_y;
 var trans_angle;

 fill(c1,c2,c3);
 for(var i=0;i<20;i++)
 {
 trans_x=random(50);
 trans_y=random(20);
 trans_angle=random(-0.5);
 push();
 translate(trans_x,trans_y);
 rotate(trans_angle);
 drawYinXing(pos_x,pos_y);
 pop();
 }
 pop();
 
}

 function drawYinXing(pos_x,pos_y)
 {
 stroke(200,150,60);
 push();
 translate(pos_x, pos_y);
 rotate(0.0);
 arc(0, 0, 30, 30, 0, PI/2);
 pop();
 }

大量使用radom可以让这棵树更自然。

2.动画主角——猫

这里我先对猫进行了一些处理——低多边形处理。
吸取了第一个实验的教训,这次我先设置了一个中心点,然后在根据这个点扩充出有关猫的肢干总共12个点,然后画三角形,形成一个没有四肢,没有尾巴的橘猫。

p5.js如何实现故宫橘猫赏秋图动画

尾巴用了贝塞尔曲线,坐标也跟中心点关联。

猫的四肢是运动视觉的关键!!!动画之所以能动是因为有承上启下的连续性动作。猫行走从侧面看过去就是两腿相互交叉变换。所以在写动画逻辑之前你需要先画出关键帧状态。
关键帧状态确定了就可开始着手动画逻辑:首先视觉上我们先要营造出猫在原地踏步的感觉。我们有两个关键帧状态,所以可以运用模运算,在运动的中心坐标基础上模2,结果对应两个状态。

附上代码:

function feetControl(x,y)
 {

 if(x%2==0)
 {
  rect(x-(cat_scale)/10,y-8,(cat_scale)/10,(cat_scale)*1/3+8); 
 }
 else
 {
  quad(x,y-10,
  x-(cat_scale)/10,y-10,
  x-(cat_scale)/10+(cat_scale/10),y+(cat_scale)*1/3,
  x+(cat_scale/10),y+(cat_scale)*1/3);

  quad(x,y-15,
  x-(cat_scale)/10,y-15,
  x-(cat_scale)/10-(cat_scale/5),y+(cat_scale)*1/3,
  x-(cat_scale/5),y+(cat_scale)*1/3);
 }
 }

至此,动画完成。

手绘与码绘的对比

在动画这个应用上,其实两者各有千秋。手绘能做到画面更加精致有更多细节,更能体现质感,但同时,它又太过费时。而码绘在运动这一方面有着得天独厚的优势,它能更平滑的完成动画操作。

发现的问题

码绘在建立场景的过程中,发现对于环境色这一概念,几乎还是一个空白领域。

感谢各位的阅读!关于“p5.js如何实现故宫橘猫赏秋图动画”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:p5.js如何实现故宫橘猫赏秋图动画-创新互联
网页链接:http://scyanting.com/article/csegjj.html