Java - get alpha value between 0 - 255 using distance between two objects

Question

I am working on a 2D platformer game. There are star objects in the background and these stars move around. I wanted to draw lines between them and I've managed to do this without much effort. What I am now trying to do is to add an alpha value(transparency) to the lines being drawn. I have tried to write an equation where alpha value is inversely proportional to the value of distance between two objects but have not succeeded.

How do I mathematically express the following rule ?

The larger the distance is, the lesser value of alpha gets

For example, if the distance is 400 then the transparency value should be 0 (java.awt.Color uses 0 as 100% transparency and 255 as no transparency)

here is an example of what I am trying to achieve:

 var canvas = document.getElementById("canvas"), ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var stars = [], // Array that contains the stars FPS = 60, // Frames per second x = 40, // Number of stars mouse = { x: 0, y: 0 }; // mouse location // Push stars to the array for (var i = 0; i < x; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 1 + 1, vx: Math.floor(Math.random() * 50) - 25, vy: Math.floor(Math.random() * 50) - 25 }); } // Draw the scene function draw() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(sx, sy, s.radius, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = 'black'; ctx.stroke(); } ctx.beginPath(); for (var i = 0, x = stars.length; i < x; i++) { var starI = stars[i]; ctx.moveTo(starI.x,starI.y); if(distance(mouse, starI) < 150) ctx.lineTo(mouse.x, mouse.y); for (var j = 0, x = stars.length; j < x; j++) { var starII = stars[j]; if(distance(starI, starII) < 150) { //ctx.globalAlpha = (1 / 150 * distance(starI, starII).toFixed(1)); ctx.lineTo(starII.x,starII.y); } } } ctx.lineWidth = 0.05; ctx.strokeStyle = 'white'; ctx.stroke(); } function distance( point1, point2 ){ var xs = 0; var ys = 0; xs = point2.x - point1.x; xs = xs * xs; ys = point2.y - point1.y; ys = ys * ys; return Math.sqrt( xs + ys ); } // Update star locations function update() { for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; sx += s.vx / FPS; sy += s.vy / FPS; if (sx < 0 || sx > canvas.width) s.vx = -s.vx; if (sy < 0 || sy > canvas.height) s.vy = -s.vy; } } canvas.addEventListener('mousemove', function(e){ mouse.x = e.clientX; mouse.y = e.clientY; }); // Update and draw function tick() { draw(); update(); requestAnimationFrame(tick); } tick(); 

 canvas { background: #232323; } 

 <canvas id="canvas"></canvas> 

Answer 1

You should use:

((MAX_DISTANCE - distance) / MAX_DISTANCE) * 255

---

Explanation:
(MAX_DISTANCE - distance) makes sure that the larger the distance, the smaller the result.
Then, diving by MAX_DISTANCE and multiplying by 255, scales it from 0-MAX_DISTANCE to 0-255.