猿爸教编程的粒子效果

临阵斗者皆阵列前行，给我破合，再破合， 终极一破给我破。

hello， 这是一坨肉，然后上次不是写了一颗圣诞树吗？就是这颗就缓缓飘落很多雪花的这个。然后呢？我就有一天我刷这个短视频时候，我就刷到别人的， 别人的交互好厉害，特效好好看，突然觉得我的好 low 啊。 然后我也就经过一番研究之后，其实他们是用了这个趣一点 j s， 还有就是 google pipe 啊， google media pipe， 然后 google phone， 反正就是主要就是这个 google media pipe 这个手势识别，然后就控制一下这些荔枝特效什么的，然后他们就是也是实际上他们就是一个这个 html， 就是 一个 web 程序吧，大概是。然后你如果你想调取那个，呃， 就比如说你想部署到公网的话，就必须要有 h t t p s 这个就是或者说 sl sl 证书这样的，不然的话你就无法打开那个摄像头和它交互，所以就比较麻烦。然后我就想就是能不能 通过就是本地程序，这样打开的话就会比较好一点，因为它是个，呃，是个 web 程序嘛，它肯定要 ssl， 如果本地打开的话，就是 logo 号的方式打开的话，就是不需要那个 ssl 证书。这样， 然后我就写了这么一个程序，我们跑一下， 然后我们可以控制一下， 这样是保持原汁原样子这样散开，然后这里是选择选择某一张图片，这样 好，我们关闭一下它， 然后这怎么实现呢？它就，呃，反正它就是个 web 程序嘛， web 程序的话它肯定是通过可以浏览器打开的，其实我就是起了个服务，然后让它跑这个 web， 就 比如说我们打开 logo 号，八零八零的话也是可以打开它的，比如说 logo 号，八零八零， 好，我们去 web 打开它， 哎， low score 看也是可以的。 好，我们关掉它，大概就这样吧，反正是，然后就介绍介绍一下怎么用吧。然后的话你可以更换那个背景，背景的话在这里你可以把它换成你想要的， 然后图片吧，你可以把它给更换掉，也是放上去，放进去就行了，不用你做什么。比如说我们更换下这个，好，这里， 然后我们去更换下我们的照片，例如我的照片在这里，好，就这些美女， 然后找到刚才的这里，对，没错，这里我们删掉它，粘贴一下，然后打开这里，然后再跑一下， 啊，这个没关掉，先关掉它 散开 也是一样的操作。 还有就是就是肯定是里面的话有一行字，这个字的话也是可以更改的，就比如说这个圣诞快乐，这 我们可以在这里可以更改，就是说，呃，某某某圣诞快乐，例如说什么，呃，什么什么圆圆吧，啊啊，什么？这个圆圆也行，然后把它这个关掉先， 好，这个就是你想要的痣， 好，就到这里， 然后呢？然后就打包了，也是一个样子，我都给出来了，就是 copy 一下这两行命令，首先到这里到 terminal， 然后就复制上去，好，安装好依赖之后，然后就再复制，这行就可以打包了，然后按下之后就是到 dexter， 他就可以拿到你的程序，就可以发给你想要发的人了。教程到这里，谢谢。

