download：看动画，轻松学习23种C++设计模式

c语言期中考试浪漫爱情代码，前端也来凑热闹。 序 大家好，我是鲍晓。前段时间想缓一缓，没想到过了这么久才放松下来。我非常想念每个人。我们回去开始开卷之旅吧！虽然我每天都很懒，业余时间也会偷点三个j，但是最近的文章应该都是以三个j为主。 这是这个三个j专栏的开篇之作，但是鲍晓这次不想上来谈论真相，也不想教人们如何使用三个j。相反，他将通过一个浪漫的案例让大家体验2D和3D整体生活的区别。 最近程序员火了，火的有点突然。在《点亮我，温暖你》这部剧中，程序员李默给了女友一段超级爽的跳动的爱情。这个名为《李默的浪漫爱情》的片段瞬间出现在很多地方，包括我的家庭组。 南，就是这样。说实话，真的有点爽。虽然包很有味道，但是程序员不能放弃浪漫，所以是这样一个幸福的决定。本文将围绕李默的浪漫爱情和3D爱情两个案例，体验不同的发展思路和模式。

李浪漫爱情密码的实现 先来看看效果(颜色为青色天蓝色):

爱情收缩没有视频里那么厉害。我很内疚鲍晓没能找到一个好的数学函数来实现爱情的节奏。

实现分析 我们先来分析一下实现要点:

爱是最核心的组成部分，可以初步认为是多层的爱:外在的爱，爱的轮廓，内在的爱等。 用粒子形成爱。 酷炫的动画，这部分才是难点。

爱情实现 在前端，你问怎么画图像，canvas不放弃。Canvas提供的lineTo和stroke方法可以画出你想要的任何图形。 那么困难来了，如何确定lineTo连接点，也就是如何得到爱的各个位置的点。有困难就找数学。 在高等数学中，极坐标系中有几条超级经典的曲线，如浪漫心线、阿基米德螺线等。鲍晓沿着这个思路开始查度娘，发现了那么多有爱的作图方式，数学家的浪漫(骄傲的大拇指)。

六种爱不一样，爱一可爱，爱六更有活力，顺从内心，选择爱六。(当然我不会说其中一个重要原因是参数方程的模型好画) 第一步:根据方程写出爱点的生成函数。 // scale是放大倍数。 // width height是画布的大小，将生成的love移动到画布的中心。 函数生成器Heart(t，scale = 11.6) { 设x = 16 * math . sin(t)* * 3； 让y = -( 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t) ); x = x *比例+宽度/2； y = y *比例+高度/2； 返回新点(x，y)； } 复制代码 第二步:创造一个爱情圈 t的取值范围为[0，2π]，循环生成360个点。 const hearts =[]； for(设I = 0；i < 360i++) { hearts . push(generator heart(2 * Math。PI *(I/360)))； } 复制代码 第三步:画出爱 遍历每个点，并使用画布连接线条。 函数drawHeart2(上下文，点){ context . begin path()； points.forEach((point) => { context . stroke style = " # 00 ffff "； context.lineTo(point.x，point . y)； context . stroke()； }); context . close path()； } 复制代码

等等，我们要的是粒子爱。应该如何从依恋之爱转变为粒子之爱？ 第四步:粒子爱 Canvas提供了圆弧方法来画圆或圆弧，fill可以达到填充的效果。所以可以用圆弧法生成很多小圆，用fill填充，形成粒子效果。 函数drawHeart(上下文，点){ points.forEach((point) => { context . begin path()； context . fill style = " # 00 ffff "； context.arc(point.x，point.y，point.size，0，Math。PI * 2)； context . fill()； context . close path()； }); } 复制代码

整体结构实现 在这部分的开头，我们先来梳理一下整体的代码，丰富一下整体的逻辑，然后继续制造浪漫。 步骤1:定义点类 Point是每个粒子的基类，需要x，y，size三个属性。 类点{ 构造函数(x，y，size) { this.x = x this.y = y this.size = size } } 复制代码 第二步:定义Heart类，将所有与爱情相关的代码融入类中。 这里抛几个问题。我们来思考一下心类应该有什么？

如何实现感动爱情的效果？

借助于帧动画的思想，预先计算出每一帧中粒子的对应位置，通过window.requestAnimationFrame的回调函数每次刷新画布，绘制出对应帧的图像。

