p5.js创意编程——动态图形临摹及拓展

目录观察图形动态所需函数代码实现一些需要注意的点全部代码生成效果一个拓展完整代码实现效果观察图形动态显而易见,这是一个小方块先分别进行在长、宽、高即,x,y,z轴上的放大,然后旋转的同时进行等比例缩小回原来的大小。所需函数根据以上观察到的结果,仔细参考一下p5.js的Reference便能够轻松地找到所需要用到的一些p5.js自带的函数。代码实现一些需要注意的点 // 每...
摘要由CSDN通过智能技术生成

观察图形动态

所需要临摹的动态图形
显而易见,这是一个小方块先分别进行在长、宽、高即,x,y,z轴上的放大,然后旋转的同时进行等比例缩小回原来的大小。

所需函数

根据以上观察到的结果,仔细参考一下p5.js的Reference便能够轻松地找到所需要用到的一些p5.js自带的函数。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码实现

一些需要注意的点

  // 每次绘制方块都需覆盖一次背景色以覆盖之前的正方体
  background(0); 
  // 添加材质,使得每个面看上去颜色不同增强立体感
  normalMaterial(); 
  // 绘制时倾斜少许角度以呈现正方体的立体感
  rotateX(-PI / 9);
  rotateY(PI / 4);
  // 无边框
  noStroke();
  // 需使用scale()函数,而不能直接对正方体的参数进行改变,
  // 如若这样,则会使得正方体的单个面进行平移而其他面不动,
  // 从而破坏了原来正方体的形状。
  scale(L, W, H);

全部代码

let boxL = 1;  // 控制正方体的长
let boxW = 1; // 控制正方体的宽
let boxH = 1; // 控制正方体的高
let boxS = 2; // 控制正方体的整体大小
let fr = 60; // FPS

function setup() {
   
  createCanvas(400, 400, WEBGL);
  background(0);
  frameRate(fr); // 设置 FPS

}

function 
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值