大家好，欢迎来到杨小坨的课堂。哈喽，大家好啊，那互动粒子发布了之后啊，坨叔这边又收到了一些问题啊，那主要呢，就是集中在最后演示里面啊，怎么让粒子去组成甜甜圈啊，还有爱心这样的造型 啊，那我们还是老规矩，用一篇会员视频来给大家讲一讲这些是怎么做出来的啊，那么大家学会了之后啊，只要你有一些数学的基础啊，相信也可以做出你自己喜欢的其他的图案出来。 好，那话不多说，我们现在就开始啊，那么在做我们甜甜圈和爱情的造型之前啊，先解决一些人的疑问啊，就是有些人说，哎，陀叔，我运行了之后，哎，我手这样抓放抓放，为什么这个粒子不听话呢？ 哎，这里啊，我们首先啊，要把这个控制器啊给它放出来，你先要记住控制器在哪啊，然后呢，因为我们每一天去使用它的时候，光线可能不一样，导致你手指上的颜色不一样，所以每一次呢，哎，一定要把颜色吸一吸，然后重新吸一吸，再来运行会比较准。 好，那么重新吸过之后来运行好看哎，当我们的手指哎，碰到这个控紫色的控制器的时候，它就会扩散， 哎，当我们手握拳，手指不碰到控制器的时候，他就收缩了，那么当你调试完之后啊，就可以把这个控制器隐藏起来啊，你只要心里默默地记着控制器他所在的位置就可以了，哎，哎，就可以了啊，就像一个魔术一样的了。 好，那么接下来我们就来讲啊，甜甜圈是怎么做出来的？好，那么要做甜甜圈呢，我们先这样啊，我们先把这个控制器的代码先给他关掉啊，我们把这个摄像头给他关闭， 不要让这个视频侦测啊，来影响我们调试啊，我们调试的时候还是使用变量的滑杆会更方便一点，我们试一下 啊，好，没有问题啊，现在我们可以通过滑杆来去控制粒子的扩散和收缩啊。 好，那还有一点提醒一下大家，就是这个作品啊，因为它的粒子数比较多啊，所以推荐大家用 turbo warp 来编程的， 那这里陀梳也是用的 top 握。另外还有一点呢，就是大家最好啊能够复制出一个新的项目出来，来做这一次的改动，因为我们在改动之后啊，原本这个球形粒子的项目啊，它就不存在了，所以呢，大家可以留存一份原来的项目，复制一份新的，我们再开始去进行改动。 好，那么我们来到粒子的代码里面啊，我们来想一想一个甜甜圈它的结构， 其实他就是一个圆环嘛，对不对？但是他这个圆环呢，是一个有粗细的圆环，那我们第一步先不考虑他的粗细，先克隆出一圈粒子出来，然后让他在这个三维空间当中旋转。 那做出一个圆环呢，和之前做出一个球体的公式他肯定不一样了啊，之前我们球体呢就是定义了他的一个 c 台，也就他的俯仰角纬度 啊，并且啊，根据这个 c 塔啊，去实时的计算出它的 x、 y、 z 三个值。那么做出圆环呢，我们换一种方式啊，我们在克隆粒子的时候，就把它的 x、 y、 z 啊三个坐标值给它计算好， 在克隆体里每一帧重复执行的时候呢，再去更新它的三个坐标的值，让它旋转起来啊，那让我们来把这个代码重构一下啊，这个 c 塔变量我们暂时就不需要了，所以把设定 c 塔的代码给它删除掉。 好，转儿，我们直接在克隆粒子的手法 x、 y、 c 的 坐标给它定下来。 好，然后呢把这段代码哎，切过来，一会儿我们去制作圆环的时候也是需要的啊，但是这个右转一度就不需要了啊，然后把这些拖出来的代码给它放回去。 好，那么接下来我们来讲，我们怎么样去构造一个圆环呢？其实我们只需要让我们粒子啊，面向一到三百六十度的垂垂方向， 然后呢，从我们舞台的中央零零的位置开始向外去移动一个固定的步数，比如说我们就让他移动一百步，那么这个时候他得到的 x 和 y 坐标，那他是不是就是一个圆环了已经， 好，我们把这些都删掉啊，都不要了，把它的 x 变量设为 x 坐标， y 变量设为 y 坐标啊，它理应就是一个圆环了啊， 那还有这里变量 r 的 设定也可以删掉了啊，我们暂时不需要它了。好，现在我们运行看看，点击小绿棋。哎，可以看到一个呈圆环状分布的粒子就出来了啊，那我们多点击几次小绿棋呢，可以看到每一次这个粒子分布都是随机的啊，稍有不同。好，那这样呢，我们第一步就完成了。 好，那接下来我们要做的就让这个圆环可以在三维空间当中旋转起来，说白了就是让这个圆环上的每一个粒子啊， 都可以绕我们的 y 轴旋转，也就是说在这里克隆题启动时的代码里面呢，每一个克隆题它在每一帧里面，它的 x 和 c 坐标是要重新进行计算的， 那因为他绕 y 轴旋转，所以 y 坐标是不变的啊，那么这个 x 和 c 坐标怎么样去得到他后移的值呢？我们先来看一个最简单的例子，我们把这个运行停止，然后把这个例子显示出来， 好，把它大小放大一点吧，这样我们看得清楚啊，一百五十，再大一点两百吧。 好，比如说我们一个例子啊，它就在这个位置啊，它的 x 坐标是六十七， y 坐标是五十二，我们怎么样可以让它绕着舞台的中央 进行旋转呢？也就是零零位置进行旋转呢？好，我们先把这个实现了，它就可以换算到三维空间里坐标的计算。好，那我们可以这样来写啊，首先呢，我们要把这个例子到舞台中央的距离呢， 哎，我们是不是有个到什么什么的距离这块积木啊，哎，用这块积木呢，可以获取到当前角色到另一个角色的距离值，哎，那我们就可以来新增一个角色，就叫它中央， 然后呢把它放在零零这个坐标的位置。哎，那这样子，我们再回到这个粒子角色的代码里面，就可以直接获取它到舞台中央零零位置的距离了，对不对？ 好，然后再面向中央 右转一百八十度拍 好，我们来解读一下这段代码。首先粒子不管他在舞台上什么地方，我们先获取到了他到舞台中央的距离啊，可以就作为他绕舞台中央旋转的这个圆周的半径，我们获取到了， 放在变量 r 里面，然后呢，让它先面向中央，再右转一百八十度，那是不是就得到了从中央指向我们当前粒子的一个方向了 啊？然后呢，再重复执行里面，每一次先移到中央，再让它右转一点点啊，再移动这个半径部，那是不是每一次都可以让它获取到它在这个圆周上下一帧的位置？我们来运行看看啊， 好，绕一圈可以看到没有问题啊。哎，那么是不是这个粒子在任意位置我们都可以呢？比如说我们让它离舞台中央近一点，看看会怎么样？ 哎，它还是绕着舞台中央旋转，对不对？它的旋转半径是比较小的，那我们再给它拉的远一点看看，哎，它就是一个比较大的旋转半径了。 好，那有了这个之后呢，我们再去做刚才我们说的啊，每一帧命令要去重新计算它的 x 和 c 坐标，就很方便了啊。 好，首先呢，我们可以先让这个克隆题产生的时候啊，直接就移动到这个 x 和 c 的 位置上去，然后移到位置上去之后呢，哎，把这段代码拼过来， 去记录下他到中央，也就是到 y 轴的的距离是多少，然后再面向中央，再右转一百八十度。好，接着再把这段代码给他搬到重复执行里面来，这个就不需要了。 那这样呢，我们每一帧里执行完这三行代码之后啊，我们这个粒子当前的 x 和 y 坐标，其实对应的就是他三维空间里的 x 和 c 坐标了。 好，所以呢，我们这里，哎，再给他把他的 x 四和 c 坐标进行更新， 更新成他当前的 x 四和 y 坐标。哎，好，我们来试试看。好，没有问题啊，我们这个圆环就绕 y 轴旋转起来了。 好，那接下来呢，我们只需要让这个圆环它有一个粗细，看起来就是一个甜甜圈了， 那也就是说在我们克隆粒子去生成 x， y， z 坐标的时候呢啊，这里的代码再要进行一些增加啊，我们可以这样想，作为一个甜甜圈啊，我们在它这一个圈上任何一个地方，如果砍上一刀，它的结面也是一个圆圈，对不对？ 那么当我们一个粒子啊，在一个圆圈上定好位之后，那么除此之外，这个粒子它还需要定义好它在这个小圆环上洁面圆环上 它的朝向是朝哪里的啊？因此啊，我们还是需要一个变量，我们可以用一个 theta 啊，之前我们做球体的时候已经有一个变量 theta 了，我们可以把它拿过来用。 好，那么在它移动完一百步之后呢，我们再来做一个 theta 变量，把 theta 变量呢，同样的设为一到三百六十之间的随机数，让它在目前圆环的基础上再继续进行移动啊， 让它移动啊，用一个乘法四十乘以 cosine theta， 那 为什么是四十乘以 cosine theta 呢？我们可以这样想啊，我们把这一个结面上啊，它需要移动的增量啊，分成两部分的向量，那一部分呢，是它沿当前的 x 和 y 轴平面上当前指向的运动方向上，它会有一个向量的分量，除此之外呢， 它沿着 c 轴还有一个分量，那么这两个分量呢，一个刚好是 cosine， 它一个是 cosine， 那 么这个四十呢，指的就是这一个结面的圆的半径，就是四十啊。好，所以 c 坐标呢，我们给它设置的值，就像刚才说的啊，把这个 cosine 改成 cosine 就 可以了。 好，那现在我们再来看看啊，点击运行 a， 一个甜甜圈就出来了，我们可以让它转的慢一点。好，这里每一帧里右转的角度，我们给它从二改成一啊，重新运行 啊，就慢一些了，对不对？好，除此之外，我们还可以增加这个粒子的数量，让它看起来更漂亮啊，因为如果你是在 turbo wolf 里面运行的话，是可以把它克隆体数量的上限取消掉的， 把这个无线克隆的勾打开就可以了。好，然后呢，我们把这里重复执行的次数，比如说改成八百次，我们预先来看看， 哎，就看到一个好多粒子组成的一个立体的甜甜圈了啊，好，那这个时候我们再来拉动 riq 啊，显然它并没有用完，因为我们在粒子的代码里面并没有去使用这个 riq 变量啊， 哎，但是这个功能呢，说来也就简单了啊，因为我们只需要把我们已经计算出来的这个 x， y， z 三个坐标在使用的时候去乘以这个 ratio 的 比例系数就可以了。好，所以呢，我们用一个乘法拿出来， 然后呢把 rito 搬过来，那我们就复制一份，哎，把这个 x 放进来乘上啊，再复制一份，把 y 放进来乘上。还有呢， c 啊， c， 注意了，我们有三处地方去使用 c 的， 所以呢，这里，哎，需要使用三份啊，这一份再复制一份啊，把 c e 改都改成 c e 乘以 r ii。 好， 现在我们再来看看啊，好， r ii 变大， a 就 放大了，没问题啊， 缩小再放大，但是我们发现好像这个 r ii 到六的时候就完全看不见了，好像最大的时候给它放到三比较合适一点，对不对？ 好，那么我们就可以怎么样再把控制器的代码给它接上，并且啊，把这个最大值啊从六改成三啊，我们再来试试看，我变心，我们看一下啊， 哎，没问题啊，现在我们可以通过手势去控制这个甜甜圈的放大和缩小的。 好，那么我们依然还是先把这个摄像头给它关闭掉，然后我们来讲爱心是怎么做出来的？好，那我们来到粒子的代码里面， 哪有生成一个爱心呢？其实就是对于这个克隆粒子来说，我们要换另外一套公式来去生成啊，粒子的三位坐标了。好，那我们就把这段代码呢给它复制一份出来。好，我们给它做好标记啊， 打个注示啊，这是甜甜圈。哎，那我们回到这里来写爱心啊，它的粒子生成应该是什么规则？那爱心要生成呢？我们事实上是可以直接可以使用公式去生成的 啊，好，那我们把这里的哎，这些代码就统统都不要了， 那么爱心的这个坐标生成公式啊，大家就直接跟着拼就可以了啊。 好，那么大家拼好这段公式之后，一定要仔细核对这个公式的嵌套啊，包括系数的数值啊，都对不对啊？因为公式确实比较复杂一些。好，拼完之后我们直接来运行看看， 哎，可以看到一个爱心形状的轮廓就出现了啊，但是这个爱心看着就不太饱满，对不对？它只是一个线条，哎，那很简单，我们可以怎么样呢？就直接在现有的 x、 y、 z 的 坐标基础上给它增加一些随机数，让它向周围扩散开来就可以了吗？ 然后这样来想，给 x 坐标增加一些随机数， y 坐标增加一些随机数，还有 c 坐标也增加一些随机数 啊，随机数呢，我们就给它在负十五到十五之间随机。 好，来雨欣看看啊，哎，那这样一个爱心的形状不就出来了吗？好，那老样子啊，我们还是把控制器的代码给它接上，再来试试看。 好，没问题啊，这个爱心的放大缩小也实现了啊，哎，那么在这个基础上，只要你知道一些三维结构它的参数防尘，你就都可以把它应用到这个作品里面来啊，那我们举个例子 好，比如说，哎，这边啊，我们把这个再复制一份出来啊，啊，给他加上一个注示啊，这是爱心， 我们把这里面的代码大部分的都给它删掉啊， 那比如说，如果你想要做一个球壳，哎，那就可以怎么去写呢啊？我们直接按照公式来去写它的 x、 y 和 c 坐标啊 啊，那比如这样一个公式，哎，它就可以生成一个球壳了， 哎，那么回到我们最初要做成一个球体也可以怎么样写呢？只要给它设置上不同的半径就可以了，对不对？ 来看，用这种方式也可以生成我们最初做的这个球体啊。啊，那当然，你当你做出任何一种三维结构之后，你都可以把控制器给它拼上去啊，用手势去控制它。 哎，那么如果你也做出了一些比较好玩的三维结构的话，也欢迎到我们的讨论群里面来分享哦。好，那么今天的课就上到这里，下课。

