写点什么

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

  • 2021 年 12 月 10 日
  • 本文字数:1862 字

    阅读完需:约 6 分钟

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

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



(像不像你小时候上画画课和微机课画的那个)


1.什么是 p5.js?

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


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


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

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
用户头像

公众号:海拥 2021.11.29 加入

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

评论

发布
暂无评论
从0到1教你如何使用 p5.js 绘制简单的动画