canvas 有趣的弹簧效果

2023-12-12 01:28
文章标签 效果 canvas 有趣 弹簧

本文主要是介绍canvas 有趣的弹簧效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

先上效果

两个小球之间有一根弹簧,这里有一条线表示,其中左球固定,在点击开始后,右球开始做自由落体

思路

先做受力分析

经过受力分析可以发现,整个系统一共有三个在起作用,我们分别把他们求出来并合成为一个,然后这个加速度即可

重力

右边小球全程受到方向向下的重力,其公式为

G = m * g
弹力

右边小球全程受到从自身中心指向左边小球中心方向的的弹力,其公式为

// 胡克定律
F = -△x * k
空气阻力

可以简化成和速度方向相反,乘一个小于1的阻力系数的力

// dragCoefficient值越大说明阻力越大
F = -v * dragCoefficient

我们先创建重力的单位向量代表重力的方向,因为重力永远是垂直向下的所以向量其单位向量是(0, 1),然后给定一个重力大小,根据重力公式,质量乘重力加速度即可,这里质量我给了 10,重力加速度给 9.8,代码如下

// 获取重力单位向量
function getGravityNorVector() {return {x: 0,y: 1,};
}// 获取重力大小
function getGravitySize() {return m * g;
}

然后创建弹力单位向量表示弹力的方向,其方向永远是右球的球心指向左球的球心,其大小根据胡克定律给到,即形变距离 乘以 弹簧弹性系数

// 获取弹力单位向量
function getElasticityNorVector() {// 左球球心坐标减右球球心坐标,然后做向量归一化return normalized(createVector(originPosition, targetPosition));
}// 获取弹力大小
function getElasticitySize() {// 计算Δxconst offsetX =length(createVector(originPosition, targetPosition)) - originElasticitySize;// 胡克定律,只要大小,所以取绝对值return Math.abs(-offsetX * K);
}

然后我们计算空气阻力,其方向和速度方向相反,阻力系数我给了个 0.1,由于一开始初速度为 0,所以阻力为 0,只用等到动起来有速度的时候才会产生阻力

// 空气阻力,dragCoefficient为阻力系数,输出是一个向量
const other = {x: -vx * dragCoefficient,y: -vy * dragCoefficient,
};

现在我们所有力的大小和方向都求出来了,然后根据向量平行四边形法则,先合成弹力重力

// 单位向量 * 向量长度可以得到矢量力,输出是一个向量
const elasticityAndGravity = add(mul(getElasticitySize(), getElasticityNorVector()),mul(getGravitySize(), getGravityNorVector())
);

然后再和空气阻力合成最终的力

// 所有力的合成,输出是一个向量
const total = add(elasticityAndGravity, other);

然后再把合成后的力分解成水平和垂直的两个分力,这里用到向量投影算法就能实现,即可以先通过向量点积的形式,求出与水平单位向量(1,0)和垂直单位向量(0,1)的余弦值,然后用合成力的大小乘以这个余弦值得到投影到水平方向和垂直方向的大小,再用这个大小分别乘以水平单位向量(1,0)和垂直单位向量(0,1)就能得到水平和垂直的两个分力向量

// 获取力在x轴和y轴分量向量
function getXYAxisVector(fNorVector, fSize) {const yAxisNorVector = createVector({x: targetPosition.x,y: targetPosition.y - 1,},targetPosition);const xAxisNorVector = createVector({x: targetPosition.x - 1,y: targetPosition.y,},targetPosition);// 分别点击求向量在水平单位向量和垂直单位向量的余弦值const cosYAxis = dot(yAxisNorVector, fNorVector);const cosXAxis = dot(xAxisNorVector, fNorVector);return {yVector: mul(fSize * cosYAxis, yAxisNorVector),xVector: mul(fSize * cosXAxis, xAxisNorVector),};
}// 获取水平和垂直分力向量
const result = getXYAxisVector(normalized(total), length(total));

然后根据公式

F = m * a;

把得到的两个分力分别除以质量 m,目前 m 给的是 10,得到 x 和 y 方向的加速度

// 获取水平和垂直方向加速度
const xAcceleration = result.xVector.x / m;
const yAcceleration = result.yVector.y / m;

