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


Posted in Javascript onOctober 23, 2019

用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<Width;i++)
 {
  arc(i,600,50,15,PI,0);
  i=i+80;
 }
 }

 function drawwall()
 {
 noStroke();
 fill(100,10,0);
 rect(0, 0, Width, Height);

 fill(190,70,20);
 rect(0, Height-wall_Height, wall_Width, wall_Height);
 
 drawWuYan1(); 
 drawWuYan2(); 
 drawWuYan3();
 drawWuYan4();
 }

 function drawWuYan1()
 {
 stroke(20);
 fill(190,100,10);
 for(var i=0;i<Width;i++)
 {
  rect(i-5,wall_Height+70,wuyan_width,wuyan_height);
  i=i+wuyan_width;
 } 
 }

 function drawWuYan2()
 {
 var cwu2_1=color(50,120,30);
 var cwu2_2=color(60,10,0);

 for(var j=0;j<Width+80;j++)
 {
  setGradient(j-65,wall_Height+35,
  wuyan_width,wuyan_height+10,
  cwu2_1,cwu2_2,1);
  stroke(180,130,20);
  rect(j-65,wall_Height+36,
   wuyan_width,wuyan_height+10);
  j=j+wuyan_width;
 } 

 var cwu3_1=color(10,20,10);
 var cwu3_2=color(80,100,20);
 fill(50,120,30);
 setGradient(0,wall_Height-15,
  Width,50,cwu3_1,cwu3_2,1);
 }

 function drawWuYan3()
 {
 noStroke();
 fill(190,150,90);
 for(var k=0;k<Width;k++)
 {
  rect(k,skyHeight,wuyan_width,10);
  k=k+wuyan_width;
 }

 fill(190,100,10);
 rect(0,skyHeight+15,Width,12);
 fill(190,110,30);
 rect(0,skyHeight+35,Width,35);
 }

 function drawPIdwon(x_trans)
 {
 stroke(90,50,50);
 push();
 translate(x_trans, skyHeight+100);
 rotate(0.0);
 fill(140,100,50);
 arc(0, 0, quad_width, quad_width-15, 0, PI);
 pop();
 }

 function drawPIdwon_shadow(x_trans,shadow)
 {
 noStroke();
 push();
 translate(x_trans, skyHeight+100);
 rotate(0.0);
 fill(10,20,10);
 arc(0, 0, quad_width+shadow, quad_width+shadow, 0, PI);
 pop();
 }

 function drawquad(i,j,x_trans)
 {
 var c1=color(90,50,50);
 var c2=color(180,90,50);
 setGradient(x_trans-(quad_width/2)+i, 
 skyHeight+93-j,
 quad_width,5,c1,c2,2);
 }


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 drawWuYan4()
{
 for(var x_trans=50;x_trans<Width;x_trans++)
 {
  drawPIdwon_shadow(x_trans+10,10);
  drawPIdwon(x_trans);
  for(var i=0;i<5;i++)
  {
  yp=i*5;
  drawquad(i,yp,x_trans);
  }
  drawCicle_all(x_trans);
  x_trans=x_trans+120;
 }

 
 
}

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();
 }

 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);
  }
 }
 }

代码结构解析

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);
 }
 }

至此,动画完成。

手绘与码绘的对比

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

发现的问题

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
tween.js缓动补间动画算法示例
Feb 13 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
vue中activated的用法
Jan 03 Vue.js
vue父组件给子组件的组件传值provide inject的方法
Oct 23 #Javascript
p5.js临摹旋转爱心
Oct 23 #Javascript
JavaScript 作用域scope简单汇总
Oct 23 #Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 #Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
JavaScript提升机制Hoisting详解
Oct 23 #Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 #Javascript
You might like
php设计模式小结
2013/02/15 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php查看网页源代码的方法
2015/03/13 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
群教班子对照检查材料
2014/08/26 职场文书
创先争优个人总结
2015/03/04 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
大学生逃课检讨书
2015/05/04 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
消防安全培训工作总结
2015/10/23 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
导游词之河北白洋淀
2020/01/15 职场文书