What is the best way to create a fluid-like moving 2D morphing circle using three.js?

I have a circular mesh that I want to animate similar to the example shown in this link from the two.js 2D library:

Currently, I've been studying this example and positioning the camera above the shape, but I believe there must be a simpler way to achieve what I'm looking for:

Any suggestions on how I can achieve this animation effect?

Answer №1

To create a dynamic animation, consider adjusting the position of vertices using trigonometric functions like sin() or cos(). By updating X and Y coordinates based on a time increment, you can achieve a shifting effect. Incorporate a similar logic into your vertex shader, where the phase variable increases over time (commonly synchronized with a clock).

glPosition.x = vertex.x + sin((phase*frequency) + vertex.y) * amplitude;
glPosition.y = vertex.y + sin((phase*frequency) + vertex.x) * amplitude;

This technique provides a foundation for your animation, but feel free to experiment with different parameters. Adjust the frequency, amplitude, and consider introducing additional factors for variation and unpredictability in your animation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a custom button specifically for the month view in JavaScript FullCalendar

I have successfully added a custom button to my JavaScript full calendar code, but I would like this button to be displayed only in the month view. $(document).ready(function() { var calendar = $('#calendar').fullCalendar({ editable: tru ...

Having issues getting Nunjucks templates to render correctly in Express

There seems to be an issue with setting up the template hierarchy in Express or possibly an error in how Nunjucks is being utilized. The goal is to have a template that includes common parts and specific pages that extend this template. It appears that the ...

How come my MySQL date is decreasing by one day when using JavaScript?

My todo list is stored in a MySQL database with columns for todoTitle and todoDate. However, when I display the todoDate on my website, it shows the date decremented by one day. For example, if the date in the database is 2016-12-20, it will show as 2016-1 ...

The browser's window.location.href fails to redirect the page

Here are my functions: <a onClick="check_claims(this)" type="button" href="javascript:void(0)" redirurl="www.facebook.com" >Invite</a> function check_claims(ele){ var select_claims = document.getE ...

Is there a reason why the JSX select element does not automatically select the option (implementing 'selected')? I'm unsure if I am overlooking something

In my HTML, I have a snippet of code that defines a custom <SelectField> component using a <select> tag like this: export default function SelectField(props) { /* PARAMETERS: - fieldname (String) - fieldID (String) - options (A ...

I am experiencing an issue with the checkbox in my React app where the state is not updating after it has been

I am currently building a todo app using React, but I'm encountering an issue where nothing happens when I click the checkbox. I've provided my code below: App.js import './App.css'; import React from 'react' import TodoItem ...

Retrieving information from a JSON file using React

Hello everyone, I'm currently working on creating a dynamic menu that pulls its items from JSON data. I am using React and struggling with the correct syntax. Here is the sample data: { "name": "menu", "childr ...

Uncovering unseen tags generated by JavaScript on a webpage using Python

I have THIS LINK page that contains javascript. To view the javascript, simply click on show details. How can I extract data from this URL source? Should I use re? Here is what I attempted with re: import urllib import re gdoc = urllib.urlopen('Tha ...

Is it possible for an <input> tag in PHP AJAX to have an "action" attribute similar to a <form> tag?

Forms typically use an action attribute to specify where the data should be posted, such as a .php file. Do <input> elements have this action attribute as well? The answer is likely no, but I am curious to understand what concept I may be misunders ...

Determine the value of a field by utilizing the values of two other fields through an onChange event

Setting the Stage: Imagine a scenario with 3 key fields: quantity, singlePrice, and totalPrice. I want these fields to be part of my form, with totalPrice being dynamically recalculated whenever quantity or singlePrice changes. My Approach: I created ...

What is causing the issue with the code `exports = { z: function() {} };` not functioning as intended?

Script A exports = { z: function() { console.log('aZ'); } }; Script Main require('./a').z(); // error Have you ever wondered why require('./a') ends up returning an empty object? ...

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

Retrieve the currently displayed page on a bootstrap table

I'm currently utilizing the bootstrap table to showcase my data. One of the features I have added is a column with an edit button for each row. Upon clicking on the edit button, I open a bootstrap modal that displays the data from the corresponding ro ...

What is the best way to ensure my dropdown menu closes whenever a user clicks anywhere on the page? (javascript)

I have created a dropdown that appears when the user clicks on the input field, but I would like to remove the active class so that the dropdown disappears if the user clicks anywhere else on the page. Here is my code snippet: // drop-down menu functi ...

Converting a Luxon DateTime object into a standard date

Currently, I am constructing a DatePicker React component utilizing the Material-UI picker library and integrating Luxon as an adapter. Whenever I modify the calendar date, I receive an object containing DateTime information as shown below: https://i.ssta ...

What is the process by which browsers manage AJAX requests when they are made across

I have encountered an issue that is puzzling to me, and I suspect it might be due to my misunderstanding of how the browser handles AJAX requests. Just for context, I am using Codeigniter on an Apache server and triggering AJAX requests with jQuery. The b ...

The content within Contentful is presented in a JSON object format, but accessing specific values is proving to be

I have successfully added two records in the contentful database and now I am attempting to fetch the content from Contentful into my React-hooks website. However, I am facing difficulties retrieving the values for title, description, image, and shortDescr ...

Breaking up a string using regex with various conditions

(Javascript old version of Node.js) Update: I need to clarify my request. I have a variety of instances like these var name1; CONST name2 Let nam; leT nam VAr n1 ; What I want as output is name1 name2 nam nam n1 Therefore, I am ex ...

Make a request to the local API in a React Native mobile app by sending a GET request

Currently, I am working on a mobile application using React Native and utilizing SQL Server and NodeJS. The API for this project is located in my localhost. Upon running the application on an emulator, I encountered an issue when attempting to make a reque ...

Utilizing Google+ Snippet and Open Graph Protocol for Enhanced Visibility

I am currently facing an issue with my dynamically built web page where the links shared on Google+ are not showing snippets properly. I have followed the example snippet for article rendering and documentation provided here: https://developers.google.com ...