然后再每一帧渲染的时候,把加速度加到速度上,右球的坐标加上速度,即可以渲染出效果,这里除以100是防止速度太快

vx += xAcceleration;
vy += yAcceleration;
targetPosition.x += vx / 100;
targetPosition.y += vy / 100;

就能得到最终这个效果了

源码

可以关注下我的公众号,对应的文章有源码,还有其他有趣的干货文章哦~

这篇关于canvas 有趣的弹簧效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/482758

相关文章

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的

nudepy,一个有趣的 Python 库!

更多资料获取 📚 个人网站:ipengtao.com 大家好,今天为大家分享一个有趣的 Python 库 - nudepy。 Github地址:https://github.com/hhatto/nude.py 在图像处理和计算机视觉应用中,检测图像中的不适当内容(例如裸露图像)是一个重要的任务。nudepy 是一个基于 Python 的库,专门用于检测图像中的不适当内容。该

【Godot4.3】多边形的斜线填充效果基础实现

概述 图案(Pattern)填充是一个非常常见的效果。其中又以斜线填充最为简单。本篇就探讨在Godot4.3中如何使用Geometry2D和CanvasItem的绘图函数实现斜线填充效果。 基础思路 Geometry2D类提供了多边形和多边形以及多边形与折线的布尔运算。按照自然的思路,多边形的斜线填充应该属于“多边形与折线的布尔运算”范畴。 第一个问题是如何获得斜线,这条斜线应该满足什么样

UniApp实现漂亮的音乐歌词滚动播放效果

在现代的音乐播放应用中,歌词的展示和滚动播放已经成为了一个非常常见的功能。今天,我们将通过UniApp来实现一个漂亮的歌词滚动播放功能。我们将使用UniApp提供的组件和API来完成这个任务。 页面结构 在页面的模板部分,我们需要创建一个音频播放器和歌词展示区域。使用<scroll-view>组件来实现歌词的滚动效果。 <template><view class="audio-co

Nuxt3入门:过渡效果(第5节)

你好同学,我是沐爸,欢迎点赞、收藏、评论和关注。 Nuxt 利用 Vue 的 <Transition> 组件在页面和布局之间应用过渡效果。 一、页面过渡效果 你可以启用页面过渡效果,以便对所有页面应用自动过渡效果。 nuxt.config.js export default defineNuxtConfig({app: {pageTransition: {name: 'fade',mode

Differential Diffusion,赋予每个像素它应有的力量,以及在comfyui中的测试效果

🥽原论文要点 首先是原论文地址:https://differential-diffusion.github.io/paper.pdf 其次是git介绍地址:GitHub - exx8/differential-diffusion 感兴趣的朋友们可以自行阅读。 首先,论文开篇就给了一个例子: 我们的方法根据给定的图片和文本提示,以不同的程度改变图像的不同区域。这种可控性允许我们再现

【Unity小技巧】URP管线遮挡高亮效果

前言 在URP渲染管线环境下实现物体遮挡高亮显示效果,效果如下: Unity URP遮挡高亮 实现步骤 创建层级,为需要显示高亮效果的物体添加层级,比如Player 创建一个材质球,也就是高亮效果显示的材质球找到Universal Renderer Data Assets 4.在Assets上添加两个Render Objects组件 第一个做如下三处设置 指定遮挡层级指

海鲜加工污水处理设备处理效果高

诸城市鑫淼环保小编带大家了解一下海鲜加工污水处理设备处理效果高   海鲜加工污水处理设备通常采用物理、化学和生物处理相结合的方法,对废水中的污染物进行高xiao去除。设备设计紧凑,占地面积小,操作简便,适用于不同规模的海鲜加工厂。   设备特点   高xiao性:采用先进的处理工艺和技术,确保废水处理效果稳定可靠。   占地面积小:设备设计紧凑,占地面积小,适合在有限的空间内安装。

图像分割分析效果2

这次加了结构化损失 # 训练集dice: 0.9219 - iou: 0.8611 - loss: 0.0318 - mae: 0.0220 - total: 0.8915  # dropout后:dice: 0.9143 - iou: 0.8488 - loss: 0.0335 - mae: 0.0236 - total: 0.8816 # 加了结构化损失后:avg_score: 0.89