哈喽大家好，好多友友在后台私信主包圣诞树教程，本次视频就是详细教程。第一步，需要在桌面新建一个文件夹，文件夹可以随便命名，可以看见文件夹为空的文件夹。第二步，打开 vscot， 点击打开文件夹，打开刚刚建立的空文件夹， 左侧会出现文件夹名称，点击新建文件命名，文件的结尾必须为 html， 将写好的 html 文件复制进来，这里可以加入主包的公开群获取文件。 第三步，再应用商城添加安装 liveriver 插件，安装好后点击右下角勾勒，会跳转至浏览器，这时候就会出现圣诞树了。第一次进入会有摄像头权限申请通知，打开摄像头就可以进行手势操作，张开手掌是粒子散开，摆动手掌，粒子会上下左右动，捏住会打开照片， 握拳是粒子收拢。第四步，点击 i remember 添加照片，将想添加的照片存在文件夹里，选择照片，此时照片就可以打开了。 大家可能会问，这个过程和 gemini 有 啥关系？ gemini 主要是帮助我们实现各种奇思妙想的工具，比如我们想改变圣诞树的颜色，那先打开 as studio， 将自己的想法输入，此时它会按照你的想法生成你需要的圣诞树。 代码生成后点击 preview， 可以 提前预览效果，但是主包今天不知道为啥跑不出来，所以还是复制代码用 vsco 打开， 点击新建文件，记得命名文件的后缀是 html， 并且将文件存在提前建好的文件夹里，将代码复制过来，点击右下角运行代码，新的圣诞树就做好了，大家可以根据自己的想法递属于自己的圣诞树。 最后回到主页，只需要双击 html 的 文件就可以在浏览器打开了，快去试一下吧！

