Changing Three.js from mouse interaction to a random movement pattern

Recently, I came across this interesting website with a background that lights up depending on the movement of your mouse. I was wondering if there is a way to make that illuminated spot move around on its own. If you want to see how it looks, check out the following CodePen link: https://codepen.io/anon/pen/MGoxNr

I hope the description gives you a clear idea of what's happening.

Also, here is a live website where this effect is implemented: . Feel free to visit it for reference.

function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * -10;
}

Answer №1

Instead of using the function onDocumentMouseMove, it is recommended to use an interval and set X and Y coordinates on a circle with a specified radius. By introducing an incrementing variable, you can dynamically calculate the position of X and Y on the circle based on this variable.

Here are some variables to consider:

  • x0, y0 - center of the circle
  • r - radius of the circle
  • a - angle
x = x0 + r*cos(a)
y = y0 + r*sin(a)

As the angle changes, the values of x and y will also change accordingly.

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

A guide on sharing an express.js response object with a different module

In my server.js file, I am attempting to pass an Express response object to a different module. Here is how I have implemented it: const room = require('../controller/rooms_controller') app.post('/rooms', function(req, res){ var na ...

Unlocking the Magic of JSONP: A Comprehensive Guide

Currently attempting to utilize JSONP in order to work around Cross Domain challenges. I referenced this solution: Basic example of using .ajax() with JSONP? $.getJSON("http://example.com/something.json?callback=?", function(result){ //response data a ...

Unauthorized changes made without verification

I'm in the process of developing a website that allows users to post without needing to create an account. Upon posting, users will be prompted to enter their email address. After posting, users will receive an email with a unique URL that grants th ...

Resizing Div elements in React

I am currently working on a Drawer navigation feature and I am exploring the option of enabling mouse drag resize functionality. To achieve this, I have included a div element where I listen for the onMouseDown event. Once triggered, I then add an event li ...

String passed instead of JSON in Ext JS grid sorting

I encountered an issue while attempting to incorporate server-side sorting with Sencha Ext JS. The JSON paging section appears correct, but the sort property is defined as a String rather than an Array: Actual: {"page":1,"start":0,"limit":50,"sort":"[{&b ...

After adding data to an empty array, index 0 becomes undefined for someEmptyArray

Currently, I am utilizing fs.readdir to generate an array of filenames within a specific directory. Additionally, I have implemented some regex functions to filter out undesirable filenames and/or filetypes. Upon executing the code provided below, I succe ...

Verifying the Absence of Events in the Chosen Month Display of the FullCalendar jQuery Plugin

Currently utilizing full calendar, which is being shown in month view with toggle buttons for navigating between months. Now, I am looking to have a message appear that reads "No events scheduled for the month." if there are no event objects present for t ...

Tips for sending JSON data to the line chart function

Creating a line chart using Highcharts involves retrieving values from a database and passing those values to the line chart. Here is an example: //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun ...

Setting environmental variables throughout your application using create-react-app on the front end

Hey there! I have a simple Todo app with the client using create-react-app and the server running on node. I'm struggling to properly set environment variables across my app. I've placed my .env file in the root directory of the app, which curre ...

Switch from using `widthWidth` to `useWidth` in MUI v5 ReactJS

Currently, I am in the process of updating a project that utilizes MUI as the UI Library for my React application. I have started migrating to version 5 today, and one issue I've encountered is related to all functional components wrapped by withWidth ...

Is there a way to efficiently display more than 10 data items at a time using the FlatList component in react-native?

Here is the data I am working with: singlePost?.Comments = [ 0: {id: 82, content: "Parent1", responseTo: null} 1: {id: 83, content: "Child1", responseTo: 82} 2: {id: 84, content: "Parent2", response ...

Setting up a functionality for a PHP-generated select option

When the main select tag "category" is changed, it triggers a PHP script to display a new select tag: <select id="category" onchange="showme(this);"> <option value="txt">text</option> <option value="img">image</ ...

Having issues transferring the variable from JavaScript to PHP?

When attempting to pass a variable via AJAX request in JavaScript, I am encountering an issue where the variable is not being received in my PHP file. I'm unsure of where the problem lies. Can anyone help? JavaScript code var build = { m_count : ...

What is the best way to include a &nbsp; in a map function using JavaScript?

A challenge I encountered while working in React is as follows: <Grid item> { rolePriorities.map((rp, index) => ( <Chip key={index} label={rp} color="primary" sx={{ color: "whitesmoke" }} /> ...

What could be causing my mongoose array to remain empty without any values being stored in it?

Issue at Hand While I have come across several similar problems on Stack Overflow about this particular issue, none of the solutions provided seemed to work for me. I am in the process of developing a basic Forum application with two routes - one for cre ...

The necessary attribute is malfunctioning. (HTML)

I am currently working on a signup page utilizing HTML and JavaScript. Everything was running smoothly until I added a function to navigate the user to the next page. The issue arises when the textboxes are left blank; upon clicking the button, the user is ...

What causes functions operating on mapped objects with computed keys to not correctly infer types?

If you are seeking a way to convert the keys of one object, represented as string literals, into slightly modified keys for another expected object in Typescript using template string literals, then I can help. In my version 4.9.5 implementation, I also ma ...

convert an array of hexadecimal colors into an array of RGB colors

I am trying to convert an array of hex colors to RGB values using a custom function. The array looks like this: var hexColors = [ "#ffffff", "#ffffff", "#ffffff", "#f3f3f3", "#f3f3f3", "#f3f3f3"]; The desired output is: var rgbCo ...

Accessing an array of objects within nested objects results in an undefined value

I am facing an issue with my JavaScript object that is retrieved from MySQL. The object has a property which contains an array of other objects, as demonstrated below: parentObject = { ID: "1", Desc: "A description", chi ...

Is it possible for Angular.js timer finish event not to trigger data binding correctly?

I've been working on an AngularJS application that functions as a quiz by displaying pictures and prompting users to select the correct answer by clicking a button. The app is designed to store the user's answers in an object. Everything seems t ...