Breaking News: Grepper is joining You.com. Read the official announcement!

using simple javascript without Threejs

Rashid Siddique answered on July 13, 2023 Popularity 1/10 Helpfulness 1/10

answer using simple javascript without Threejs

using simple javascript without Threejs

Comment

// Get the references to the objects
const object1 = document.getElementById('object1');
const object2 = document.getElementById('object2');

// Set initial positions for the objects
object1.style.left = '100px';
object1.style.top = '100px';
object2.style.left = '400px';
object2.style.top = '200px';

// Define the force magnitude for the magnetic effect
const forceMagnitude = 0.1;

// Render loop
function animate() {
  // Calculate the direction vector between the objects
  const object1Rect = object1.getBoundingClientRect();
  const object2Rect = object2.getBoundingClientRect();
  const directionX = object2Rect.left - object1Rect.left;
  const directionY = object2Rect.top - object1Rect.top;

  // Calculate the distance between the objects
  const distance = Math.sqrt(directionX ** 2 + directionY ** 2);

  // Check if the objects are within a certain threshold distance
  if (distance < 100) {
    // Normalize the direction vector
    const normalizedDirectionX = directionX / distance;
    const normalizedDirectionY = directionY / distance;

    // Calculate the force to apply in each axis
    const forceX = normalizedDirectionX * forceMagnitude;
    const forceY = normalizedDirectionY * forceMagnitude;

    // Apply forces to the objects
    object1.style.left = parseInt(object1.style.left) + forceX + 'px';
    object1.style.top = parseInt(object1.style.top) + forceY + 'px';
    object2.style.left = parseInt(object2.style.left) - forceX + 'px';
    object2.style.top = parseInt(object2.style.top) - forceY + 'px';
  }

  // Call the animate function recursively
  requestAnimationFrame(animate);
}

// Start the animation
animate();

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: javascript using

Link to this answer
Share Copy Link

Contributed on Jul 13 2023

Rashid Siddique

0 Answers Avg Quality 2/10

using simple javascript without Threejs

Contents

More Related Answers

using simple javascript without Threejs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.