爱情边缘的粒子可以用公式生成。爱情内外的粒子是如何产生的？

说实话，一开始包也没想到解决方案，既能保证粒子的随机分布，又能尽可能保证粒子的均匀性。这似乎是一个令人挠头的数学问题。在这场危机中，码农高田大榭给出了他的解决方案。原代码是用python实现的，鲍晓借鉴了大禹的实现方案中的核心公式，转换成了前端版本。

内部粒子由-log(x)函数生成，且(0，1)函数中-log(x)的曲线较陡，能更好地保证内部粒子的随机性。 动画粒子在帧中的位置由sin(x)函数计算。sin(x)是一个周期函数，整体上比较稳定，爱情的动态效应比较稳定，不引人注目。(如果想实现更炫酷的动态效果，需要修改计算函数，比如贝塞尔曲线等。)

通过上面的分析，我们对心类有了初步的了解。

各层的Love粒子及其初始化生成函数 动画中每一帧粒子位置的计算函数 爱的外粒子是根据每一帧生成的，每一帧的位置是根据爱的内外粒子的公式计算出来的。

爱情打败了结局 在计算出每一帧的粒子位置后，使用requestAnimationFrame和canvas实现爱心跳动的效果。 //根据粒子的位置和大小绘制所有粒子

3D爱情 实现李浪漫爱情的密码有点麻烦。先来初步体验一下简单的3D开发。本文就不细说各种概念了，让我们一起来过一遍，体会一下Threejs的强大和魅力。 基本配置

此代码部分是基于Vite+Vue3开发的。

第一步:建立一个场景，一般来说，是给一个地方展示和绘制一个网站。 const场景=新三。场景()； 复制代码

第三步:设置渲染器，决定场馆中的什么样的东西将以什么风格展示给观众。 常量渲染器=新三。WebGLRenderer({ 抗锯齿:true，//抗锯齿 }); renderer . setsize(window . inner width，window . inner height)； renderer . output encoding = three . srgb encoding； renderer . setpixelrratio(window . devicepixelrratio)；

第五步:满足所有硬件条件。介绍模特恋爱。模型从何而来？先保密。 onMounted(() => { canvasdom . value . appendchild(renderer . DOM element)； renderer . setclearcolor(" # 000 ")； scene.background =新三。颜色(" # c0c0c 0 ")； scene.environment =新三。颜色(" # c0c0c 0 ")； render()；

//引入加载程序 const loader = new GLTFLoader()； loader . setmeshoptdecoder(MeshoptDecoder)； loader.load("/model/heart.glb "，(gltf) => { const heart = gltf.scene scene.add(心)； }); }); 复制代码

忽略小包包难看可怜的配色。配色真的是小包的世界难题。

第六步:给模型添加一些简单的动态效果。 这里用gsap动画库给爱情添加一个跳跃动画和一个旋转动画，让爱情“活”起来。 gsap.to(heart.rotation，{ y:数学。PI * 2， 时长:6， 重复:-1， }); gsap.to(heart.position， y: 0.8， 时长:1， yoyo:没错， 重复:-1， }); 复制代码

可以轻松实现简单的3D恋爱效果。如果你想了解更多关于Threejs的知识和案例，一定要关注鲍晓的专栏:Three从入门到实战。 源代码

3D爱拍在线体验源代码地址 利安浪漫爱情 在线体验源代码地址

摘要 李的浪漫爱情和3D爱情都成功实现了。我们再来看一下。这两个案例不是一个平衡的比较。作为三个j的学习指导，鲍晓在这里只是稍微比较一下。

李的浪漫爱情3D爱情很难实现，有些公式很容易爽，但是爽的程度一般(这个案例比较简单，3D世界特别爽)。画布绘画的适应性，比如如何找到合适的模型，如何光照，都可以按照自己的想法去创作，一定程度上受到模型的束缚。 本文带大家分别体会李的浪漫爱情和3D爱情。李的浪漫爱情实现起来很爽，但实现起来很难。3D恋爱的难度要低很多。只要能找到很酷的3D模型，就能达到很好的效果。相对的3D效果也受机型限制，但是谁能拒绝这种全面屏的立体炫酷感呢？ 接下来，抱着小包的Threejs，一起遨游3D世界。 侯钰 我是一个战场包裹，一个正在快速成长的小前端。我希望我能和你一起进步。