从 0 到 1 教你如何使用 p5.js 绘制简单的动画

作者：海拥(haiyong.site)

2021 年 12 月 10 日
本文字数：1862 字
阅读完需：约 6 分钟

在本文中，我们将学习在 p5.js 中通过使用线条、矩形和椭圆来制作房屋的各个部分来制作房屋的简单动画。

（像不像你小时候上画画课和微机课画的那个）

1.什么是 p5.js？

p5.js 是一个 JavaScript 库，它以 Processing 的原始目标开始，使艺术家、设计师、教育工作者和初学者可以访问编码，并为当今的网络重新解释这一点。

使用软件速写本的原始比喻，p5.js 具有全套绘图功能。但是，您不仅限于绘图画布，您可以将整个浏览器页面视为您的草图！为此，p5.js 具有插件库，可以轻松与其他 HTML5 对象交互，包括文本、输入、视频、网络摄像头和声音。

p5.js 是一种新的解释，不是仿真或移植，并且正在积极开发中。官方编辑环境即将推出，还有更多功能！

2.什么是动画？

动画是一种方法，其中一组图像以特定方式组合并处理，然后它们显示为运动图像。构建动画使屏幕上的对象看起来生动活泼。

3.绘制方案

制作一个列表来存储房子的所有顶点。
声明两个变量 iter 和 counter。
设置函数 setup()，输出窗口的大小、颜色和背景，初始化 iter 和 counter 的值为 1，初始化顶点列表。
设置添加描边、描边粗细的函数 draw。
做一个 if 条件来检查边界内的 iter 如果是，则将计数器增加 0.05 并将计数器的 ceil 值设为 iter ，如果没有退出 loo 。
函数添加房子的顶点，给出线的起点和终点作为 addVertices()。
现在制作函数来绘制房屋的各个部分：
制作函数在房子里画垂直和水平线。
使函数绘制方形窗口
制作函数来绘制门。
制作函数来绘制圆形窗口。
制作函数来绘制烟囱。
完成这一步之后，现在创建一个开关盒来逐步添加房屋的所有部分。

4.代码实现

下面是上述方法具体的代码实现：

// 存储所有顶点的列表let vertices = [];
// 变量声明var iter;var counter;

复制代码

设置输出窗口的功能

function setup() {  // 输出窗口大小  createCanvas(600, 600);  // 填充颜色  fill(31);  // 输出窗口背景  background(31);  // 将变量的值设为 1  iter = 1;  counter = 1;  // 初始化顶点列表  addVertices();}

复制代码

设置绘制功能

function draw() {
  stroke(255);  strokeWeight(4);  step();
  // 范围内检查的条件  if (iter < 11) {
    // 每次增加计数器    counter += 0.05;
    // 将 iter 变量设置为 counter 的下限值    iter = floor(counter);  }  else {
    // 如果 iter 增加 11，则停止循环    noLoop();  }}

复制代码

添加房屋顶点的函数给出线的起点和终点

function addVertices() {  vertices.push(new p5.Vector(100, 300));  vertices.push(new p5.Vector(340, 300));  vertices.push(new p5.Vector(40, 380));  vertices.push(new p5.Vector(160, 380));  vertices.push(new p5.Vector(400, 380));  vertices.push(new p5.Vector(40, 550));  vertices.push(new p5.Vector(160, 550));  vertices.push(new p5.Vector(400, 550));}

复制代码

在房子里画线的功能

function drawLine(a, b) {  line(vertices[a].x, vertices[a].y,    vertices[b].x, vertices[b].y);}

复制代码

绘制门的函数

function addGate() {  rectMode(CENTER);  rect(100, 500, 70, 100);}

复制代码

绘制窗口的函数

function addWindow() {  rect(280, 430, 40, 30);}

复制代码

添加圆形窗口的功能

function addOculus() {  ellipse(100, 340, 20, 20);}

复制代码

添加烟囱的函数

function addChimney() {  rect(320, 295, 16, 20);  ellipse(320, 285, 16, 10);}

复制代码

逐步绘制房屋部分的函数

function step() {  switch (iter) {    case 1:      drawLine(5, 6);      break;    case 2:      drawLine(6, 7);      break;    case 3:      drawLine(2, 5);      drawLine(3, 6);      break;    case 4:      drawLine(4, 7);      break;    case 5:      drawLine(2, 3);      drawLine(3, 4);      break;    case 6:      drawLine(0, 2);      drawLine(0, 3);      drawLine(1, 4);      break;    case 7:      drawLine(0, 1);      break;    case 8:      addGate();      break;    case 9:      addWindow();      break;
    case 10:      addOculus();      break;    case 11:      addChimney();      break;  }}

复制代码

输出：

5.结尾

我已经写了很长一段时间的技术博客，这是我的一篇技术文章/教程。希望你们会喜欢！这里汇总了我的全部原创及作品源码：基于 HTML、CSS、JS 的小游戏 / 工具制作过程及完整源码

如果你真的从这篇文章中学到了一些新东西，喜欢它，收藏它并与你的小伙伴分享。🤗最后，不要忘了❤或📑支持一下哦

发布于: 7 小时前阅读数: 8

原文链接:【http://xie.infoq.cn/article/764d119fe12a41c335075ee43】。

海拥(haiyong.site)

关注

公众号：海拥 2021.11.29 加入

【个人网站】haiyong.site 【软件技能】Java，Python，JS 【兴趣爱好】学习使我快乐，编程令我永生【个人称号】HDZ核心组成员,CSDN原力作者

发布

暂无评论

创作场景

从 0 到 1 教你如何使用 p5.js 绘制简单的动画

1.什么是 p5.js？

2.什么是动画？

3.绘制方案

4.代码实现

5.结尾

海拥(haiyong.site)

评论