码绘实践第一课——动态图形的实现

2023-10-20 16:58

本文主要是介绍码绘实践第一课——动态图形的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

码绘实践——使用p5.js来绘制

1. 用于临摹的动态图形在这里插入图片描述
观察动图的构成,是由白色的六边形和黑色的背景组成。从p5.js的官方网站上找到参考实例用到其中的写正多边形的函数。

function polygon(x, y, radius, npoints) {//绘制正多边形函数let angle = TWO_PI / npoints;beginShape();for (let a = 0; a < TWO_PI; a += angle) {    let sx = x + sin(a) * radius;let sy = y + cos(a) * radius;vertex(sx, sy);}endShape(CLOSE);
}

polygon(x, y, radius, npoints)改变最后的系数,就可以显示出不同的正多边形。
开始进行临摹:
function draw() {
background(0);
push();
translate(width 0.2,height0.2);
rotate(frameCount / 20.0);
polygon(0,0,40,6);
pop();
}
第一步做一个自转的正六边形,rotate函数来控制它的旋转;
在这里插入图片描述
第二步开始实现多个的排列:但现在的排列实现是用多个重复的上述语句来实现的,根据观察是奇数排为六个正六边形,偶数排是五个正六边形。开始用for循环来简化代码。
在这里插入图片描述
for(var i=0;i<=5;i++){
push();
translate(width (0+i0.2),height*0);
rotate(frameCount / 20.0);
polygon(0,0,40,6);
pop();
}【0~6】个正六边形的实现
观察每排之间间隙:
在这里插入图片描述
实现代码:【完整】

function setup() {createCanvas(400, 400);
}
function draw() {background(0);fill(211,211,211);//淡灰色for(var i=0;i<=5;i++){for(var k=0;k<=5;k++){push();translate(width *(0+i*0.2),height*(0+k*0.34));rotate(frameCount / 22.0);polygon(0,0,40,6);pop();}}for(var j=0;j<=4;j++){for(var h=0;h<=4;h++){push();translate(width *(0.1+j*0.2),height*(0.17+h*0.34));rotate(frameCount / 22.0);polygon(0,0,40,6);pop();}}
}
function polygon(x, y, radius, npoints) {//绘制正多边形函数let angle = TWO_PI / npoints;beginShape();for (let a = 0; a < TWO_PI; a += angle) {    let sx = x + sin(a) * radius;let sy = y + cos(a) * radius;vertex(sx, sy);}endShape(CLOSE);
}

在这里插入图片描述
改变边数做出像齿轮滚动一样的感觉:
在这里插入图片描述
2.临摹的第二个动图:在这里插入图片描述
尝试后是sin函数相位的变化来制作出动态的感觉;

function draw() {background(0);
// -------- 获取时间 ------------------- //
// 获得毫秒数
var Millis = millis();
// 获得秒数,相比second(),能获得小数点后的部分
var Second = millis()/300;var wt=Second;stroke(255,99,71);strokeWeight(4);fill(0);arc(200,200,350,350,PI,PI+PI*(39/80*sin(wt+10/5)+41/80));arc(200,200,325,325,PI,PI+PI*(39/80*sin(wt+9/5)+41/80));…………//省略~

在这里插入图片描述

分布截图显示:
在这里插入图片描述
小拓展##
用循环写的时候发现的奇特改变,wt也随循环次数改变;
for(var i=1;i<=13;i++){
arc(200,200,0+(i25),0+(i25),PI,PI+PI*((39/80cos(wt+(i/5)))+41/80));
}
在这里插入图片描述
若是在setup建立背景而不再draw中每次刷新背景;
在这里插入图片描述
在这里插入图片描述
(类似雨刷器的效果)感受到数字的神奇~
stroke(20
i,15i,150+i);//改变颜色做出绚丽感觉。
在这里插入图片描述
以上动图找到的规律是PI,PI+PI
(39/80*sin(wt+【】)+41/80)
sin函数中的【】数值越大就会越快抵达尽头处。
在这里插入图片描述
2.p5.js使用中,有很多有用的函数在示例和参考文献中;本次的实验就尝试学习到了许多有趣的东西;其中还有3Dbox的实现也十分的好看:

function setup() {createCanvas(500, 500,WEBGL);
}
function draw() {background(0);noFill();strokeWeight(2);rotateX(frameCount * 0.05);rotateY(frameCount * 0.05);stroke(255,215,0);box(130, 130, 130, 4, 4);rotateX(frameCount * 0.03);rotateY(frameCount * 0.01);stroke(0,255,255);box(100, 100, 100, 4, 4);rotateX(frameCount * (-0.03));rotateY(frameCount * (-0.03));stroke(160,32,240);box(70, 70, 70, 4, 4);
}

在这里插入图片描述
小结:
此次实验觉得码绘很神奇,几行代码就可以展现不同的图样;色彩变换也十分的方便,相比于手绘若存在于明显的规律时,码绘会优于手绘。最后推荐大家好好利用P5.js Home 中的参考文献和示例。
**

参考资料:

**
p5.js参考文献
p5.js范例
开始第一幅“码绘”——掌握大杀器”循环“,一招搞定百千万个懵逼脸
开始第一幅“码绘”——Javascript、p5.js及HTML5简介

这篇关于码绘实践第一课——动态图形的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/248427

相关文章

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注