今天搭吊车 记得点赞关注哦！

来了，宝子们，像这样圣诞交互员代码 gmi 三主包给你们整理好了，电脑、平板、手机都可以直接实现，非常简单，零基础也能操作，下面教你们获取。 首先点本视频右下角分享键，接着点一下分享链接，再打开这个工具，打开后代码元包会弹出，点击立即查看，找到你想要的代码元，保存下来就可以了。

如果你最近缺少掌控感，教你个咒语就可以获得。这样在浏览器里输入前提，科学上网， s d u d o d o g g 点 com 在 这里找到输入框，输入下面的关键词， 可以截图保存， ocr 识别提取，你就可以得到很有趣的支持。鼠标和摄像头识别，手势驱动，具有脉冲粒子模型变化和变色的效果，是不是很简单有趣。 当然你也可以继续加入创意，有更多自己的定制玩法，赶紧收藏点赞试试吧！

像这种通过自己一个手势来控制生成圣诞树，展开就是粒子爆炸的效果，握拳就是生成圣诞树，然后呈现出自己想呈现的一个照片， 这种小应用只需要一段提示词就可以实现，而且这里面这个图片也可以自定义。像我这个做的还稍微有点简陋一点，如果你有很好的创意，你就可以去跟艾国通，让他去生成你想要的效果。 那像这种效果是怎么做出来的？其实很简单，扣子大家都知道吧？扣子现在上线了一个扣子编程，它里面可以去开发智能体工作流，还有这个网页应用，还有移动应用，我们这次就可以选这个网页应用，把我发给大家提示词直接粘贴进来去提交就可以了，效果就是这个样子的， 就比如现在我把这个提示词给参进来，就这么多提示词就可以提交，这样都不需要我们去管了，它就会自动去开始开发各种各样的一个命令创建文件，那最后过个一两分钟效果就在右侧给呈现出来了。 如果你还有其他好的一些创意或者点子，就可以继续在下面跟他去沟通，给他提要求，你提完之后他会自动又在右侧继续改，大家可以去试一试。如果你有很好的想象力，再加上现在这种 ai 工具，真的是可以做太多太多事情。