diff --git a/static/js/background_anim.js b/static/js/background_anim.js index a948502cc926594c118c4d336db9e27deb1b2554..474b7c09fce7ea4e1a10d0ebb408de621b9a53dd 100644 --- a/static/js/background_anim.js +++ b/static/js/background_anim.js @@ -127,7 +127,9 @@ const setDisplayParameters = () => { setDisplayParameters(); let dots = []; +let prevMousePos = [0, 0]; let mousePos = [0, 0]; +let mouseVel = [0, 0]; for (let i = 0; i < DOTS_NUM; i++) { // Append new dot to the array with a random position, radius, and velocity @@ -191,15 +193,25 @@ const drawConnectingLines = () => { }; const drawDebugText = () => { + // Dots for(let dot of dots) { - let vx = Math.round((dot.vx + Number.EPSILON) * 100) / 100 - let vy = Math.round((dot.vy + Number.EPSILON) * 100) / 100 + let vx = Math.round((dot.vx + Number.EPSILON) * 100) / 100; + let vy = Math.round((dot.vy + Number.EPSILON) * 100) / 100; ctx.beginPath(); ctx.font = "15px Arial"; ctx.fillStyle = "#fff"; ctx.fillText(`${vx}/${vy}`,dot.x,dot.y); ctx.closePath(); } + + // Mouse + let vx = Math.round((mouseVel[0] + Number.EPSILON) * 100) / 100; + let vy = Math.round((mouseVel[1] + Number.EPSILON) * 100) / 100; + ctx.beginPath(); + ctx.font = "15px Arial"; + ctx.fillStyle = "#fff"; + ctx.fillText(`${vx}/${vy}`,mousePos[0], mousePos[1]); + ctx.closePath(); }; const draw = () => { @@ -274,8 +286,18 @@ const physics = () => { let cx = ax + (r * ((bx - ax) / Math.sqrt((bx - ax)**2 + (by - ay)**2))); let cy = ay + (r * ((by - ay) / Math.sqrt((bx - ax)**2 + (by - ay)**2))); + /* dot.vx = -dot.vx; dot.vy = -dot.vy; + */ + let dotNormVx = Math.abs(dot.vx); + let dotNormVy = Math.abs(dot.vy); + let mouseNormVx = Math.abs(mouseVel[0]); + let mouseNormVy = Math.abs(mouseVel[1]); + + // Set velocity based on mouse velocity + dot.vx = dot.x >= mousePos[0] ? dotNormVx + mouseNormVx : -dotNormVx - mouseNormVx; + dot.vy = dot.y >= mousePos[1] ? dotNormVy + mouseNormVy : -dotNormVy - mouseNormVy; dot.vx *= VELOCITY_PUSH_MULTIPLIER; dot.vy *= VELOCITY_PUSH_MULTIPLIER; @@ -310,6 +332,14 @@ window.addEventListener("mousemove", (event) => { // Scale clientX and clientY in case the screen size has changed mousePos[0] = (canvas.width / window.innerWidth) * event.clientX; mousePos[1] = (canvas.height / window.innerHeight) * event.clientY; + + // Work out velocity + mouseVel[0] = mousePos[0] - prevMousePos[0]; + mouseVel[1] = mousePos[1] - prevMousePos[1]; + + // Set previous mouse pos + prevMousePos[0] = mousePos[0]; + prevMousePos[1] = mousePos[1]; }); window.addEventListener("resize", () => {