使用 Kitten 编程猫绘制一个 Y 方向平铺的立方体集合

简介: 使用 Kitten 编程猫绘制一个 Y 方向平铺的立方体集合

效果如下图所示:我们实际上使用了 2D 来模拟 3D 效果。

de03d664352c1943a1920018d20c346d.png

应用程序启动时,默认只绘制一个立方体,因此我们在初始绘制的函数里,只执行动态绘制 X 方向的立方体这一个逻辑。因为默认 X 方向的立方体只有1个,所以只会绘制一个立方体。

0753d86da8e5dcaa9c51fc61d3db2d88.png

每次动态绘制 X 方向的立方体,都会首先计算 X 方向立方体初始定点的 X 和 Y 坐标。之所以每次绘制前都会重新计算,是因为我们的应用允许用户动态添加新的立方体,即总的立方体个数会动态增加。

18aa8d5d2f9d9ded9a9bbf83debc711e.png

为了确保初始立方体在屏幕正中绘制,我们计算 x 方向立方体初始顶点 X 坐标的公式如上图所示,用立方体棱长乘以 X 方向的立方体个数再除以2.

从左到右绘制全部立方体的逻辑是通过下图的重复执行积木完成的。在调用绘制单个立方体积木之前,确保变量 X方向动态立方体X坐标的值被正确设置。

0c11f0a501f0fcff4de2e993e955c8ed.png

在循环体内,变量 X方向动态立方体X坐标 的值被累加,步长为立方体棱长。如果想实现拆分效果,在这个步长基础上再增加50即可。

拆分效果如下:

d2c29c9952d892817bebb4f1577506f6.png

在事件响应函数里,需要依次绘制X,Y 和 Z 三个方向的立方体。

6add3216f507990732197a41bdc44661.png

Y 方向立方体的绘制比较简单,在第一个点的立方体绘制完毕后,回到点1,将点1的朝向调整旋转角度,然后移动斜边变量代表的步数,即到点2.

805255e539050f6cb407657051898207.png

到了点2之后,调用动态绘制Y方向立方体 函数,在里面每次调用从左到右绘制全部立方体函数之前,先设置 X 方向立方体初始顶点的 X 和 Y 坐标。这个坐标通过首先回到最初始计算出来的原点,然后每次沿着旋转角度方向,移动斜边长度的 N 倍来到达新的起始点。此处 N 即为 y 方向的循环次数。

5b50f8ff9f438fc5ca4dc7ca856e080b.png

相关文章
|
3月前
PPT 动画-多层旋转(圆角三角形)
PPT 动画-多层旋转(圆角三角形)
31 0
Kitten 动态绘制 Y 轴方向立方体的实现方法
Kitten 动态绘制 Y 轴方向立方体的实现方法
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题
关于已知线段,如何求封闭图形轮廓的一些猜想
关于已知线段,如何求封闭图形轮廓的一些猜想
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题(2)
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题
如何在 kitten 里生成动态个数个立方体(水平方向平铺)以及避免闪烁问题(2)
使用 Kitten 编程猫绘制一个 Y 方向平铺的立方体集合
使用 Kitten 编程猫绘制一个 Y 方向平铺的立方体集合
|
自然语言处理 JavaScript 前端开发
【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现
【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现
817 0
【计算机图形学】六面体旋转并实时切换虚线实线 - 代码实现