这样的效果怎么实现

Creator 3.x
#1

如题，左右滑动的时候，上面的东西也会跟着摇摆。请教一下各位，有什么实现思路。
1

3赞
#2

我猜：
左右移动相当于给了一个水平方向的力f1，同时还有一个恢复原状的力f2,还有一个根据高度的系数t，f1会根据时间进行传导和衰减，节点位置为x+(f2-f1)dtt，

1赞
#3

看着像数数学的滤波函数

#4

嗯。这样说起来，感觉就是一个sin函数

#5

感谢回复，我去试试这个想法

#6

感谢感谢，我去试试

#7

image
image
image

https://www.desmos.com/calculator/lhpqa8luyt

1赞
#8

谢谢，但是我感觉不太对，只是刚好我这个gif里面里面它左右移动的时候，质点构成的曲线刚好像这个函数图像。如果我不移动的时候不均匀或者乱抖动，质点构成的曲线和这个头像没啥关系，我给您截几张图看下

#9

图片1 图片2

#10

或者说是我没有理解您的意思

#11

其实还是三角函数的东西，主要是要依次叠代计算每个节点朝向上个节点的角度。
你可以看这个，比较类似：
https://p5js.org/zh-Hans/examples/interaction-reach-2.html

1赞
#12

那就试试这种方式。

#14

感谢，我现在实现的效果已经是有朝向的，朝向就是和上一个节点位置连线的向量

#15

感谢，应该是要和力以及物理相关。但是不能只有水平方向的力，我现在更感觉像是一个弹簧之类的关节

#16

你参考这个弹簧，调整一下弹性和数量就行。
主要是得到得到一个摆动的曲线。弹性太强就调整质量和阻尼参数就行。
https://p5js.org/zh-Hans/examples/simulate-chain.html

let s1, s2, s3,s4,s5;
let gravity = 5.0;
let mass = 2.0;

function setup() {
  createCanvas(720, 400);
  fill(255, 126);
  // Inputs: x, y, mass, gravity
  s1 = new Spring2D(0.0, width / 2, mass, gravity);
  s2 = new Spring2D(0.0, width / 2, mass, gravity);
  s3 = new Spring2D(0.0, width / 2, mass, gravity);
  s4 = new Spring2D(0.0, width / 2, mass, gravity);
  s5 = new Spring2D(0.0, width / 2, mass, gravity);
}

function draw() {
  background(0);
  s1.update(mouseX, mouseY);
  s1.display(mouseX, mouseY);
  s2.update(s1.x, s1.y);
  s2.display(s1.x, s1.y);
  s3.update(s2.x, s2.y);
  s3.display(s2.x, s2.y);
  s4.update(s3.x, s3.y);
  s4.display(s3.x, s3.y);
  s5.update(s4.x, s4.y);
  s5.display(s4.x, s4.y);
}

GIF2

然后按照弹簧物体模拟的曲线路径长度比例，把你的食物按顺序沿着角度和线摆放上去就行了
image

5赞
#17

这个效果我好像实现过。。就是节点之间关节相连，然后重力变为向上就行了。假如之前往下掉的重力是10，那么把重力调成-10。这样物体都会往上飘自己自动摆正 :rofl:

#18

感谢感谢，我试试

#19

感谢，请问您用的是3d的哪个关节

#20

:+1: 这个想法不错

#21

不记得了，现在复刻了一个，用了distance，但不知道为啥不旋转 :rofl:
20231229_09：47：18_1