How to create a floating bubble changing its shape dynamically?

hrahimi270 · August 12, 2020, 9:29am

Hi members.
I want to create a bubble-like shape that changes its shape dynamically.
I upload a gif to show the exact behavior of the bubble.
Screen-Recording-2020-08-12-at-1

I’m not looking to create the whole thing. Only wanted the bubble part and its dynamic changes.
The shape I want to create is more like the below image.

A single bubble floated in screen and changing dynamically with gradient background color and some glow border.

Mugen87 · August 12, 2020, 12:22pm

One was to solve this issue is to animate a mesh with morph targets. Meaning you create the shape on Blender, author the morph targets and the respective animation (they are called shape keys in Blender) and then export to glTF. An animated sphere in glTF looks like so:

https://threejs.org/examples/webgl_morphtargets_sphere

BTW: Don’t be irritated by the white points. They are just demonstrating morph targets with THREE.Points.

hrahimi270 · August 12, 2020, 12:32pm

Thanks, @Mugen87 for the hint.
Actually, it’s not what I’m looking for. I don’t want a 3D shape. I need something flat. Something 2D!
Just like the images I sent.
I don’t want to rotate it. Only change its shape. Do you have any idea?

hrahimi270 · August 12, 2020, 12:33pm

BTW, I think it can be created using shaders. Not sure. But I don’t have experience writing and using shaders. You have any hint on that?

prisoner849 · August 12, 2020, 12:42pm

A nice example from @Alain_Barrios:

drcmda · August 12, 2020, 3:29pm

here’s another example

https://m94xb.csb.app/

hrahimi270 · August 14, 2020, 8:23am

I think this is the closest example to my need:

Ika · April 21, 2023, 5:54pm

Hi,
even though this post was marked as solved I’m recalling a solution and wanted to share it at least.

It uses cubic 2D splines with n control points connected to a circular path that adjusts itself smoothly

Demo at 2D Plotting Boilerplate – Demonstrating Hobby path and cubic spline path implementations (inspired by Prof. Dr. Edmund Weitz)

I used those some time ago I found them quite neat, here’s the source code

github.com

IkarosKappler/plotboilerplate/blob/8320194129ec49593c7a5c3f929fcc999a6b420f/src/ts/utils/algorithms/HobbyPath.ts

/**
 * @classdesc A HobbyCurve/HobbyPath calculation class: compute a set of optimal
 *            cubic Bézier curves from a sequence of vertices.
 *
 * This Hobby curve (path) implementation was strongly inspired by
 * the one by Prof. Dr. Edmund Weitz:
 * Here's the website:
 *  http://weitz.de/hobby/
 *
 * @date     2020-04-07
 * @author   Transformed to a JS-class by Ikaros Kappler
 * @modified 2020-08-19 Ported from vanilla JS to TypeScript.
 * @version 1.0.1
 *
 * @file HobbyPath
 * @public
 **/

import { CubicBezierCurve } from "../../CubicBezierCurve";
import { Vertex } from "../../Vertex";

This file has been truncated. show original

Greetings

Topic		Replies	Views
Morph Targets with GLTF Gui Questions animation , morph-targets , datgui	2	2465	May 22, 2020
Morph box sphere geometry (+shader) Resources uv-mapping , geometry , shaders , animation	10	3296	December 30, 2021
Morph targets keyframes? Questions animation , morph-targets	4	4937	February 26, 2018
Animate the Morph Target of GLTF object Questions animation , gltf-loader	1	1150	January 8, 2021
Lambert Material Morph Option Threejs Docs Questions animation , morph-targets	5	1679	January 1, 2019

How to create a floating bubble changing its shape dynamically?

Related Topics